Вы находитесь на странице: 1из 157

Diseño Web II!

fundamentos!

TIPOGRAFIA & DISEÑO WEB

Diseño Web II ! fundamentos ! TIPOGRAFIA & DISEÑO WEB

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! El texto es la interfaz !!!
Diseño Web II ! fundamentos ! El texto es la interfaz !!!

El texto es la interfaz !!!

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! El 95 % del diseño WEB es Tipografía
Diseño Web II ! fundamentos ! El 95 % del diseño WEB es Tipografía

El 95 % del diseño WEB es Tipografía

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! El diseño de información es Tipografía ?

El diseño de información es

Tipografía ?

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Tipografía no es elegir las tipografias !!!

Tipografía no es elegir las tipografias !!!

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! ¿qué es la Tipografía ?

¿qué es la Tipografía ?

Diseño Web II!

fundamentos!

TIPOGRAFÍA

= LE TRA S = TEX TO

¿Qué significa tipografía?

El término tipografía remite tanto al lugar donde se imprime, esto es la imprenta, como al arte de imprimir.

link

La tipografía ha sido un sistema de composición e impresión que tal y como lo creó l

J

G

t

b

h

d

d

á

d

500

ñ

i

f i

bi

t

i

Diseño Web II!

fundamentos!

La tipografía se ocupa de estructurar y organizar el lenguaje visualmente

Phil Baines y Andrew Haslam (2002)

el lenguaje visualmente Phil Baines y Andrew Haslam (2002) La tipografía también remite al diseño y

La tipografía también remite al diseño y creación de aquellos caracteres mínimos (signos grá cos) con los que va a poder organizarse y estructurarse el mensaje visual.

un diseño para la ESCRITURA un diseño para la LECTURA.

Manual de Tipografía. Del plomo a la era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic

Diseño Web II!

fundamentos!

era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !

LEGIBILIDAD

Manual de Tipografía. Del plomo a la era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic

Diseño Web II!

fundamentos!

era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !
era digital José Luis Martín Montesinos y Montse Mas Hurtuna. Ed CampGraphic Diseño Web II !

EXPRESIVIDAD

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! MACRO T I POGRAFÍA & MI CRO T I POGRAFÍA

MACRO

T

I POGRAFÍA

& MI

& MI

CRO

T

I POGRAFÍA

Diseño Web II!

fundamentos!

Microtipografía & Macrotipografía

II ! fundamentos ! Microtipografía & Macrotipografía En el ámbito de la Microtipografía o tipografía del

En el ámbito de la Microtipografía o tipografía del Detalle, las unidades conceptuales o conceptos tipográficos esenciales son:

La Letra y el espacio entre las letras;

la Palabra y el espacio entre las

palabras;

tipográficos esenciales son: La Letra y el espacio entre las letras; la Palabra y el espacio

Diseño Web II!

fundamentos!

Microtipografía & Macrotipografía

II ! fundamentos ! Microtipografía & Macrotipografía e Longitud de la línea en el párrafo y

e

Longitud de la línea en el párrafo

y calculo del interlineado correcto

Palabra

en el párrafo y calculo del interlineado correcto Palabra Las correcciones aplicadas sobre la forma geométrica

Las correcciones aplicadas sobre la forma geométrica básica de las letras tiene como función compensar ilusiones ópticas que actúan sobre la forma y el tamaño de las letras y sobre el grosor de sus rasgos. En función de mantener una consistencia percibida de tamaño, por ejemplo, las letras de forma circular o triangular exceden en altura física a las demás 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 varía con su dirección: los verticales, que visualmente representan sostén, son más gruesos que los horizontales; los horizontales medios son más finos que los extremos ubicados en tope o base; los diagonales son también más

finos

que

los

horizontales

de

los

extremos.

Los

trazos

verticales

y

diagonales se afinan al llegar a convergencias en función de evitar la creación de grandes áreas negras mientras que los trazos curvos varían constantemente de grosor y nunca son arcos de círculo, en función de manejar las fuerzas visuales de una manera menos mecánica, más fluida. Muchas de estas características

aparecen ya en los alfabetos del siglo

XVIII.

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Today we are inundated with such an immense flood of

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 typographer’s 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)

such a way that the reader will have a good chance of finding what is of

Diseño Web II!

fundamentos!

El diseño de información es

Tipografía

Diseño Web II ! fundamentos ! El diseño de información es Tipografía Emil Ruder: Typopgraphy (1967)

Emil Ruder: Typopgraphy (1967)

