1. Tamaño de letra base
Empieza por establecer un tamaño de fuente base → Este suele ser el tamaño más utilizado para el cuerpo del texto, entre 16px y 20px (según la fuente y el proyecto). En los productos digitales, puede bajar a 14px.
2. Escala tipográfica
Elige la escala que mejor encaja con tu proyecto:
- Opción A: utilizaremos los múltiplos de 2px, empezando en 8px.Por ejemplo: 8px / 10px / 12px / 14px / 16px / 20px / 24px / 32px / 44px / 56px / 72px /... Aquí os dejamos una referencia, que puede ser un buen punto de partida: Tailwind CSS.
- Opción B : se trata de escoger una escala tipográfica definida. Herramientas como ésta son de gran ayuda. Mi recomendación para aplicaciones web sería utilizar 1.125 (Major Second Scale).
Aquí os dejamos una guía de estilo con un ejemplo en el que se aplica la escala 1.333 (Perfect Fourth).
- Opción C: sería una combinación de las dos opciones anteriores para tener tamaños de fuentes mayores para los títulos.
- Opción D: si estás haciendo un proyecto utilizando las librerías de Material UI, utiliza su escala tipográfica como referencia.
3. Altura de línea
Debe ser entre 1,2x - 1,6x, siendo una regla general 1,5x.
Os dejamos algunas herramientas interesantes que pueden seros de ayuda:
- Gridlover permite jugar con el tamaño de la fuente base, la altura de línea y el factor de escala.
- El triángulo equilátero de un párrafo perfecto. Se trata de un juego para aprender y mejorar nuestras habilidades a la hora de definir los parámetros que influyen en la tipografía web. Es una teoría desarrollada por Matej Latin en el curso Better Web Type sobre tipografía web para diseñadores y desarrolladores web.
Según su autora, muchos profesionales siguen considerando la altura de línea, el tamaño de la fuente y la anchura de línea como características independientes, cuando en realidad deberían considerarse todas juntas. El triángulo equilátero representa a la perfección la armonía entre estas tres características. En este artículo de CSS-Tricks se explica en detalle la teoría.
Este juego desarrolla la teoría y la pone en práctica. Su objetivo es enseñar las tres características que hay que tener en cuenta para un párrafo perfecto y ayudarte a entrenar la vista.
Por otro lado, un tamaño de fuente puede tener más de 1 altura de línea, dependiendo de la aplicación. Algunos ejemplos:
- 16px / 19.2px (1.2x = 120%) → 16px / 19px (redondeando a la baja)
- 16px / 25.6px (1.4x = 140%) → 16px / 26px (redondeando al alza)
Algunos aspectos a tener en cuenta:
- Los píxeles fraccionados no existen: cada navegador redondea los decimales hacia arriba o hacia abajo por su cuenta.
- Los equipos de maqueta suelen trabajar en rems (para los diseñadores no supone ningún problema, pero es interesante saberlo).
- La altura de línea en Figma se expresa en (px) o porcentaje (%), CSS usa valores relativos 120% = 1.2, es importante tenerlo en cuenta a la hora de explicar los valores tipográficos a los maquetas.
Y recuerda documentar la altura de línea en píxeles o porcentajes.
4. Espacio entre letras
Variará mucho en función del tipo de letra y del proyecto.
No hay que olvidar que un espaciado negativo afecta a la legibilidad. Piénsatelo dos veces antes de utilizarlo.
Al igual que la altura de línea, documéntalo en píxeles o porcentaje.
5. Espaciado entre párrafos
Es lo más habitual en webs que tienen mucho contenidos.
En este caso, lo documentaremos siempre en píxeles.
6. Nomenclatura
… / 4xl / 3xl / 2xl / xl / lg / md (base) / s / xs / 2xs / 3xs / 4xs / …
Si estamos usando una librería como material ui, utilizaremos su nomenclatura para ayudar con el traspaso a maqueta. Una escala de tipos puede, y suele, estar combinada con un sistema de tipos semántico, usando variables para bloques de texto comunes (H1, H2, H3, párrafo, texto de botón, texto pequeño, etc.).
7. Responsive
Debemos definir el comportamiento responsive para, al menos, los dispositivos grandes (>1200px) y pequeños (<600px), todo dependerá de la tipología de proyecto.
8. Excepciones
En caso de haberlas, debemos de documentarlas en los diseños.
Aquí os dejamos un ejemplo de cómo hemos utilizado la escala tipográfica en uno de nuestros proyecto recientes:
Y aquí otro ejemplo de la combinación de una escala tipográfica y un sistema semántico.
Y si quieres profundizar más en todo esto, te recomendamos el libro Better Web Typography for a Better Web: Web typography for web designers and web developers de Matej Lanin.