Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

32
Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Transcript of Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Page 1: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Tipografía

Profa. Gloria J. Yukavetsky

Curso Diseño Gráfico Computadorizado

(COMU 2055)

Page 2: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Relaciones de tipos en un material impreso

• Concordante– Se usa una sola familia de un tipo– No hay mucha variedad en estilo, tamaño,

peso, etc.– Es bastante formal

Page 3: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Ejemplos de Concordancia

A A

Page 4: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

• Conflictivo– Se combinan tipos que son similares en

estilo, tamaño, peso, etc.– Causa molestia, porque el aspecto visual no

es igual (concordante pero son diferentes o de contraste)

A esto es Arial A esto es Century Gothic

Page 5: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Ejemplo de Conflictivo

Es otro tipo similarEs otro tipo similar

Page 6: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

• De contrastes– Se combinan diferentes tipos y elementos que

son claramente diferentes– Los diseños que causan mayor interés tienen

mucho contraste.

A AA

Page 7: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Ejemplo de Contraste

Page 8: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Los tipos

• Seis grupos básicos:– Oldstyle– Modern– Slab serif– Sans serif

–Script–Decorative

• Tres familias– Serifs– Sans Serifs– Decorative

Page 9: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Oldstyle

• Siempre tienen serifs:

Oldstyle• Tienen una

transisción de grueso

a fino: d• Son de fácil lectura

Page 10: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Modern

• Tienen serifs, pero son rectos.

• Son fríos, pero elegantes.

Page 11: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Slab serif

• No tienen mucha transición.

• A veces se le conoce como Clarendon y Egipcio.

• Son ideales para imprimir libros, especialmente de niños.

Page 12: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Sans serif

• La palabra sans en Francés significa ‘sin’.

• Casi no tienen transiciones.

Page 13: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Script

• Parece caligrafía.• Deben usarse poco.• Nunca deben usarse

todas en mayúsculas.

Page 14: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Decorative

• Su aspecto provoca un ambiente, estado de ánimo o reacción sicológica.

Page 15: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Quiz #1

Parea el tipo con el fragmento

Oldstyle Los días son lindos

Sans serif El fin

Script El tiempo

Decorative La Universidad

Page 16: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Quiz #2Identifica los tipos serifs y sans serifs (no-serifs)

PerroGatoPájaroLiebreRatónConejo

Page 17: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Contraste entre tipos

• El contraste entre tipos se utiliza para realzar la comunicación y atraer la atención.

• Los siguientes elementos crean contraste:– Tamaño

• No todo tiene que estar a 12 puntos • Se debe evitar escribir todo en máyúsculas• Se puede hacer un contraste marcado de tipos en

diferentes tamaños

Page 18: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Ejemplos de Tamaño

Page 19: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

– Peso• Se refiere al grosor

de los trazos: negrillas o “bold”, regular, y quizá semi-negrillas

• Se utiliza para atraer la atención

• Se utiliza para organizar la información

• Hace que una página sea más interesante visualmente

Page 20: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Otro ejemplo de Peso

Page 21: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

- Estructura– Se refiere a cómo está

construído el tipo

– Nunca se debe colocar dos tipos de una familia en una página, pero en ocasiones, se pueden colocar dos tipos de serifs, siempre y cuando sean diferentes:

times imprint

Page 22: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

- Forma– Se refiere a cómo está

formado o moldeado el tipo.

– Nunca se deben combinar dos tipos diferentes en itálicos.

– Los tipos en mayúsculas y minúsculas difieren en

forma: A a

Page 23: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

– Se debe tener cuidado al usar todos los tipos en mayúsculas, puesto que son dificiles de leer.

Page 24: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

• Otro ejemplo de contraste utilizando Forma es utilizar itálicos:

Sí, en efecto se fue a la playa.

Page 25: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

- Dirección– Se pueden colocar palabras en un ángulo.– Un ángulo hacia la derecha y hacia arriba tiene

la connotación de fuerza positiva.– Un ángulo hacia abajo tiene una connotación

de energía negativa.– Nunca se debe rellenar esquinas con palabras

en ángulo.

Hacia arriba

Hacia abajo

Page 26: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Otro ejemplo de texto con una dirección diferente

Page 27: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Otro ejemplo de Dirección

Page 28: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Otro ejemplo de Dirección

Page 29: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

• Color– Los colores cálidos sobresalen y llaman

nuestra atención: rojos y anaranjados– Los colores fríos parecen alejar: azules y

verdes

TextoTexto Texto

Texto•El texto que se escribe muy unido o separado tiene el efecto de crear un color, aún usando negro:

La leyenda de TutankamenLa leyenda de Tutankamen

Page 30: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Resumen de Contraste

Page 31: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Consejos útiles• La posibilidad de añadir contraste mediante el uso

de tipos es infinita. Por ejemplo, si se usan dos serifs, se deben enfatizar sus diferencias: mayúsculas, minúsculas, tamaño, peso y dirección, entre otros rasgos.

• Mira las revistas; allí encontrarás bastante contraste.• Trata de verbalizar lo que ves- si puedes describir lo

que está pasando, quiere decir que tienes poder sobre ello.

• Antes de encontrar una mejor solución, encuentra el problema: Enumera las similitudes y no las diferencias. Por ejemplo, ¿por qué dos tipos compiten entre sí?; ¿están todas en mayúsculas?; ¿tienen igual espesor?

Page 32: Tipografía Profa. Gloria J. Yukavetsky Curso Diseño Gráfico Computadorizado (COMU 2055)

Puntos y Picas

• Cuando se trabaja con tipos, las unidades de medidas utilizadas se conocen como punto y pica.

• Es preferible trabajar los tipos en puntos.• Hay 12 puntos en una pica.• Hay 6 picas en una piulgada.• Una página mide 66 picas.• El espacio entre líneas o párrafos se miden en puntos.• Picas se usa cuando queremos medir ellargo de una

línea o párrafo.• El monitor de una computadora se mide en puntos por

pulgada; 72 es el estándar.