Para utilizar la explicación más básica, la tipografía es el diseño y uso de tipos de letra como medio de comunicación. Mucha gente considera que la tipografía ha comenzado con Gutenberg y el desarrollo del tipo móvil, pero la tipografía es mucho más antigua. Esta rama del diseño tiene sus raíces en las formas manuscritas.
La tipografía abarca desde la caligrafía hasta el tipo digital que vemos hoy en día en páginas web de todo tipo. El arte de la tipografía también incluye diseñadores tipográficos que crean nuevas formas de letras que luego se convierten en archivos de fuentes que otros diseños pueden utilizar en sus trabajos, desde trabajos impresos hasta los sitios web antes mencionados. Por muy diferentes que sean esas obras, las bases de la tipografía las sustentan todas.
Índice de contenidos
Los Elementos de la Tipografía
Si alguna vez has hablado con un diseñador web que utiliza la tipografía en su trabajo, es probable que hayas escuchado los términos «tipo de letra» y/o «fuente». Mucha gente usa estos dos términos indistintamente, pero en realidad hay algunas diferencias entre estos dos términos.
Tipo de letra es el término dado a una familia de fuentes (como Helvetica Regular, Helvetica Italic, Helvetica Black y Helvetica Bold). Todas las versiones de la Helvética constituyen el tipo de letra completo.
Fuente es el término utilizado cuando alguien se refiere a un solo peso o estilo dentro de esa familia (como Helvetica Bold). Muchos tipos de letra se componen de un número de fuentes individuales, todas ellas similares y relacionadas, pero diferentes de alguna manera. Algunos tipos de letra pueden incluir una sola fuente, mientras que otros pueden incluir numerosas variaciones de las formas de letra que componen las fuentes.
Si esto parece confuso, no se preocupe, si alguien no es un experto en tipografía probablemente usará el término «fuente» sin importar a cuál de estos términos se refiere realmente, e incluso muchos diseñadores profesionales usan estos dos términos indistintamente. A menos que esté hablando con un diseñador tipográfico puro sobre la mecánica de la embarcación, probablemente esté bastante seguro usando cualquiera de estos dos términos que prefiera. Dicho esto, si usted entiende la distinción y puede usar correctamente los términos correctos, ¡eso nunca es algo malo!
Clasificaciones tipográficas
A veces llamadas «familias de fuentes genéricas», se trata de grandes grupos de tipos de letra basados en una serie de clasificaciones genéricas a las que pertenecen diferentes fuentes. En las páginas web, hay seis tipos de clasificaciones de fuentes que es probable que vea:
- Serif
- Sans-serif
- Script
- Monoespaciado
- Cursiva
- Fantasía
También hay una serie de otras clasificaciones de fuentes que se derivan de éstas. Por ejemplo, las fuentes «slab serif» son similares a las serifas, pero todas tienen un diseño reconocible con gruesas y gruesas gracias en las formas de las letras. Serif y sans-serif son las dos clasificaciones de fuentes más comunes que se utilizan en la mayoría de los sitios web.
Anatomía tipográfica
Cada tipo de letra está compuesto por diferentes elementos que lo distinguen de otros tipos de letra, lo que se conoce como anatomía tipográfica. A menos que vaya a dedicarse específicamente al diseño tipográfico y busque crear fuentes totalmente nuevas, los diseñadores web generalmente sólo necesitan conocer los conceptos básicos de la terminología tipográfica.
En un nivel básico, los elementos de la anatomía tipográfica que debe tener en cuenta son «cap» y «x-height», y «descenders» y «ascenders».
Mayúscula y altura x es la altura de las letras mayúsculas en el tipo de letra y la altura de la letra x. Te dice cuán altas serán las letras más grandes, así como cuán grandes serán las letras más minúsculas. Todas las fuentes tienen un tamaño basado en estas dos características.
Los descendentes y ascendentes son las porciones de las letras que van por debajo y por encima de la línea de la altura x. Esto se refiere típicamente a las letras minúsculas. Por ejemplo, la letra «b» tiene un ascendente (la pieza que se pega «arriba» de la letra) mientras que la letra «p» tiene un descendente (las partes que se hunden «abajo» de la letra).
Espaciado alrededor de las letras
Hay varios ajustes que se pueden hacer entre y alrededor de las letras que afectan la tipografía. Las fuentes digitales se crean con muchas de estas características en su lugar, y en los sitios web, tenemos una capacidad limitada para cambiar estos aspectos de la fuente. Esto es a menudo algo bueno, ya que la forma predeterminada en que se muestran las fuentes suele ser preferible.
- Kerning : El espacio horizontal entre letras individuales
- Seguimiento : El espacio entre grupos de letras
- Leading : Espacio vertical entre líneas de tipo (esto se conoce como line-height en términos de sitio web)
- Measure : La longitud de las líneas de texto
- Alineación : Colocar visualmente el texto a la izquierda, derecha, centrado o justificado
- Ligaduras : Las letras se mueven tan juntas que sus anatomías están combinadas, esencialmente fluyendo de una letra a otra
Más elementos de tipografía
La tipografía es algo más que los tipos de letra que se utilizan y el espacio en blanco que los rodea. También hay otras cosas que debe tener en cuenta al crear un buen sistema tipográfico para cualquier diseño:
La «separación silábica» es la adición de un guión (-) al final de las líneas para ayudar a prevenir problemas de legibilidad o hacer que la justificación parezca mejor. Aunque se encuentran comúnmente en los documentos impresos, la mayoría de los diseñadores web ignoran la separación silábica y no la utilizan en su trabajo porque no es algo que los navegadores web manejan bien de forma automática.
«Trapo» es el borde vertical irregular de un bloque de texto. Cuando preste atención a la tipografía, debe mirar sus bloques de texto como un todo para asegurarse de que el trapo no está afectando el diseño. Si el trapo es demasiado irregular o irregular, puede afectar a la legibilidad del bloque de texto y distraerlo. Esto es algo que es manejado automáticamente por el navegador en términos de cómo envuelve el tipo de línea a línea.
Una sola palabra al final de una columna es una viuda y si está en la parte superior de una nueva columna es una huérfana. Las «viudas» y los «huérfanos» se ven mal y pueden ser difíciles de leer.
Conseguir que sus líneas de texto se muestren perfectamente en un navegador web es una propuesta agotadora, especialmente cuando tiene un sitio web con capacidad de respuesta y diferentes despliegues para diferentes tamaños de pantalla. Su objetivo debe ser revisar el sitio en diferentes tamaños para tratar de crear el mejor aspecto posible, aceptando al mismo tiempo que, en ciertos casos, su contenido tendrá ventanas, huérfanos u otras pantallas menos que ideales. Su objetivo debe ser minimizar estos aspectos del diseño de un tipo, al mismo tiempo que es realista en el hecho de que no se puede lograr la perfección para cada tamaño de pantalla y visualización.
Pasos para revisar su tipografía
- Elija los tipos de letra cuidadosamente, observando la anatomía del tipo así como la familia de tipos en la que se encuentra.
- Si construye el diseño usando texto de marcador de posición, no apruebe el diseño final hasta que haya visto el texto real en el diseño.
- Preste atención a los pequeños detalles de la tipografía, como guiones y guiones.
- Mire cada bloque de texto como si no tuviera palabras. ¿Qué formas tiene el texto en la página? Asegúrese de que esas formas lleven el diseño completo de la página hacia adelante.
