Diseo Web II !

fundamentos !

TIPOGRAFIA & DISEO WEB

Diseo Web II !
fundamentos !

El texto es la interfaz !!!

Diseo Web II !
fundamentos !

El 95 % del diseo WEB es Tipografa

Diseo Web II !
fundamentos !

El diseo de informacin es

Tipografa ?

Diseo Web II !
fundamentos !

Tipografa no es elegir las tipograas !!!

Diseo Web II !
fundamentos !

qu es la Tipografa ?

Diseo Web II !
fundamentos !

TIPOGRAFA = LETRAS = TEXTO

Qu significa tipografa? El trmino tipografa remite tanto al lugar donde se imprime, esto es la imprenta, como al arte de imprimir.

link

La tipografa ha sido un sistema de composicin e impresin que tal y como lo cre

Diseo Web II !
fundamentos !

La tipografa se ocupa de estructurar y organizar el lenguaje visualmente

Phil Baines y Andrew Haslam (2002)

La tipografa tambin remite al diseo y creacin de aquellos caracteres mnimos (signos gr cos) con los que va a poder organizarse y estructurarse el mensaje visual.

un diseo para la ESCRITURA un diseo para la LECTURA.

Diseo Web II !

Manual de Tipografa. Del plomo a la era digital Jos Luis Martn Montesinos y Montse Mas Hurtuna. Ed CampGraphic

fundamentos !

LEGIBILIDAD

Diseo Web II !

Manual de Tipografa. Del plomo a la era digital Jos Luis Martn Montesinos y Montse Mas Hurtuna. Ed CampGraphic

fundamentos !

EXPRESIVIDAD

Diseo Web II !
fundamentos !

MACROTIPOGRAFA & MICROTIPOGRAFA

Diseo Web II !
fundamentos !

Microtipografa & Macrotipografa

En el mbito de la Microtipografa o tipografa del Detalle, las unidades conceptuales o conceptos tipogrficos esenciales son:

La Letra y el espacio entre las letras; la Palabra y el espacio entre las palabras;

Diseo Web II !
fundamentos !

Microtipografa & Macrotipografa

Longitud de la lnea en el prrafo y calculo del interlineado correcto

Las correcciones aplicadas sobre la forma geomtrica bsica de las letras tiene como funcin compensar ilusiones pticas que actan sobre la forma y el tamao de las letras y sobre el grosor de sus rasgos. En funcin de mantener una consistencia percibida de tamao, por ejemplo, las letras de forma circular o triangular exceden en altura fsica a las dems letras. Entre otras modificaciones puede indicarse que los trazos medios horizontales se colocan por encima de la mitad de la altura, para que el resultado sea de mayor liviandad. El grosor de los trazos vara con su direccin: los verticales, que visualmente representan sostn, son ms gruesos que los horizontales; los horizontales medios son ms finos que los extremos ubicados en tope o base; los diagonales son tambin ms finos que los horizontales de los extremos. Los trazos verticales y diagonales se afinan al llegar a convergencias en funcin de evitar la creacin de grandes reas negras mientras que los trazos curvos varan constantemente de grosor y nunca son arcos de crculo, en funcin de manejar las fuerzas visuales de una manera menos mecnica, ms fluida. Muchas de estas caractersticas aparecen ya en los alfabetos del siglo XVIII.

Palabra

Diseo Web II !
fundamentos !

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographers task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.

Emil Ruder: Typopgraphy (1967)

Diseo Web II !
fundamentos !

El diseo de informacin es

Tipografa

Emil Ruder: Typopgraphy (1967)

Diseo Web II !
fundamentos !

La Tipografa es el arte de disponer correctamente el material de imprimir, de acuerdo con un propsito especco: colocar las letras, repartir el espacio y organizar los tipos con vistas a prestar al lector la mxima ayuda para la comprensin del texto.
Stanley Morinson (1929)

LEGIBILIDAD

Diseo Web II !
fundamentos !

TYPOGRAFA INVISIBLE

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Toda recepcin de escritura se realiza de dos modos simultneos:

1 como lectura en el sentido propio de la palabra,

o sea como transformacin de una serie de letras vistas por el lector en pensamientos
Jost Hochuli (1987)

2 como visin grca que desencadena una

serie de asociaciones con lo ya visto, adems de generar efectos emocionales y apreciaciones estticas.

Diseo Web II !
fundamentos !

Factor LINGSTICO vs Factor GRFICO

Critter // Craig Frazier (1993 / Adobe)

Una de las principales funciones de la tipografa es la de actuar como soporte para la comunicacin.

La legibilidad de un texto, de una palabra o de un carcter est relacionada en cierta manera con la invisibilidad de los signos grficos que le dan presencia

Cmo leemos una lnea de texto, como opera el proceso de lectura!!!!

LEGIBILIDAD
Arquitectura tipografa

Elementos: Lneas de Referencia ! Cuerpo de texto: La eleccin de una buena tipografa garantiza la correcta legibilidad de un texto. Prima Funcionalidad por encima de la expresividad esttica. Son recomendables tipografas de palo seco o romanas, nunca manuscritas o decorativas.

tipometra

Mac: 1px = 1pt 1pt (postscript)= 1/72 pulgadas

Los Monitores MAC tienen una resolucin de 72 DPI (Dots per Inch) // necesitamos PPM (pixel por EM)

tipometra

12 pt en pantalla de 72 DPI : 12 pixel por EM 12 pt en una pantalla de 96 DPI (12X 96) / 72= 16 PPM

#box1 { font-size:16px; width:1em; height:1em; border:1px solid black } #box2 { font-size:60px; width:1em; height:1em; border:1px solid black } M

Elementos: Lneas de Referencia y ojo medio

Elementos: Lneas de Referencia y ojo medio

Elementos: Lneas de Referencia y ojo medio

Elementos: ESTRUCTURAS BSICAS

Las variaciones en la estructura fundamental de los caracteres estn determinadas: (1) La ubicacin respecto de las lneas de referencia (2) La angulacin del eje constructivo.

Elementos: ESTRUCTURAS BSICAS ngulo eje constructivo: Oblicua & Cursiva

Cual es la diferencia entre unos caracteres cursivos y otros oblicuos?

Elementos: ESTRUCTURAS BSICAS ngulo eje constructivo: Oblicua & Cursiva

Cual es la diferencia entre unos caracteres cursivos y otros oblicuos?

LA PALABRA
Las palabras escritas forman unidades de significado

LA PALABRA
Las palabras escritas forman unidades de significado

Otro aspecto importante de la configuracin de la PALABRA es su ritmo interior: El juego de blancos y la mancha tonal que se produce en la escritura.

http://shape.method.ac/

http://type.method.ac/#

Toda composicin tipogrfica regida por el principio de legibilidad La funcin de toda composicin tipogrfica es lograr configurar una representacin de la escritura clara y equilibrada Las variables tipogrficas ms importantes: OJO MEDIO, LA MEDIDA DE LNEA, EL BLANCO ENTRE PALABRAS & EL INTERLETRADO.

Existen 16 variables tipogrficas de cuya interaccin depende la legibilidad del texto

VARIABLES TIPOGRAFICAS
Factores que influyen sobre las ordenes de composicin
1) Tamao de consideraciones generales que pueden influir en la Existen otras la pgina, diseo, tema: Medida de lnea, distancia de lectura, mrgenes, distancia entre eleccin tipogrfica: prrafos & nmeros de estilos empleados

1.! Tiposuperficie del papel y su color 2) La de letra:

Ojo medio; de las Pantallas o dispositivos multimedia. 2.! Resolucingrosor del trazo; modulacin & contraste 3) Los hbitos de lectura del 3.! Parmetros de composicin:pblico Blanco entre palabras; calidad de la particin de palabras; frecuencia 4.! La particin;Interlinea; cuerpo, la longitud media de las palabras de aplicacin del contenido y sangras;caja

que lo componen