Diseño Web II ! fundamentos ! El diseño de información es Tipografía Emil Ruder: Typopgraphy (1967)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! La Tipografía es el arte de disponer correctamente el material

La Tipografía es el arte de disponer correctamente el material de imprimir, de acuerdo con un propósito específico: colocar las letras, repartir el espacio y organizar los tipos con vistas a prestar al lector la máxima ayuda para la comprensión del texto.

Stanley Morinson (1929)

L E GI BI L DAD
L E GI BI L DAD

L

E GI

BI

L

DAD

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! TYPOGRAFÍA INVISIBLE ?

TYPOGRAFÍA INVISIBLE

?

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Toda recepción de escritura se realiza de dos modos simultáneos:

de escritura se realiza de dos modos simultáneos: 1º como lectura en el sentido propio de

como lectura en el sentido propio de la palabra, o sea como transformación de una serie de letras vistas por el lector en pensamientos

Jost Hochuli (1987)

como visión gráfica que desencadena una serie de asociaciones con lo ya visto, además de generar efectos emocionales y apreciaciones estéticas.

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Factor LINGÜÍSTICO vs Factor GRÁFICO Critter // Craig Frazier (1993
Factor LINGÜÍSTICO vs Factor GRÁFICO
Factor LINGÜÍSTICO
vs
Factor GRÁFICO

Critter // Craig Frazier (1993 / Adobe)

Una de las principales funciones de la tipografía es la de actuar como soporte para

Una de las principales funciones de la tipografía es la de actuar como soporte para la comunicación.

La legibilidad de un texto, de una palabra o de un carácter está relacionada en cierta manera con la “invisibilidad” de los signos gráficos que le dan presencia

Cómo leemos una línea de texto, como opera el proceso de lectura !!!

Cómo leemos una línea de texto, como opera el proceso de lectura!!!

Cómo leemos una línea de texto, como opera el proceso de lectura !!!
Arq L E GI BI L DAD uitect ura tipografía
Arq L E GI BI L DAD uitect ura tipografía

Arq

L

E GI

BI

L

DAD

uitect

ura tipografía

Elementos: Líneas de Referencia • ! Cuerpo de texto: La elección de una buena tipografía
Elementos: Líneas de Referencia • ! Cuerpo de texto: La elección de una buena tipografía

Elementos:

Líneas de Referencia ! Cuerpo de texto:

La elección de una buena tipografía garantiza la correcta legibilidad de un texto. Prima Funcionalidad
La elección de una buena
tipografía garantiza la correcta
legibilidad de un texto.
Prima Funcionalidad por encima
de la expresividad estética.
Son recomendables tipografías
de palo seco o romanas, nunca
manuscritas o decorativas.
tipometría
tipometría

tipometría

Mac: 1px = 1pt 1pt (postscript)= 1/72 pulgadas Los Monitores MAC tienen una resolución de
Mac: 1px = 1pt 1pt (postscript)= 1/72 pulgadas Los Monitores MAC tienen una resolución de
Mac: 1px = 1pt 1pt (postscript)= 1/72 pulgadas Los Monitores MAC tienen una resolución de

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

Los Monitores MAC tienen una resolución de 72 DPI (Dots per

Inch) // necesitamos PPM (pixel por EM)

tipometría

12 pt en pantalla de 72 DPI : 12 pixel por EM

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

#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
M

M

height:1em; border:1px solid black } #box2 { font-size:60px; width:1em; height:1em; border:1px solid black } M M
Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio

Elementos:

Líneas de Referencia y ojo medio

Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio

Elementos:

Líneas de Referencia y ojo medio

Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio

Elementos:

Líneas de Referencia y ojo medio

Elementos: Líneas de Referencia y ojo medio
Elementos: ESTRUCTURAS BÁSICAS Las variaciones en la estructura fundamental de los caracteres están determinadas: (1)
Elementos: ESTRUCTURAS BÁSICAS Las variaciones en la estructura fundamental de los caracteres están determinadas: (1)

Elementos:

ESTRUCTURAS BÁSICAS

Las variaciones en la estructura fundamental de los caracteres están determinadas:

(1) La ubicación respecto de las líneas de referencia

(2) La angulación del eje constructivo.

Elementos: ESTRUCTURAS BÁSICAS Á ngulo eje constructivo: Oblicua & Cursiva ¿Cual es la diferencia entre
Elementos: ESTRUCTURAS BÁSICAS Á ngulo eje constructivo: Oblicua & Cursiva ¿Cual es la diferencia entre

Elementos:

ESTRUCTURAS BÁSICAS Ángulo eje constructivo: Oblicua & Cursiva

BÁSICAS Á ngulo eje constructivo: Oblicua & Cursiva ¿Cual es la diferencia entre unos caracteres cursivos

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

Elementos: ESTRUCTURAS BÁSICAS Á ngulo eje constructivo: Oblicua & Cursiva ¿Cual es la diferencia entre
Elementos: ESTRUCTURAS BÁSICAS Á ngulo eje constructivo: Oblicua & Cursiva ¿Cual es la diferencia entre

Elementos:

ESTRUCTURAS BÁSICAS Ángulo eje constructivo: Oblicua & Cursiva

BÁSICAS Á ngulo eje constructivo: Oblicua & Cursiva ¿Cual es la diferencia entre unos caracteres cursivos

¿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

LA PALABRA

Las palabras escritas forman unidades de significado

LA PALABRA Las palabras escritas forman unidades de significado
LA PALABRA Las palabras escritas forman unidades de significado Otro aspecto importante de la configuración
LA PALABRA Las palabras escritas forman unidades de significado Otro aspecto importante de la configuración

LA PALABRA

Las palabras escritas forman unidades de significado

Otro aspecto importante de la configuración de la PALABRA es su ritmo interior:

El juego de blancos y la mancha tonal que se produce en la escritura.

configuración de la PALABRA es su ritmo interior: El juego de blancos y la mancha tonal
http://shape.method.ac/ http://type.method.ac/#
http://shape.method.ac/ http://type.method.ac/#

http://shape.method.ac/

http://type.method.ac/#

http://shape.method.ac/ http://type.method.ac/#
Toda composición tipográfica regida por el principio de legibilidad La función de toda composición tipográfica
Toda composición tipográfica regida por el principio de legibilidad La función de toda composición tipográfica

Toda composición tipográfica regida por el principio de legibilidad

La función de toda composición tipográfica es lograr

configurar una representación de la escritura clara y

equilibrada

Las variables tipográficas más importantes:

OJO MEDIO, LA MEDIDA DE LÍNEA, EL BLANCO ENTRE

PALABRAS & EL INTERLETRADO.

Existen 16 variables tipográficas de cuya interacción depende la legibilidad del texto

VARIABLES TIPOGRAFICAS Factores que influyen sobre las ordenes de composición 1) Tamaño de la página,
VARIABLES TIPOGRAFICAS Factores que influyen sobre las ordenes de composición 1) Tamaño de la página,

VARIABLES TIPOGRAFICAS

Factores que influyen sobre las ordenes de composición

1) Tamaño de la página, diseño, tema:

Existen otras consideraciones generales que pueden influir en la

Medida de línea, distancia de lectura, márgenes, distancia entre

elección tipográfica:

párrafos & números de estilos empleados

1.! La superficie del papel y su color

2) Tipo de letra:

Ojo medio; grosor del trazo; modulación & contraste

2.! Resolución de las Pantallas o dispositivos multimedia.

3) Parámetros de composición:

3.! Los hábitos de lectura del público

Blanco entre palabras; calidad de la partición de palabras; frecuencia

4.! La aplicación del contenido y la longitud media de las palabras

de partición;Interlinea; cuerpo, sangrías;caja

que lo componen

EL OJO MEDIO Se puede afirmar que se trata de la variable más determinante de
EL OJO MEDIO Se puede afirmar que se trata de la variable más determinante de

EL OJO MEDIO

Se puede afirmar que se trata de la variable más determinante de todas

La interlínea y el ojo medio están directamente relacionados.

1.! Si el ojo medio es escaso la interlínea se puede reducir o desaparecer. 2.! Reducir la interlínea con un carácter de ojo medio elevado no es muy recomendable 3.! Un carácter con escaso ojo medio en un cuerpo pequeño resultará “amenazante” en largos bloques de

LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma
LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma

LA LINEA

Una línea es un conjunto de palabras que se apoyan sobre la misma línea base.

1.! La longitud de la línea 2.! La distancia entre palabras

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

LA LINEA . La longitud de la línea El tipo de lectura o el contenido
LA LINEA . La longitud de la línea El tipo de lectura o el contenido

LA LINEA. La longitud de la línea

El tipo de lectura o el contenido ¿Afecta a la longitud óptima de una línea?

LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma
LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma

LA LINEA

Una línea es un conjunto de palabras que se apoyan sobre la misma línea base.

La longitud de la línea

La longitud adecuada de una línea depende de:

1.! El tipo de lectura que requiera el texto: consulta, periódico, novela, estudio 2.! El tamaño de la letra: a mayor tamaño, mayor longitud de línea 3.! El número ideal de caracteres según el ancho de línea.

¿CÓMO AFECTA EL TAMAÑO DE LA TIPOGRAFÍA UTILIZADA ADECUADO LONGITUD DE UNA LÍNEA?
¿CÓMO AFECTA EL TAMAÑO DE LA TIPOGRAFÍA UTILIZADA ADECUADO LONGITUD DE UNA LÍNEA?

¿CÓMO AFECTA EL TAMAÑO DE LA TIPOGRAFÍA UTILIZADA ADECUADO LONGITUD DE UNA LÍNEA?

¿CÓMO AFECTA EL TAMAÑO DE LA TIPOGRAFÍA UTILIZADA ADECUADO LONGITUD DE UNA LÍNEA?
Las líneas de entre 20 y 25 picas, resultan más apropiadas para libros, el número
Las líneas de entre 20 y 25 picas, resultan más apropiadas para libros, el número

Las líneas de entre 20 y 25 picas, resultan más apropiadas para libros, el número de caracteres que se considera óptimo en cada línea oscila entre 40 y 75 caracteres (65!!)

Una columna estrecha, entre 8 y 10 picas de ancho, ha de tener alrededor de 30-35

Como regla general se considera que una línea de doce o trece palabras resulta óptima para lograr una lectura fluida y cómoda.

80 carácteres

Web Content Accessibility Guidelines (WCAG) 2.0

LA LINEA: blanco entre palabras
LA LINEA: blanco entre palabras

LA LINEA:

blanco entre palabras

LA LINEA: blanco entre palabras
LA LINEA: blanco entre palabras NORMA GENERAL: El espaciado entre palabras debe guardar relación con
LA LINEA: blanco entre palabras NORMA GENERAL: El espaciado entre palabras debe guardar relación con

LA LINEA:

blanco entre palabras

NORMA GENERAL:

El espaciado entre palabras debe guardar relación con los demás blancos del bloque de texto.

La tradición recomienda que el

espaciado correcto entre las palabras será de 1/3 de cuadratín.

(2/3 del ancho de una “O”; el ancho del carácter “t”)

LA LINEA: blanco entre palabras 1. ! Cuanto mayor sea la longitud se recomienda un
LA LINEA: blanco entre palabras 1. ! Cuanto mayor sea la longitud se recomienda un

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 diseño

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 relación con los demás blancos del bloque de texto.

"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible.
"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible.

"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán 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 dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".

Jan Tschichold (1948)

