Guía 2023 de tamaños y escalas de tipografía adaptable

La verdadera capacidad de respuesta del diseño de su sitio web es algo más que un marco que se adapte a cada dispositivo, también requiere que la tipografía se ajuste a una legibilidad óptima.

La tipografía adaptativa se ajustará para que los elementos de texto también cambien de tamaño y escala en los sitios web. Aunque esa es la respuesta técnica, también hay un enfoque de diseño mayor que es igualmente importante, porque cambiar simplemente el tamaño de un elemento de texto no siempre es suficiente.

Analicemos las mejores prácticas de tipografía responsiva, algunas directrices y algunas herramientas que le ayudarán a crear tipos excelentes en cualquier tamaño.

Recursos de diseño

Manual de tipografía adaptable

Un sólido plan de tipografía adaptable garantizará que su contenido sea legible en todos los dispositivos y que haya desarrollado un conjunto de reglas de interacción, tamaño y escala que ayudarán a que todo se reproduzca en todos los dispositivos.

Lo bueno es que, para la mayoría de los sitios web, eso se reduce prácticamente a dos tamaños: ordenador de sobremesa y móvil (el uso general de tabletas para la navegación web en general ha descendido drásticamente en los últimos años).

Un tipo de letra y una escala que se ven muy bien en una pantalla ancha pueden no verse bien en un tamaño de pantalla portátil orientado verticalmente.

He aquí el reto: un tipo de letra y una escala que se ven muy bien en una pantalla ancha pueden no renderizarse bien en una pantalla de mano de tamaño vertical. Esto puede condicionar la elección del tipo de letra y la forma de planificar el sitio web (de lo contrario, es posible que tenga que cambiar de tipo de letra entre el escritorio y el móvil, lo cual no es recomendable).

A la hora de planificar el diseño, es importante pensar en los elementos tipográficos como parte de este marco general para que no te encuentres más tarde con un extraño desafío de tipografía responsiva (las fuentes superanchas, por ejemplo, pueden presentar desafíos únicos de legibilidad en pantallas móviles).

Entre las consideraciones de diseño de tipografía responsiva se incluyen:

• Selección de tipografía: empiece por un tipo de letra que tenga buen aspecto y se lea bien en una pantalla pequeña y, a continuación, pruébelo en una pantalla más grande.
• Limite las opciones tipográficas: una paleta más pequeña es más fácil de gestionar y pesa menos a la hora de cargar.
• Considere una alternativa por si acaso: si la fuente que desea no se carga (quizá no le gusta al dispositivo o el servidor CDN no funciona), permita una selección alternativa que sea muy común (Arial es una opción alternativa popular para fuentes sin gracias).
• Tamaño y escala del diseño en función del contenido: una tipografía legible puede depender tanto de otros contenidos como de la selección de fuentes. La escala y los tamaños de los elementos de texto suelen variar en función de la cantidad de texto que se representa a la vez y del tipo de contenido en pantalla.
• Cuidado con la altura de línea: un poco más de espacio entre líneas puede mejorar la legibilidad en dispositivos móviles. Hay un delicado equilibrio entre demasiado espacio y demasiado poco. Para tamaños más pequeños, una altura de línea del 150% o 1,5em puede ser un buen punto de partida.
• Categoría de fuentes: los diseñadores se han abierto a utilizar más variantes de fuentes (con gracias, experimentales, etc.) como práctica general. Esto puede plantear algunos problemas en pantallas pequeñas o en pantallas en las que los usuarios utilicen más el modo oscuro. Si opta por esta opción, pruebe las fuentes con antelación para garantizar la legibilidad.

El tamaño de los tipos responsivos va más allá de los píxeles

La mayoría de los diseñadores evitan trabajar en unidades numéricas absolutas y prefieren porcentajes o ems y rems.

La creación de tipos para diseños responsivos requiere mucha reflexión sobre el tamaño y la escala. Cada diseñador puede tener una opinión diferente sobre el tipo de unidad de tamaño que desea utilizar.

Las unidades de tamaño más populares son:

• Píxeles: notación común para el tamaño de fuente digital que anota un número absoluto.
• Puntos: Más de un arrastre de impresión para el tamaño que es menos común en línea
• Ems: Tamaño relativo al tamaño de fuente padre
• Rems: Dimensionado que hereda el estilo raíz
• Porcentaje: Tamaño basado en el cambio porcentual de un estilo padre.