EL OJO MEDIO
Se puede afirmar que se trata de la variable ms determinante de todas

La interlnea y el ojo medio estn directamente relacionados. 1.! Si el ojo medio es escaso la interlnea se puede reducir o desaparecer. 2.! Reducir la interlnea con un carcter de ojo medio elevado no es muy recomendable 3.! Un carcter con escaso ojo medio en un cuerpo pequeo resultar amenazante en largos bloques de

LA LINEA
Una lnea es un conjunto de palabras que se apoyan sobre la misma lnea base.

1.! La longitud de la lnea 2.! La distancia entre palabras

La longitud de la lnea puede producir fatiga en el lector y se pretende evitarlas dificultades para posicionarse en el inicio de la siguiente lnea.

LA LINEA. La longitud de la lnea

El tipo de lectura o el contenido Afecta a la longitud ptima de una lnea?

LA LINEA
Una lnea es un conjunto de palabras que se apoyan sobre la misma lnea base.

La longitud de la lnea
La longitud adecuada de una lnea depende de:
1.! El tipo de lectura que requiera el texto: consulta, peridico, novela, estudio... 2.! El tamao de la letra: a mayor tamao, mayor longitud de lnea 3.! El nmero ideal de caracteres segn el ancho de lnea.

CMO AFECTA EL TAMAO DE LA TIPOGRAFA UTILIZADA ADECUADO LONGITUD DE UNA LNEA?

Las lneas de entre 20 y 25 picas, resultan ms apropiadas para libros, el nmero de caracteres que se considera ptimo en cada lnea oscila entre 40 y 75 caracteres (65!!) Una columna estrecha, entre 8 y 10 picas de ancho, ha de tener alrededor de 30-35 caracteres. . Como regla general se considera que una lnea de doce o trece palabras resulta ptima para lograr una lectura fluida y cmoda.

80 carcteres
Web Content Accessibility Guidelines (WCAG) 2.0

LA LINEA:
blanco entre palabras

LA LINEA:
blanco entre palabras

NORMA GENERAL:
El espaciado entre palabras debe guardar relacin con los dems blancos del bloque de texto.

La tradicin recomienda que el espaciado correcto entre las palabras ser de 1/3 de cuadratn. (2/3 del ancho de una O; el ancho del carcter t)

LA LINEA:
blanco entre palabras

1.! Cuanto mayor sea la longitud se recomienda un aumento del espaciado entre palabras. 2.! Un tipo con un ojo medio elevado y diseo amplio demanda un espaciado generoso. 3.! Cuanto mayor sea el interlineado mayor debe de ser el espaciado.

NORMA GENERAL:
El espaciado entre palabras debe guardar relacin con los dems blancos del bloque de texto.

"Toda composicin de texto debe llevar el espaciado entre palabras ms estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamao mediano o del grosor de una "i" del tamao de tipo usado. Espaciados ms amplios sern estrictamente evitados. Las palabras pueden ser partidas de forma discrecional con el fin de evitar un espaciado ancho, ya que partir las palabras es menos daino para la apariencia de la pgina que disponer un espaciado ancho entre ellas". Jan Tschichold (1948)

LA LINEA:
blanco entre palabras

Tamao de los caracteres de la masa de texto

1.! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)

En Pantallas la referencia es de 12-16px (14px)

Tamao de los caracteres de la masa texto

1.! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)

En Pantallas la referencia es de 12-16px (14px) 2.! Se usan cuerpos mas pequeos:

1.! Los caracteres tienen un gran ojo medio. 2.! La medida de lnea es estrechada la divisin de palabras frecuente no es deseable 3.! El texto es material de consulta, catlogos,... 4.! Es importante conservar el espacio 5.! Se requiere una pgina ms densa

Tamao de los caracteres de la masa texto

1.! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)

En Pantallas la referencia es de 12-16px (14px) 2.! Se usan cuerpos mas grandes:

1.! Los lectores son ancianos y nios 2.! Las condiciones de lectura son deficientes 3.! Tipos condensado, negras o supernegras 4.! El carcter tiene mucho contraste 5.! El tamao de pgina es mayor, necesita ms distancia

LA LINEA:
blanco entre palabras

Se reduce el blanco entre palabras:

1.! Fuentes condensadas 2.! Muy poco espacio entre letras 3.! Interlineado negativo (titulares) 4.! Tipos con escaso ojo medio 5.! Un cuerpo grande 6.! Caracteres de palo seco 7.! Caracteres de caja alta y baja en lugar de maysculas.

*Factores que determinan el interlineado

INTERLINEA:
blanco entre Lineas

Se denomina interlineado a la zona no impresa entre dos lneas seguidas de texto impreso.

El ojo medio del tipo El ojo medio y la interlnea estn estrechamente relacionados entre s, ya que si el ojo medio es pequeo, la interlnea se debe reducir y en algunos casos desaparecer (VICEVERSA) La medida de la lnea En las lneas que exceden de una longitud considerada adecuada (10 a 12 palabras) es preciso aumentar el espacio entre ellas. (Compensar el riesgo de que las lneas se "doble)

Se tamao del tipo El usa menos interlineado cuando: Al mismo fino, el ojo medio escaso, tamao de lnea es corta, El trazo estiempo que se incremente el longituddel tipo utilizado esse razonable incrementar compone en versalitasel interlineado proporcionalmente. (120%) o se leen pocas lneas a la vez.

INTERLINEADO

LA LINEA:
blanco entre palabras

INTERLINEADO

INTERLINEADO

http://24ways.org/2006/compose-to-a-vertical-rhythm

INTERLINEADO

Diseo Web II !
fundamentos !

Text (Css Box Model)

Diseo Web II !
fundamentos !

Text (Css Box Model)

Diseo Web II !
fundamentos !

Text (Css Box Model)

Diseo Web II !
fundamentos !

Text (Css Box Model)

Diseo Web II !
fundamentos !

Text (Css Box Model)

Diseo Web II !
fundamentos !

Text (Css Box Model)

INTERLINEADO

COMPOSICIN DE BLOQUES DE TEXTO

Los bloques de texto pueden estar compuestos de diferentes maneras. Existen dos maneras generales de componer bloques de texto

A) COMPOSICIN JUSTIFICADA B) COMPOSICIN NO JUSTIFICADA

1.! Composicin centrada 2.! Composicin en bandera por la izquierda 3.! Composicin en bandera por la derecha

COMPOSICIN JUSTIFICADA 1.! PARTICIN DE PALABRAS 2.! TRACKING 3.! KERNING

1.! PARTICIN DE PALABRAS

2.! 3.! KERNING TRACKING

Parmetros de Justificacin

1.! PARTICIN DE PALABRAS

2.! 3.! KERNING TRACKING

Parmetros de Justificacin

1.! PARTICIN DE PALABRAS

2.! 3.! KERNING TRACKING

Parmetros de Justificacin

1.!

PARTICIN DE PALABRAS

2.! TRACKING 3.! KERNING

Parmetros de Justificacin

Parmetros de Justificacin

Adobe Garamond
12pt 16pt 18pt

PARTICIN DE PALABRAS

2.! TRACKING

3.! KERNING

1.!

1.!

PARTICIN DE PALABRAS

2.! TRACKING 3.! KERNING

Parmetros de Justificacin

