Para utilizar la explicación más básica, la tipografía es el diseño y el uso de los tipos de letra como medio de comunicación. Muchas personas consideran que la tipografía comenzó con Gutenberg y el desarrollo de tipos móviles, pero la tipografía se remonta mucho más allá. Esta rama del diseño en realidad tiene sus raíces en formas de letras manuscritas.
La tipografía abarca todo, desde la caligrafía hasta el tipo digital que vemos hoy en las páginas web de todo tipo. El arte de la tipografía también incluye a los diseñadores tipográficos que crean nuevas formas de letras que luego se convierten en archivos de fuentes que otros diseños pueden usar en su trabajo, desde trabajos impresos hasta los sitios web mencionados anteriormente. Por muy diferentes que sean esos trabajos, los conceptos básicos de la tipografía los sustentan a todos.
Los elementos de la tipografía
Si alguna vez ha hablado con un diseñador web que usa tipografía en su trabajo, es probable que haya escuchado los términos "tipo de letra" y / o "fuente". Muchas personas usan estos dos términos indistintamente, pero en realidad hay algunas diferencias entre estos dos elementos.
Tipo de letra es el término que se le da a una familia de fuentes (como Helvetica Regular, Helvetica Italic, Helvetica Black y Helvetica Bold). Todas las diferentes versiones de Helvetica conforman el tipo de letra completo.
Fuente es el término usado cuando alguien se refiere a un solo peso o estilo dentro de esa familia (como Helvetica Bold). Muchos tipos de letra se componen de una serie de fuentes individuales, todas las cuales son similares y están relacionadas pero de alguna manera son diferentes. Es posible que algunas fuentes solo incluyan una sola fuente, mientras que otras pueden incluir numerosas variaciones de las formas de letra que forman las fuentes.
Si esto parece confuso, no se preocupe, si alguien no es un experto en tipografía, es probable que use el término "fuente" independientemente de cuál de ellos signifique realmente, e incluso muchos diseñadores profesionales usan estos dos términos de manera intercambiable. A menos que esté hablando con un diseñador tipográfico puro sobre la mecánica del oficio, probablemente esté bastante seguro usando cualquiera de estos dos términos que prefiera. Dicho esto, si entiende la distinción y puede usar correctamente los términos correctos, ¡eso nunca es algo malo!
Clasificaciones tipográficas
Algunas veces denominadas "familias de fuentes genéricas", estas son grandes agrupaciones de tipos de letra basadas 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 probablemente verá:
- Serif
- Sans-serif
- Guión
- Monoespaciado
- Cursivo
- Fantasía
También hay una serie de otras clasificaciones de fuentes que son derivaciones de estos. Por ejemplo, las fuentes "slab serif" son similares a las serifs, pero todas cuentan con un diseño reconocible con serifs gruesos y gruesos en las formas de 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.
Tipografía Anatomía
Cada tipo de letra está formado por diferentes elementos que lo distinguen de otros tipos de letra, lo que se conoce como anatomía del tipo de letra. A menos que vaya específicamente al diseño tipográfico y busque crear fuentes completamente nuevas, los diseñadores web generalmente solo 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".
Cap y x-height es la altura de las letras mayúsculas en el tipo de letra y la altura de la letra x. Le indica qué tan altas serán las letras más grandes, así como qué tan grandes serán las letras más minúsculas. Todas las fuentes tienen un tamaño basado en estas dos características.
Los descendientes y ascendentes son las porciones de letras que van por debajo y por encima de la línea de la altura x. Esto se refiere típicamente a letras minúsculas. Por ejemplo, la letra "b" tiene un ascendente (la pieza que sobresale "arriba" de la letra) mientras que la letra "p" tiene un ascendente (las partes que bajan "abajo" de la letra).
Espacio alrededor de las letras
Hay varios ajustes que se pueden hacer entre y alrededor de las letras que afectan a 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 suele ser bueno, ya que la forma predeterminada en que se muestran las fuentes suele ser preferible.
- Kerning: El espacio horizontal entre letras individuales.
- Rastreo: El espacio entre grupos de letras.
- Líder: Espacio vertical entre líneas de tipo (esto se conoce como altura de línea en términos de sitio web)
- Medida: 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 movieron tan juntas que sus anatomías se combinan, esencialmente fluyendo una letra a otra
Más elementos de tipografía
La tipografía es más que solo los tipos de letra que se utilizan y el espacio en blanco que los rodea. También hay algunas otras cosas que debe tener en cuenta al crear un buen sistema tipográfico para cualquier diseño:
"Guiones" 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 se vea mejor. Si bien se encuentra comúnmente en documentos impresos, la mayoría de los diseñadores web ignoran la separación de palabras y no la usan en su trabajo porque no es algo que se maneje bien de forma automática mediante los navegadores web.
"Trapo" Es el borde vertical desigual de un bloque de texto. Cuando preste atención a la tipografía, debe mirar los bloques de texto como un todo para asegurarse de que el trapo no afecte el diseño.Si el trapo es demasiado irregular o irregular, puede afectar la legibilidad del bloque de texto y distraerlo. Esto es algo que se maneja automáticamente por el navegador en términos de cómo ajusta 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 un huérfano. 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 sensible y diferentes pantallas 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 y al mismo tiempo aceptar 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 puede lograr la perfección para cada tamaño de pantalla y pantalla.
Pasos para verificar su tipografía
- Elija los tipos de letra con cuidado, observando la anatomía del tipo y la familia de tipos en la que se encuentra.
- Si crea el diseño con 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 hace el texto en la página? Asegúrese de que esas formas lleven todo el diseño de la página hacia adelante.