LA LINEA: LA LINEA: blanco entre palabras blanco entre palabras
LA LINEA: LA LINEA: blanco entre palabras blanco entre palabras
LA LINEA: LA LINEA:
LA LINEA:
LA LINEA:
blanco entre palabras blanco entre palabras
blanco entre palabras
blanco entre palabras
Tamaño de los caracteres de la masa de texto 1. ! Norma: 9 puntos (la
Tamaño de los caracteres de la masa de texto 1. ! Norma: 9 puntos (la

Tamaño 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)

1. ! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)
Tamaño de los caracteres de la masa texto 1. ! Norma: 9 puntos (la distancia
Tamaño de los caracteres de la masa texto 1. ! Norma: 9 puntos (la distancia

Tamaño 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 pequeños:

1.! Los caracteres tienen un gran ojo medio. 2.! La medida de línea es estrechada la división de palabras frecuente no es deseable 3.! El texto es material de consulta, catálogos, 4.! Es importante conservar el espacio 5.! Se requiere una página más densa

Tamaño de los caracteres de la masa texto 1. ! Norma: 9 puntos (la distancia
Tamaño de los caracteres de la masa texto 1. ! Norma: 9 puntos (la distancia

Tamaño 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 niños 2.! Las condiciones de lectura son deficientes 3.! Tipos condensado, negras o supernegras 4.! El carácter tiene mucho contraste 5.! El tamaño de página es mayor, necesita más distancia

LA LINEA: blanco entre palabras Se reduce el blanco entre palabras: 1. ! Fuentes condensadas
LA LINEA: blanco entre palabras Se reduce el blanco entre palabras: 1. ! Fuentes condensadas

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 mayúsculas.

* Factores que determinan el interlineado INTERLINEA: blanco entre Lineas Se denomina interlineado a la
* Factores que determinan el interlineado INTERLINEA: blanco entre Lineas Se denomina interlineado a la

*Factores que determinan el interlineado

INTERLINEA:

blanco entre Lineas

Se denomina interlineado a la zona no impresa

entre dos líneas seguidas de texto impreso.

El ojo medio del tipo El ojo medio y la interlínea están estrechamente relacionados entre sí, ya que si el ojo medio es pequeño, la interlínea se debe reducir y en algunos casos desaparecer (VICEVERSA)

La medida de la línea En las líneas que exceden de una longitud considerada adecuada (10 a 12 palabras) es preciso aumentar el espacio entre ellas. (Compensar el riesgo de que las líneas se "doble”)

Se usa menos interlineado cuando:

El tamaño del tipo

Al mismo tiempo que se incremente el tamaño del tipo utilizado es

El trazo es fino, el ojo medio escaso, longitud de línea es corta, se

razonable incrementar el interlineado proporcionalmente. (120%)

compone en versalitas o se leen pocas líneas a la vez.

INTERLINEADO NEADO
INTERLINEADO NEADO
INTERLINEADO NEADO
INTERLINEADO NEADO

INTERLINEADONEADO

INTERLINEADO NEADO
LA LINEA: LA LINEA: blanco entre palabras blanco entre palabras
LA LINEA: LA LINEA: blanco entre palabras blanco entre palabras
LA LINEA: LA LINEA: blanco entre palabras blanco entre palabras
LA LINEA:
LA LINEA:
blanco entre palabras
blanco entre palabras
INTERLINEADO
INTERLINEADO

INTERLINEADO

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

INTERLINEADOLINEADO

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

INTERLINEADO RLINEADO
INTERLINEADO RLINEADO

INTERLINEADORLINEADO

INTERLINEADO RLINEADO

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Text (Css Box Model)

Text (Css Box Model)

Diseño Web II ! fundamentos ! Text (Css Box Model)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Text (Css Box Model)

Text (Css Box Model)

Diseño Web II ! fundamentos ! Text (Css Box Model)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Text (Css Box Model)

Text (Css Box Model)

Diseño Web II ! fundamentos ! Text (Css Box Model)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Text (Css Box Model)

Text (Css Box Model)

Diseño Web II ! fundamentos ! Text (Css Box Model)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Text (Css Box Model)

Text (Css Box Model)

Diseño Web II ! fundamentos ! Text (Css Box Model)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Text (Css Box Model)

Text (Css Box Model)

Diseño Web II ! fundamentos ! Text (Css Box Model)
Diseño Web II ! fundamentos ! Text (Css Box Model)
INTERLINEADO
INTERLINEADO

INTERLINEADO

COMPOSICIÓN DE BLOQUES DE TEXTO Los bloques de texto pueden estar compuestos de diferentes maneras.
COMPOSICIÓN DE BLOQUES DE TEXTO Los bloques de texto pueden estar compuestos de diferentes maneras.

COMPOSICIÓN DE BLOQUES DE TEXTO

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

A) COMPOSICIÓN JUSTIFICADA B) COMPOSICIÓN NO JUSTIFICADA

1.! Composición centrada 2.! Composición en bandera por la izquierda 3.! Composición en bandera por la derecha

COMPOSICIÓN JUSTIFICADA 1. ! PARTICIÓN DE PALABRAS 2. ! TRACKING 3. ! KERNING
COMPOSICIÓN JUSTIFICADA 1. ! PARTICIÓN DE PALABRAS 2. ! TRACKING 3. ! KERNING

COMPOSICIÓN JUSTIFICADA

1.! PARTICIÓN DE PALABRAS 2.! TRACKING 3.! KERNING

1.! PARTICIÓN DE PALABRAS

Parámetros de Justificación

2.! TRACKING 3.! KERNING
2.!
TRACKING
3.!
KERNING

1.! PARTICIÓN DE PALABRAS

2.!

3.!

Parámetros de Justificación

TRACKING KERNING
TRACKING
KERNING

1.! PARTICIÓN DE PALABRAS

2.!

3.!

Parámetros de Justificación

TRACKING KERNING
TRACKING
KERNING

PARTICIÓN DE PALABRAS

TRACKING

KERNING

2.!

3.!

1.!

PARTICIÓN DE PALABRAS TRACKING KERNING 2. ! 3. ! 1. ! Parámetros de Justificación

Parámetros de Justificación

PARTICIÓN DE PALABRAS TRACKING KERNING 2. ! 3. ! 1. ! Parámetros de Justificación

PARTICIÓN DE PALABRAS

TRACKING

2.!

3.!

1.!

Parámetros de Justificación

Adobe Garamond 12pt 16pt 18pt KERNING
Adobe Garamond
12pt
16pt
18pt
KERNING

PARTICIÓN DE PALABRAS

TRACKING

2.!

1.!

Parámetros de Justificación

3.! KERNING
3.!
KERNING
COMPOSICIÓN NO JUSTIFICADA 1. ! Composición centrada 2. ! Composición en bandera por la izquierda
COMPOSICIÓN NO JUSTIFICADA 1. ! Composición centrada 2. ! Composición en bandera por la izquierda

COMPOSICIÓN NO JUSTIFICADA

1.! Composición centrada 2.! Composición en bandera por la izquierda 3.! Composición en bandera por la derecha

"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán 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 dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".

"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán 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 dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".

"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán 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 dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".

Alessandro di Vecci 1600
Alessandro di Vecci 1600

Alessandro di Vecci 1600

Alessandro di Vecci 1600
Alessandro di Vecci 1600
JAN TSCHICHOLD
JAN TSCHICHOLD

JAN TSCHICHOLD

JAN TSCHICHOLD
COMPOSICIÓN CENTRADA Recomendaciones básicas 1. ! En la composición centrada es conveniente no construir una
COMPOSICIÓN CENTRADA Recomendaciones básicas 1. ! En la composición centrada es conveniente no construir una

COMPOSICIÓN CENTRADA

Recomendaciones básicas 1.! En la composición 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 línea, se recomienda, que la primera líneas sea mayor que la segunda (aunque no menos del doble).

3.! Pero en general es fácil lograr un composición centrada variada y ópticamente equilibrada.

"La igualdad de la longitud de la línea no puede ser obtenida sin el sacri
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacri
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacri
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacri

"La igualdad de la longitud de la línea no puede ser obtenida sin el sacricio del espaciado regular y, tipográcamente hablando, éste es más importante que aquélla. El espaciado regular es una gran ayuda para la lectura; el lector no se ve molestado por las interrupciones y ralentización que conlleva un espaciado irregular del texto aunque este esté reducido al mínimo por una cuidadosa composición."

Eric Gill Essay on Typography de 1936

texto aunque este esté reducido al mínimo por una cuidadosa composición." Eric Gill Essay on Typography
Recomendaciones básicas para la composición en bandera: 1.-Espacios iguales entre palabras. 2.-Espacios iguales entre
Recomendaciones básicas para la composición en bandera: 1.-Espacios iguales entre palabras. 2.-Espacios iguales entre

Recomendaciones básicas para la composición en bandera:

1.-Espacios iguales entre palabras. 2.-Espacios iguales entre letras. 3.-No utilizar partición (sólo excepcionalmente). 4.-No se recomienda utilizar sangría de primera línea. 5.-Cuidado con la utilización de ciertas capitulares. 6.-No deben aparecer líneas demasiado similares. 7.-No debe haber líneas cada vez más cortas. 8.-No se deben repetir pares de líneas de igual medida. 9.-No deben quedar palabras sueltas aunque lleven punto seguido.

"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio

"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.

obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio

"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.

"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.

¿ ! ? …

¿!?

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! 4 4 TIPOS DIGITALES *
Diseño Web II ! fundamentos ! 4 4 TIPOS DIGITALES *
Diseño Web II ! fundamentos ! 4 4 TIPOS DIGITALES *

44

TIPOS DIGITALES *

Porta-matrices Times New Roman
Porta-matrices Times New Roman
Porta-matrices Times New Roman

Porta-matrices Times New Roman

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Letra: código digital En la tipografía digital el tipo carece
Diseño Web II ! fundamentos ! Letra: código digital En la tipografía digital el tipo carece

Letra: código digital

En la tipografía digital el tipo carece de una existencia física.

El tipo es un conjunto de datos almacenados en la memoria de un ordenador

el tipo carece de una existencia física. El tipo es un conjunto de datos almacenados en

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Los tipografías digitales son software Los formatos de fuentes dominantes
Diseño Web II ! fundamentos ! Los tipografías digitales son software Los formatos de fuentes dominantes

Los tipografías 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 tamaño sin perdida de calidad

Diseño Web II!

fundamentos!

Post Script Type 1 (P S1)

Diseño Web II ! fundamentos ! Post Script Type 1 (P S1)
Diseño Web II ! fundamentos ! Post Script Type 1 (P S1)
Diseño Web II ! fundamentos ! Post Script Type 1 (P S1)
Diseño Web II ! fundamentos ! Post Script Type 1 (P S1)

Diseño Web II!

fundamentos!

Post Script Type 1 (P S1)

PS1 en WIN Helvetica.afm & Helvetica.pfb

Type 1 (P S1) PS1 en WIN Helvetica.afm & Helvetica.pfb El formato TrueType solo necesita un
Type 1 (P S1) PS1 en WIN Helvetica.afm & Helvetica.pfb El formato TrueType solo necesita un
Type 1 (P S1) PS1 en WIN Helvetica.afm & Helvetica.pfb El formato TrueType solo necesita un
Type 1 (P S1) PS1 en WIN Helvetica.afm & Helvetica.pfb El formato TrueType solo necesita un
El formato TrueType solo necesita un archivo en ambas plataformas
El formato TrueType solo
necesita un archivo en
ambas plataformas

PS1 en mac

Helvetica.afm

Helvetica.ifm

Helvetica.bmp

Representación pixelada para su representación en pantalla

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! RASTERIZAR: Es el proceso de convertir los vectores (las líneas
Diseño Web II ! fundamentos ! RASTERIZAR: Es el proceso de convertir los vectores (las líneas

RASTERIZAR:

Es el proceso de convertir los vectores (las líneas y curvas) en el patrón de puntos de semitono del dispositivo de salida (impresora o filmadora)

Software de rasterización

y curvas) en el patrón de puntos de semitono del dispositivo de salida (impresora o filmadora)

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! HINTING: El «HINTING» es un conjunto de instrucciones que se
Diseño Web II ! fundamentos ! HINTING: El «HINTING» es un conjunto de instrucciones que se

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 más complejas

baja calidad (por ejemplo para la pantalla de ordenador). TrueType dispone de unas instrucciones de hinting

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE
Diseño Web II ! fundamentos ! Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE
Diseño Web II ! fundamentos ! Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE

Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE 3.1, el cual está:

“diseñado para soportar el intercambio, la elaboración y la exhibición de textos escritos en todas las lenguas del mundo”.

para soportar el intercambio, la elaboración y la exhibición de textos escritos en todas las lenguas

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE
Diseño Web II ! fundamentos ! Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE
Diseño Web II ! fundamentos ! Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE

Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE 3.1, el cual está:

“diseñado para soportar el intercambio, la elaboración y la exhibición de textos escritos en todas las lenguas del mundo”.

para soportar el intercambio, la elaboración y la exhibición de textos escritos en todas las lenguas

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Una fuente opentype se compone de 4 partes: 1. !
Diseño Web II ! fundamentos ! Una fuente opentype se compone de 4 partes: 1. !
Diseño Web II ! fundamentos ! Una fuente opentype se compone de 4 partes: 1. !

Una fuente opentype se compone de 4 partes:

1.! La descripción de contorno 2.! Instrucciones de Hinting 3.! Tabla para la clasificación de caracteres/signo 4.! Posibilidades tipográficas de sustitución letras y Glifos

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos ! WEB FONTS !!!
Diseño Web II ! fundamentos ! WEB FONTS !!!
Diseño Web II ! fundamentos ! WEB FONTS !!!

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! WEB FONTS !!!
Diseño Web II ! fundamentos ! WEB FONTS !!!

WEB FONTS !!!

Diseño Web II ! fundamentos ! WEB FONTS !!!
Diseño Web II ! fundamentos ! WEB FONTS !!!

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! SERVIDORES !
Diseño Web II ! fundamentos ! SERVIDORES !

SERVIDORES!

Diseño Web II ! fundamentos ! SERVIDORES !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! FONTFONT SUBSETTER http://www.subsetter.com/
Diseño Web II ! fundamentos ! FONTFONT SUBSETTER http://www.subsetter.com/

FONTFONT SUBSETTER

http://www.subsetter.com/

Diseño Web II ! fundamentos ! FONTFONT SUBSETTER http://www.subsetter.com/

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! TIPOGRAFIA EN PANTALLAS* LEGIBILIDAD EN PANTALLAS HINTING

TIPOGRAFIA EN PANTALLAS*

LEGIBILIDAD EN PANTALLAS HINTING

CONTEXTO EL HINTING UN SOLUCIÓN A UN PROBLEMA DE TIPOGRAFÍA DIGITAL ! la tipo en
CONTEXTO EL HINTING UN SOLUCIÓN A UN PROBLEMA DE TIPOGRAFÍA DIGITAL ! la tipo en

CONTEXTO

EL HINTING UN SOLUCIÓN A UN PROBLEMA DE TIPOGRAFÍA DIGITAL!

la tipo en la pantalla

Pixelación y Antialiaising (1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ
Pixelación y Antialiaising (1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ
Pixelación y Antialiaising (1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ
Pixelación y Antialiaising (1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ

Pixelación y Antialiaising

(1) Cleartype–2 / WINDOWS 98

(2) CORE FONT FOR WEB

(3) QUARTZ TECH; MAC-OSX

Pixelación y Antialiaising (1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH;
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)
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)

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
Matthew Carter

Matthew Carter

Matthew Carter

(1) Cleartype–2 / WINDOWS 98

(1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX Verdana (1994)
(1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX Verdana (1994)

(2) CORE FONT FOR WEB

(3) QUARTZ TECH; MAC-OSX

(1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX Verdana (1994)

Verdana (1994)

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

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

Contorno Original de “Fedra Sans” (Peter BILAK), antes de la rasterisación Versión con hinting para
Contorno Original de “Fedra Sans” (Peter BILAK), antes de la rasterisación Versión con hinting para
Contorno Original de “Fedra Sans” (Peter BILAK), antes de la rasterisación
Contorno Original de “Fedra Sans” (Peter BILAK),
antes de la rasterisación
“Fedra Sans” (Peter BILAK), antes de la rasterisación Versión con hinting para su adaptación a la

Versión con hinting para su adaptación a la rejilla de la pantalla a diferentes resoluciones

Cada letra tiene que ser rediseñada, para optimizar la legibilidad en la pantalla

Cada letra tiene que ser rediseñada, para optimizar la legibilidad en la pantalla

Cada letra tiene que ser rediseñada, para optimizar la legibilidad en la pantalla
Cada letra tiene que ser rediseñada, para optimizar la legibilidad en la pantalla
¿PARA QUE NECESITAMOS EL HINTING? TEXTO a 8- 9 puntos en pantallas de baja resolución
¿PARA QUE NECESITAMOS EL HINTING? TEXTO a 8- 9 puntos en pantallas de baja resolución

¿PARA QUE NECESITAMOS EL HINTING?

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

HINTING ES IRRELEVANTE EN LA IMPRESIÓN 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

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! E l texto como inter faz

E

l texto como inter

faz

Diseño Web II!

fundamentos!

El texto es la interfaz !!!

El 95 % del diseño WEB es Tipografía

Diseño Web II ! fundamentos ! El texto es la interfaz !!! El 95 % del

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! http://www.subtraction.com/

http://www.subtraction.com/

Diseño Web II ! fundamentos ! http://www.subtraction.com/

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! RACIONALISMO Forma = Función Simplicidad Austeridad google, ebay, craigslist, youtube,

RACIONALISMO Forma = Función Simplicidad Austeridad

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

Adolf Loos

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

ebay, craigslist, youtube, flickr, Digg, reddit, delicious. Adolf Loos Loos, A. (1908). Ornament and Crime .

Diseño Web II!

fundamentos!

Tipografía no es elegir las tipografias !!!

¿Cómo elegimos las tipografías?

Diseño Web II ! fundamentos ! Tipografía no es elegir las tipografias !!! ¿Cómo elegimos las

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Elegir las tipografias: Conoce tus fuentes ! Analiza las necesidades

Elegir las tipografias:

Conoce tus fuentes! Analiza las necesidades! Elige el set tipográfico Jerarquía & Contraste

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Web safe fonts! nativas http://www.fonttester.com/
Diseño Web II ! fundamentos ! Web safe fonts! nativas http://www.fonttester.com/

Web safe fonts!

nativas

http://www.fonttester.com/

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos ! Solo un tipo!!!

Solo un tipo!!!

Diseño Web II ! fundamentos ! Solo un tipo!!!

Diseño Web II!

fundamentos!

No necesitamos más de dos familias…

Diseño Web II ! fundamentos ! No necesitamos más de dos familias… Basta con una lo

Basta con una lo suficientemente versátil!!!

Diseño Web II ! fundamentos ! No necesitamos más de dos familias… Basta con una lo

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !

Diseño Web II!

fundamentos!

A que tamaño?

Diseño Web II ! fundamentos ! A que tamaño?

Diseño Web II!

fundamentos!

Color tipográfico

Diseño Web II ! fundamentos ! Color tipográfico
Diseño Web II ! fundamentos ! Color tipográfico

Diseño Web II!

fundamentos!

Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !
Diseño Web II ! fundamentos !