Introducción a la tipografía para fronts
“Las opiniones, hechos e interpretaciones expresadas en esta publicación, que no han sido sometida a revisión editorial o de otro tipo, son de exclusiva responsabilidad de sus autoras y pueden no coincidir con las de Adalab.”
Sabemos que las front-end somos programadoras, y la estética de nuestras webs, en principio, nos vendrá dada por otra compañera que es diseñadora. Con estas premisas, seguramente pensemos que no necesitamos saber sobre color, tipografía, fotografía… porque ese no es nuestro campo. Pero, ¿no molaría tener al menos una base para entender el idioma de nuestras compis? O por ejemplo, cuando haga proyectos personales, ¿cómo elijo las fuentes?
En este artículo voy a hablar de algunos conceptos básicos sobre tipografía, para poder entender las diferencias que hay entre ellas. Una herramienta que estamos utilizando mucho en Adalab es Google Fonts, por lo que me centraré en sus opciones. Esta no es la única clasificación ni mucho menos, pero puede ser nuestro punto de partida.
Conceptos básicos
Estilos tipográficos, según San Google:
O lo que en su web veremos como categories.
- Serif vs. Sans serif
La palabra serif (en castellano serifa o remate) se refiere a unos trazos decorativos que tienen algunas fuentes. Se suele considerar el aspecto de las serif como más clásico. Sans significa “sin” (sans serif = sin remate).
Hay un tipo particular de fuentes serif: Son las llamadas Slab Serif (es muy común que esté la palabra Slab por alguna parte en el nombre). Estas son las que tienen un remate bastante gordito, como un ladrillo.
- Display
Son tipografías que se diseñaron más bien para titulares o frases cortas, por lo que pueden ser incómodas si se usan en textos largos.
- Handwriting
Tipografías que imitan la escritura manual. Un subconjunto de estas son las Script, en las cuales, los trazos de las letras suelen conectarlas entre sí. Imagina la típica invitación de boda. Ese estilo de letra se llama script.
- Monospace
Piensa en el espacio horizontal que ocupa una letra. Hay una diferencia importante entre M y una i, por ejemplo. Las fuentes Monospace tienen un diseño que hace que todas las letras ocupen lo mismo, sin importar que sean minúsculas, mayúsculas, puntos, comas… Las máquinas de escribir solían tener este estilo de letra.
Familias tipográficas
Conjunto de versiones o estilos de una fuente. A lo que solemos llamar tipografía, realmente es una familia, y cada una de sus versiones sería una fuente tipográfica. Ejemplo:
familia tipográfica: Helvética || fuente: Helvética bold.
En Google Fonts, lo llaman styles:
Consejos para elegir tipografías en tu proyecto:
- Para textos largos, la fuente debería ser “invisible”.
Frase robada de un antiguo profe, por cierto. Con esto quiero decir que lo importante es que ese texto sea cómodo de leer, y no tanto que la tipografía sea chulísima con un montón de decoración. La tipografía está al servicio del contenido.
- Cuanta menos mezcla, mejor.
Es súper común que nos pongamos a añadir fuentes como si no hubiera un mañana, porque hay un montón de cosas que queremos destacar. El problema es que visualmente se pelean entre ellas, y si todo es importante, nada lo es.
Escoger una o dos fuentes es suficiente y más aún si son familias amplias. Puedes utilizar sus diferentes versiones en vez de diferentes tipografías y así crear una armonía en el conjunto.
- Contraste
Utilizar dos fuentes ayuda a que el contenido no sea demasiado monótono. En este caso, es conveniente utilizar dos familias que sean bastante diferentes entre sí y jugar con sus estilos. Una sección muy útil en Google Fonts es Popular Pairings, que te permite ver cómo queda la fuente que has escogido con otras.
- La jerarquía es tu amiga.
Aclaro: SÓLO hablando de composición visual (me estaba dando un cortocircuito al escribirlo). Piensa en la jerarquía de los contenidos, y sé consistente con las familias o los estilos que utilices, así ayudarás a la usuaria a navegar y a saber el nivel de importancia de cada bloque. Aquí las familias serán muy útiles.
Resumen
En este artículo he querido resumir algunos conceptos básicos para poder entender y escoger mejor el estilo de letra para nuestros proyectos. Es una muy breve introducción, y no es una una biblia. Pero mola conocer las “leyes” por si luego quieres romperlas, no?
— — — — — — — — — — — — — — — — — — — — — — —
Imágenes utilizadas:
