José Adrián Gómez Montero

TIPOGRAFÍA

TipografíaDefiniciones importantes

Tipos: “molde”Graphos: “escribir o grabar”Ia (el sufijo): “cualidad o acción”

Es la técnica de crear caracteres para comunicar un mensaje. La tipografía imitaba en un inicio la caligrafía. Dado los adelantos técnicos en el tiempo, se fueron desarrollando caracteres más legibles y fáciles de entender

Tipografía, del griego:

Arial

HelvéticaAvenir

CenturyComic SansDIN

Fira Sans

Franklin Gothic

Frutiger

GabriolaHarrington

ImpactMonacoMuseo

Open Sans

Overlock

Quicksand

Roboto

Sanchez

Tahoma

Verdana

Igual a una letra o caracter determinado.Tipos:

Son un conjunto de tipos o caracteres con características comunes. Algunos ejemplos de fuentes tipográficas son:

Fuente tipográfica:

A B C D E F G H I J K L M N

1

Es un grupo de fuentes tipográficas unidas por características similares, pero que también poseen rasgos propios, en pesos, anchos y estructura o eje.

Variaciones de peso tipográficas más comunes

Variaciones de ancho en la tipografía

Variaciones de estructura dada por la inclinación del eje del tipo

Familia tipográfica:

Familia tipográfica

Pesos

Anchos

Estructura

Helvetica

Regular

Thin

Light

Medium

Bold

Black

-

+

Condensada

Extendida

Italic Regular

2

Las siguientes son las partes más comunes en la estructura de una letra o tipo

Estructura de la tipo

Descendente

Barratransversal

Cruz otravesaño Cola

Ascendente

Ojal

Oreja

Asta

Vértice Brazo

Serifa

3

Existen muchas tipografías las cuales son clasificadas en grandes grupos según sus características de forma, visibles en cada una de las partes de la tipo que se mostraron anteriormente.

La clasificación más común realizada da como resultado tres grandes grupos: las tipografías Serif, las Sans serif y las Manuscritas y de fantasía.

Clasificación tipográfica

4

Tienen su origen en el pasado, cuando la escritura se cincelaba en bloques de piedra y resultaba difícil que los bloques de las letras fueran rectos, por lo que el tallador desarrolló una técnica donde los extremos de las letras presentaban unos remates, conocidos como serifas. Otra de sus características principales es la variación en el grosor de sus trazos.

Serif

Algunos ejemplos de tipografías Serif son los siguientes:

Book Antiqua

Bookman Old Style

Century Schoolbook

Garamond

Georgia

Times New RomanCambria

Constantia Goudy Old Style

Perpetua

La mayoría son adecuadas para la lectura de textos largos, ya que la variabilidad en los trazos y los remates ayudan al ojo a crear y seguir la línea de texto, facilitando la lectura rápida y evitando la monotonía.

5

Algunos ejemplos de tipografías Sans serif son los siguientes:

Estas tipografías aparecen durante los años 1820 y 1830 en Inglaterra. A diferencia de las Serif, no poseen remates en sus extremos (sin serif), y entre sus trazos existe poco contraste, dado a un ajuste óptico de forma apenas perceptible.

Sans serif

Son apropiadas para su lectura en pantalla, resultando muy legibles a pequeños tamaños. Sin embargo no están recomendadas para textos largos, debido a que resulta monótonas y difíciles de seguir.

Helvetica

Franklin Gothic Open Sans

Roboto

Avenir

ImpactCentury Gothic

Calibri

Lucida Sans

Gill Sans

6

En este último grupo encontramos a aquellas tipografías que no pertenecen a ninguna clasificación exacta. Poseen trazos y estructuras diversas, por lo que la mayoría no asegura una buena legibilidad.

No se recomienda su uso en bloques de texto. Podría emplearse en algunas palabras solamente cuando la forma de la tipografía elegida aporte al concepto gráfico que desee representarse.

Algunos ejemplos de éstas tipografías son los siguientes:

Manuscritas, fantasíay experimentales