La mayoría de los diseñadores evitan trabajar en unidades numéricas absolutas y prefieren porcentajes o ems y rems. Con este modelo, se empieza con un tamaño base (como el cuerpo del texto) y se ajusta el tamaño a partir de ahí.

Puede facilitar los cálculos (1rem equivale a unos 10px) y permite un ajuste a escala completa con sólo cambiar el tamaño de fuente predeterminado.

¿Qué aspecto tiene para el tamaño por defecto?

El cuerpo de texto suele tener un tamaño de 16px a 18px o de 1,6rem a 1,8 rem (de 14px a 16px para móviles). Luego puedes usar la escala que quieras para dimensionar todo en consecuencia.

Si ajusta el tamaño del cuerpo del texto u otro tamaño de fuente predeterminado para escritorio y móvil, la escala se encargará del resto.

Encontrar la báscula adecuada

La escala tipográfica determina cuánto más grandes o más pequeñas se arraigan las fuentes en la fuente base o por defecto. Usando este método tu tamaño base es 100% si te gustan los porcentajes o 1em, si esa es tu unidad preferida.

A continuación, elija la escala y cómo esa escala se refiere a las posiciones CSS de H1 a H6 y así sucesivamente.

Hay algunas escalas tipográficas comunes que crean sensaciones y armonías distintas que son mucho más fáciles de calcular matemáticamente que asignar valores al azar a los tamaños de letra.

Balanzas de tipo de alto contraste

Ideales para pantallas grandes, estas escalas tienen mucha variación entre tamaños. La base H1 y el cuerpo de texto crearán mucho dramatismo debido a las diferencias de tamaño.

Estas escalas incluyen (el número es la relación de cambio):

• Cuarto Aumentado, 1.414
• Quinto perfecto, 1.500
• Proporción áurea, 1,618

Escalas de tipo de contraste medio

Aquí es donde caen la mayoría de las escalas tipográficas y es una zona segura para la mayoría de los tamaños de pantalla. Es ideal para diseños con mucho contenido de texto.

Estas escalas incluyen:

• Tercero menor, 1.200
• Mayor Tercero, 1.250
• Cuarto Perfecto, 1.333

Balanzas de tipo de bajo contraste

La menos variable de las escalas es la mejor para elementos tipográficos más pequeños que se utilizan como identificadores. Es posible que vea este tipo de escala en aplicaciones basadas en cuadros de mando, listados de comercio electrónico o elementos basados en cuadrículas.

Estas escalas incluyen:

• Segundo menor, 1,067
• Mayor Segundo, 1.125

Cuando se trata de crear escalas tipográficas, ya existen algunos recursos y herramientas magníficos si no quieres hacer los cálculos tú mismo o quieres previsualizar variaciones en los tamaños.

• Calculadora de escala visual (mostrada arriba)
• Fuentes adaptables en CSS puro
• Propiedad MDN Font-Size
• Calculadora de escala tipográfica
• Calculadora sencilla de tamaño de fuente adaptable

Hacia la tipografía intrínseca

Lo siguiente en lo que hay que pensar en términos de tipografía web es el tipo intrínseco. A principios de este año, Scott Kellum para CSS-Tricks lo llamó "el futuro del estilo del texto en la web".

En la más sencilla de las explicaciones, la tipografía intrínseca pierde los estilos de texto diferenciados; en su lugar, se definen estilos basados en la proporción de texto respecto al área. Las razones para ello son aumentar la flexibilidad y escribir código más sencillo.

El resultado es que el texto se "autoajusta" al contenedor donde vive y no está conectado a la ventana gráfica. Puede tener mucho más que un puñado de tamaños preestablecidos dentro de una escala que se aplica a todo el diseño. La variación se vuelve casi ilimitada.

Puede probarlo con la herramienta Typetura.

Conclusión

El diseño tipográfico puede ser el elemento más importante de cualquier proyecto web. Al pensar en cómo se representará el texto y cómo se leerá en cada tamaño, se crean experiencias web más valiosas y accesibles para todos.

Comienza con una base sólida de tipografía y una comprensión de cómo adaptarse a los visitantes del sitio web, independientemente de cómo interactúen con el diseño.