COMPOSICIN NO JUSTIFICADA
1.! Composicin centrada 2.! Composicin en bandera por la izquierda 3.! Composicin en bandera por la derecha
"Toda composicin de texto debe llevar el espaciado entre palabras ms estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamao mediano o del grosor de una "i" del tamao de tipo usado. Espaciados ms amplios sern estrictamente evitados. Las palabras pueden ser partidas de forma discrecional con el n de evitar un espaciado ancho, ya que partir las palabras es menos daino para la apariencia de la pgina que disponer un espaciado ancho entre ellas". "Toda composicin de texto debe llevar el espaciado entre palabras ms estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamao mediano o del grosor de una "i" del tamao de tipo usado. Espaciados ms amplios sern estrictamente evitados. Las palabras pueden ser partidas de forma discrecional con el n de evitar un espaciado ancho, ya que partir las palabras es menos daino para la apariencia de la pgina que disponer un espaciado ancho entre ellas". "Toda composicin de texto debe llevar el espaciado entre palabras ms estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamao mediano o del grosor de una "i" del tamao de tipo usado. Espaciados ms amplios sern estrictamente evitados. Las palabras pueden ser partidas de forma discrecional con el n de evitar un espaciado ancho, ya que partir las palabras es menos daino para la apariencia de la pgina que disponer un espaciado ancho entre ellas".

Alessandro di Vecci 1600

JAN TSCHICHOLD

COMPOSICIN CENTRADA
Recomendaciones bsicas 1.! En la composicin centrada es conveniente no construir una forma de apariencia rectangular (para evitar la apariencia de un bloque de texto mal justificado) 2.! Un texto centrado de dos lnea, se recomienda, que la primera lneas sea mayor que la segunda (aunque no menos del doble). 3.! Pero en general es fcil lograr un composicin centrada variada y pticamente equilibrada.

"La igualdad de la longitud de la lnea no puede ser obtenida sin el sacricio del espaciado regular y, tipogrcamente hablando, ste es ms importante que aqulla. El espaciado regular es una gran ayuda para la lectura; el lector no se ve molestado por las interrupciones y ralentizacin que conlleva un espaciado irregular del texto aunque este est reducido al mnimo por una cuidadosa composicin."
Eric Gill Essay on Typography de 1936

Recomendaciones bsicas para la composicin en bandera:

1.-Espacios iguales entre palabras. 2.-Espacios iguales entre letras. 3.-No utilizar particin (slo excepcionalmente). 4.-No se recomienda utilizar sangra de primera lnea. 5.-Cuidado con la utilizacin de ciertas capitulares. 6.-No deben aparecer lneas demasiado similares. 7.-No debe haber lneas cada vez ms cortas. 8.-No se deben repetir pares de lneas de igual medida. 9.-No deben quedar palabras sueltas aunque lleven punto seguido.

"La igualdad de la longitud de la lnea no puede ser obtenida sin el sacricio del espaciado regular y, tipogrcamente hablando, ste es ms importante que aqulla.

"La igualdad de la longitud de la lnea no puede ser obtenida sin el sacricio del espaciado regular y, tipogrcamente hablando, ste es ms importante que aqulla.

"La igualdad de la longitud de la lnea no puede ser obtenida sin el sacricio del espaciado regular y, tipogrcamente hablando, ste es ms importante que aqulla.

!?

Diseo Web II !
fundamentos !

TIPOS DIGITALES *

Porta-matrices Times New Roman

Diseo Web II !
fundamentos !

Letra: cdigo digital

En la tipografa digital el tipo carece de una existencia fsica. El tipo es un conjunto de datos almacenados en la memoria de un ordenador

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Los tipografas digitales son software

Los formatos de fuentes dominantes son: 1.! PostScript Type 1 (PS1) 1985 2.! TrueType (TT) 1991 3.! OpenType (OTF) 1997 4.! WEBFONTS (EOT & WOFF) (2010)

Multiplataforma Trazados vectoriales de contorno (lineas y curvas) Independientes del dispositivo de salida Escalable a cualquier tamao sin perdida de calidad

Diseo Web II !
fundamentos !

PostScript Type 1 (PS1)

Diseo Web II !
fundamentos !

PostScript Type 1 (PS1)

PS1 en WIN Helvetica.afm & Helvetica.pfb

PS1 en mac
Helvetica.afm Helvetica.ifm Helvetica.bmp
Representacin pixelada para su representacin en pantalla

El formato TrueType solo necesita un archivo en ambas plataformas

Diseo Web II !
fundamentos !

RASTERIZAR:
Es el proceso de convertir los vectores (las lneas y curvas) en el patrn de puntos de semitono del dispositivo de salida (impresora o filmadora) Software de rasterizacin

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

HINTING:
El HINTING es un conjunto de instrucciones que se incorporan a la fuente para mejorar la calidad de la imagen en el proceso de escalado, sobre todo para resoluciones de baja calidad (por ejemplo para la pantalla de ordenador).

TrueType dispone de unas instrucciones de hinting ms complejas

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Opentype (1997) trabaja con el codificado de caracteres estndar UNICODE 3.1, el cual est: diseado para soportar el intercambio, la elaboracin y la exhibicin de textos escritos en todas las lenguas del mundo.

Diseo Web II !
fundamentos !

Opentype (1997) trabaja con el codificado de caracteres estndar UNICODE 3.1, el cual est: diseado para soportar el intercambio, la elaboracin y la exhibicin de textos escritos en todas las lenguas del mundo.

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Una fuente opentype se compone de 4 partes: 1.! 2.! 3.! 4.! La descripcin de contorno Instrucciones de Hinting Tabla para la clasificacin de caracteres/signo Posibilidades tipogrficas de sustitucin letras y Glifos

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

WEB FONTS !!!

Diseo Web II !
fundamentos !

SERVIDORES!

Diseo Web II !
fundamentos !

http://www.subsetter.com/

FONTFONT SUBSETTER

Diseo Web II !
fundamentos !

TIPOGRAFIA EN PANTALLAS*
LEGIBILIDAD EN PANTALLAS HINTING

CONTEXTO EL HINTING UN SOLUCIN A UN PROBLEMA DE TIPOGRAFA DIGITAL! la tipo en la pantalla

Pixelacin y Antialiaising
(1) Cleartype2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX

Oakland: Zuzanna Licko // Video render test Mac 128K 1985 (LO-RES - migre, 2001)

Oakland: Zuzanna Licko // Video render test Mac 128K 1985 (LO-RES - migre, 2001)

Matthew Carter

(1) Cleartype2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX

Verdana (1994)

Verdana (1994), Georgia (1993) Tahoma (1997) Trebuchet (1996)

Contorno Original de Fedra Sans (Peter BILAK), antes de la rasterisacin

Versin con hinting para su adaptacin a la rejilla de la pantalla a diferentes resoluciones

Cada letra tiene que ser rediseada, para optimizar la legibilidad en la pantalla

PARA QUE NECESITAMOS EL HINTING?

TEXTO a 8- 9 puntos en pantallas de baja resolucin (72-92 Dot Per Inch) o para impresiones de menos de 300 DPI.

HINTING ES IRRELEVANTE EN LA IMPRESIN COMERCIAL

Inicialmente el hint surge de la necesidad mejorar la legibilidad de las tipos de entre 9-14 pt en las pantallas. Pero es clave para diferenciar en estas: SERIF SANS REGULAR - BOLD

Diseo Web II !
fundamentos !

El texto como interfaz

Diseo Web II !
fundamentos !

El texto es la interfaz !!!

El 95 % del diseo WEB es Tipografa

Diseo Web II !
fundamentos !

http://www.subtraction.com/

Diseo Web II !
fundamentos !

RACIONALISMO Forma = Funcin Simplicidad Austeridad

google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious.

Adolf Loos
Loos, A. (1908). Ornament and Crime. Innsbruck.

Diseo Web II !
fundamentos !

Tipografa no es elegir las tipograas !!!

Cmo elegimos las tipografas?

Diseo Web II !
fundamentos !

Elegir las tipograas:

Conoce tus fuentes! Analiza las necesidades! Elige el set tipogrfico Jerarqua & Contraste

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Web safe fonts!

nativas
http://www.fonttester.com/

Diseo Web II !
fundamentos !

Solo un tipo!!!

Diseo Web II !
fundamentos !

No necesitamos ms de dos familias

Basta con una lo sucientemente verstil!!!

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

A que tamao?

Diseo Web II !
fundamentos !

Color tipogrco

Diseo Web II !
fundamentos !