Además de que no son muy legibles pueden comunicar baja calidad y poco profesionalismo o seriedad.

7

Las tipos proporcionan información no solo textual, como la que comunican al formar palabras y oraciones, sino también emotiva y estética, ya que a través de sus formas pueden expresar sensaciones como formalidad, dinamismo o elegancia.

Lo anterior quiere decir, que aunque la función principal de la tipografía es comunicar, no debemos olvidar que ésta está impregnada de semántica visual, que cada letra es un símbolo capaz de transmitir metáforas visuales y no solo información textual.

Retórica tipográfica

8

La retórica tipográfica aprovecha el uso de distintas tipografías para transmitir un mensaje en concreto. En el ejemplo anterior, la palabra “Silencio” posee mucha más fuerza al ser empleada con la tipografía “Impact” en comparación con “Edwardian Script”.

En el primer recuadro, “Silencio” puede ser tomado como una petición amable, mientras que en el segundo caso como una orden.

Ejemplo 1

Silencio

Edwardian ScriptTipografía:

SILENCIO

ImpactTipografía:

9

En este ejemplo se muestra el logotipo de una firma de abogados con diferentes tipografías.

Por la actividad que realizan y la importancia para sus clientes sería importante que el logotipo comunique seguridad y formalidad, aspectos que en el primer recuadro no logra utilizando las tipografías “Comic Sans” y “Bauhaus”.

Lo anterior nos muestra la relevancia de escoger la tipografía correcta en cada caso, y como, el hecho de emplear la tipografía equivocada, puede ser fatídico para los intereses de una empresa, transmitiendo a sus clientes un mensaje erróneo de su calidad o seriedad.

BauhausTipografía:

CenturyTipografía:

Pérez & PérezAbogados

Pérez & PérezAbogados

Ejemplo 2

Pérez & PérezAbogados

Pérez & PérezAbogados

Comic SansTipografía:

BaskervilleTipografía:

10

En este caso, al igual que en el ejemplo anterior, la elección de la tipografía aporta gran parte del mensaje que queremos transmitir. Algunas tipografías como las ubicadas en el primer recuadro nos recuerdan alguna película del “Far West” o a un circo.

Mientras que las tipografías del segundo recuadro poseen trazos más simples y están más relacionadas con el contexto.

Carnivalee FreakshowTipografía:

Comic Sans MSTipografía:

Ejemplo 3

Cowboy MovieTipografía:

KG Primary ItalicsTipografía:

CHISPITASJARDIN INFANTIL

CHISPITASJARDIN INFANTIL

CHISPITASJARDÍN INFANTIL

JARDÍN INFANTILCHISPITAS

11

al trabajar con tipografíaConsejos importantes

12

Algunas tipografías fueron diseñadas originalmente para su reproducción impresa y no en pantalla. Como por ejemplo: Verdana, Open Sans o Roboto.

Otras como la Times New Roman para, con su formas, poder compensar la impresión deficiente de una máquina rotativa antigua.

¿Para qué medio se diseñó cada fuente?

Medios digitales Medios impresos

Times New Roman (1932)Verdana (1994)

Helvetica (1957)Georgia (1993)

Garamond (siglo XVI)Tahoma (1996)

Baskerville (1757)Arial (1982)

Didot (1783)Roboto (2011)

1

Al realizar el diseño de una composición o documento, es importante tener en cuenta que no necesitamos más de dos familias tipográficas en total, es la cantidad suficiente para realizar las variaciones necesarias en títulos y demás estilos de texto.

De hecho podría utilizarse una sola familia tipografía y jugar con sus variaciones de peso y estructura para aportar una diferenciación suficiente a cada estilo de texto dentro del documento o composición.

No más de dos familias tipográficas2

RobotoRoboto light

Roboto mediumRoboto bold

Times New RomanTimes New Roman italicTimes New Roman boldTimes New Roman bold italic

13

Al realizar la combinación de dos tipografías debe buscarse el contraste entre éstas, utilizar dos fuentes que se parezcan demasiado es una mala idea.

Combinando tipografías3

Fuente tipográ�ca

Fuente tipográfica

Fuente tipográfica

Fuente tipográ�ca

Garamond + Adobe Caslon Pro

Avenir + Futura

Museo + Gandhi Serif

Calibri + Adobe Caslon Pro

14

Al contrario de los medios impresos, la tipografía en web y en los recursos digitales debe adaptarse cada día a diversos monitores y dispositivos que van surgiendo.

En esta situación, al utilizar el texto justificado, el resultado de su visualización en cada dispositivo puede no ser el mismo, y aumenta la posibilidad de encontrar ajustes no deseados.

Además, se ha logrado identificar que el texto justificado dificulta la lectura para usuarios que padecen dislexia, ya que los espacios en blanco entre los textos justificados son un distractor importante.

Por lo anterior es que es recomendable utilizar la alineación del texto a la izquierda. Y en caso que se deba justificar, utilizar guiones y dividir palabras al final de cada línea.

El justificar el texto no nos asegura que el espacio entre cada palabra sea igual en cada una de las líneas del párrafo, tal como se muestra en el ejemplo anterior. Esta variación en el patrón entre líneas dificulta la lectura para el usuario.

El párrafo4

Vitae non curabitur purus pretium ac in, ea ligula tempus nibh ornare. Sem netus tempus at erat, rhoncus dolor duis eget id commodo, egestas id felis, diam nunc ut ullamcorper.

Vitae non curabitur purus pretium ac in, ea ligula tempus nibhascasasxsa ornare. Sem netus tempus at erat, rhoncus dolor duis eget id commodo, egestas id felis, diam nunc ut ullamcorper.

Alineación a la izquierda

Justificado

15

El número de caracteres que se incluyan dentro de una línea de texto es el responsable en gran medida de la legibilidad del texto. Si la línea es muy extensa puede ser intimidante y difícil de leer, mientras que si es muy corta puede a llegar a crear confusión en la idea que desea transmitirse.

Por lo anterior es que se tiene como norma utilizar alrededor de 7 palabras por línea o entre 60 y 80 caracteres.

En cuanto al interlineado o espacio entre líneas en un párrafo, se recomienda que sea de 1.5 o el conocido espacio doble.

A menos que sea un profesional, no debe deformar la tipografía cambiando su proporción, ya que las letras son entidades con personalidad propia que no podemos alterar de manera caprichosa.

El hacerlo podría influir en la legibilidad, además que se ve poco profesional.

Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal

No deforme la tipografía5

tipografía tipografía

16

Puede jugar con las fuentes que haya elegido, pero buscando que el diseño sea coherente con la idea que desea transmitir. La mayoría de las veces, las fuentes de fantasía transmiten poco profesionalismo o seriedad.

Evite las fuentes de fantasía6

IMPORTANTE

IMPORTANTE

IMPORTANTE

IMPORTANTE

IMPORTANTE

17

Aunque no existe un estándar de tamaños que deban utilizarse se recomienda:

Entre 10 y 12 puntos para el texto normal en medios impresos. En el caso de títulos, subtítulos y encabezados, no hay reglas fijas, pero se recomienda aplicar tamaños que sean del orden de un 20% superiores, por ejemplo:

Tamaño de la tipografía7

Para documentos digitales, por recomendaciones de accesibilidad se suele utilizar como tamaño mínimo 14 puntos.

Mientras que en páginas web, para el texto normal se recomienda 1 em (16 px). Para más información de tipografía para web puede consultar: http://typecast.com/blog/a-more-modern-scale-for-web-typography

normal 10 pt

subtítulos 12 pt

títulos 14.4 pt

Para medios impresos y textos extensos se recomienda el uso de tipografías de la familia Serif. En general estas tipografías son mucho más legibles que las sans-serif.

Puede utilizar:

Fuentes tipográficas para impresión8

CenturyTimes New RomanGeorgia

18

Se recomienda utilizar tipografías Sans-Serif como las siguientes:

Fuentes tipográficas para medios digitales9

Open Sans

Roboto

Helvetica

Verdana

Lucida SansMyriad

19