Cómo adaptar la tipografía a distintos tamaños de pantalla

La tipografía adaptable mantiene los títulos legibles y les da el protagonismo adecuado a medida que cambia el espacio que los rodea. La tipografía fluida modifica el tamaño de forma continua dentro de un intervalo; la basada en puntos de ruptura lo cambia al alcanzar determinadas anchuras. Ambos enfoques siguen necesitando límites y una columna de texto adecuada al contenido. Reducir el tamaño de letra en un teléfono es solo una parte del trabajo. Un título puede caber en su contenedor y aun así resultar apretado, partirse en un lugar poco natural o imponerse sobre el párrafo que lo explica.

Pensemos en este título ficticio: «Una forma más tranquila de gestionar proyectos complejos». En una página ancha podría quedar equilibrado en dos líneas. En una pantalla estrecha podría convertirse en cinco líneas densas, con «complejos» aislado al final. La solución no consiste necesariamente en reducir la letra. Tal vez la columna sea más estrecha de lo necesario, la fuente tenga proporciones anchas o un salto de línea pensado para escritorio esté forzando una composición inadecuada.

GOV.UK modificó el texto pequeño, además de los títulos grandes

GOV.UK ofrece un contrapunto útil a la idea de «hacerlo todo más pequeño en el móvil». Su escala tipográfica actual mantiene el cuerpo de texto de 19px también en las pantallas pequeñas, mientras que un título extragrande pasa de 48px a 32px. Los distintos niveles responden de manera diferente porque cumplen funciones de lectura diferentes.

En su explicación de la revisión tipográfica, el equipo recoge las preocupaciones de la comunidad sobre la reducción del texto pequeño y sus efectos en las personas con discapacidad visual. La implementación actual sirve como referencia para los valores que se comentan a continuación; el artículo anterior explica los motivos del cambio.

En una página de producto, este ejemplo invita a separar dos decisiones que suelen tomarse juntas. Un título destacado puede necesitar menos peso visual cuando la pantalla se estrecha. Las instrucciones, los requisitos de acceso y los párrafos del cuerpo siguen necesitando una lectura cómoda. Aplicar el mismo factor de escala a todos los niveles puede resolver un problema del título a costa de crear otro en el cuerpo de texto.

Una regla CSS de tipografía fluida que puedes probar

Para un título destacado, esta regla puede servir como punto de partida ilustrativo:

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

Con un tamaño raíz predeterminado de 16px, produce aproximadamente 32px en una ventana de 390px, unos 43px a 768px y 63px a 1440px. Su propiedad útil es que el tamaño del texto tiene un mínimo y un máximo.

El cálculo tiene dos transiciones que conviene comprobar. Por debajo de 400px de anchura de ventana, se aplica el mínimo de 32px. Por encima de unos 1467px, se aplica el máximo de 64px. Entre ambos límites, cada aumento de 100px en la anchura de la ventana añade 3px al título. Esto permite razonar mejor sobre la regla: si aparece una línea incómoda alrededor de los 900px, puedes comparar la anchura disponible de la columna con ese ritmo de crecimiento, en lugar de elegir a ciegas otro tamaño para móvil.

Considera la fórmula una propuesta que hay que probar. En una anchura intermedia, el título puede crecer más deprisa que su columna y añadir una línea incluso mientras la pantalla se ensancha. Antes de dar por válida la curva, coloca el título real más largo junto a la imagen real. Si falla el estado intermedio, reduce el ritmo de crecimiento o cambia el reparto de las columnas; añadir saltos manuales a todos los títulos crea, en cambio, un problema de mantenimiento.

Incluir un término en rem no garantiza que una regla fluida supere las pruebas de redimensionamiento del texto. El zoom del navegador modifica tanto el espacio efectivo de la ventana como el tamaño del texto, y el término basado en la ventana puede contrarrestar parte del aumento. Prueba el resultado renderizado con zoom y con un tamaño de texto predeterminado mayor. Lo que se exige es que el contenido siga siendo legible y esté disponible, no simplemente que la hoja de estilos contenga una unidad relativa.

Describe la incomodidad antes de cambiar la fuente

Cuando un título no funciona, identifica qué estás viendo. «Demasiado grande» no significa lo mismo que «demasiadas líneas». «Demasiado apretado» puede referirse a letras que se tocan, líneas demasiado juntas o al bloque entero pegado a la imagen. Cada diagnóstico apunta a un ajuste diferente.

Lee el título en voz alta y después observa cómo las líneas dividen la frase. Una línea que termina en una palabra breve de enlace puede interrumpir el ritmo natural de lectura. Una última línea muy corta puede parecer accidental. Ninguna de estas situaciones constituye automáticamente un fallo de usabilidad, pero ambas pueden explicar por qué una página, aun siendo limpia, parece inacabada.

A continuación, oculta un momento las imágenes que lo rodean. Si el título resulta cómodo sin ellas, el problema puede estar en la composición y no solo en la tipografía. El borde de una imagen puede hacer que la columna de texto parezca más estrecha de lo que es. Una ilustración cargada puede competir con las mismas palabras que se leían con claridad sobre un fondo vacío.

Define la función de cada nivel de título

El título de página, los encabezados de sección y los títulos de tarjeta cumplen funciones diferentes. El primero establece el tema principal. Los encabezados de sección ayudan a recorrer el argumento o la oferta. Los títulos de tarjeta permiten distinguir elementos que se repiten. No todos deberían escalar con la misma intensidad por el mero hecho de usar la misma familia tipográfica.

En el ejemplo de gestión de proyectos, el título principal puede ser expresivo. Una sección llamada «Mantén las decisiones junto al trabajo» debe destacar sin competir por captar la atención primero. Una tarjeta llamada «Historial del proyecto» tiene que convivir cómodamente con su descripción. Si todos los niveles se vuelven enormes en escritorio, la página puede parecer una colección de anuncios promocionales.

Define las relaciones antes de elegir los valores exactos. Decide qué nivel debe verse primero, cuánto texto suele contener cada uno y si aparece junto a una imagen. Después prueba el ejemplo más largo que resulte realista en cada nivel. Un sistema tipográfico que solo funciona con el título más corto es una demostración, no una regla fiable para la página.

Evita usar el tamaño para compensar una redacción poco clara. «Todo lo que necesitas» puede estar compuesto de forma impecable y aun así no identificar la sección. Si el lector tiene que examinar cada párrafo para descubrir qué contiene la página, mejorar los encabezados puede exigir un lenguaje más preciso, además de un mejor espaciado.

Haz que la anchura de la columna de texto esté justificada

Los saltos de línea de un título dependen del espacio que se le asigne. Antes de reducir la fuente, revisa el contenedor. El relleno lateral, la separación de la cuadrícula, una columna vacía o una imagen innecesariamente grande pueden estar quitando espacio a las palabras. Esas decisiones quizá eran adecuadas a una anchura mayor y simplemente se han mantenido demasiado tiempo.

Para el título ficticio, compara dos composiciones estrechas con la misma tipografía. En una, unos márgenes laterales grandes comprimen el texto en una columna angosta. En la otra, los márgenes se reducen, manteniendo la coherencia con el resto de la página. La segunda puede dar al título una apariencia más serena sin cambiar en absoluto su tamaño ni su peso.

En una pantalla ancha aparece el problema contrario. Dejar que un título se extienda por todo el ancho de la página puede convertirlo en una larga franja horizontal y debilitar su relación con el contenido que viene debajo. Una anchura máxima puede conservar su forma editorial. Elígela observando títulos reales, en lugar de tratar una cantidad de caracteres como garantía de longitud de línea.

Recuerda que las letras de una fuente no tienen todas la misma anchura. Una columna que admite doce letras estrechas no necesariamente admite doce letras anchas. Los valores basados en unidades tipográficas pueden ser un buen punto de partida, pero la evidencia sigue estando en las palabras renderizadas. Esto es especialmente importante cuando un nombre de marca o un término técnico debe permanecer entero.

Elige un intervalo de escala, no una regla de crecimiento ilimitado

Puedes usar unos pocos cambios de tamaño o una escala fluida. Ambos enfoques pueden funcionar si sus límites inferior y superior son sensatos. La cuestión importante es cómo se comporta el título entre las vistas que has diseñado expresamente.

La lección de tipografía de web.dev explica el dimensionado fluido y advierte contra el uso exclusivo de unidades de ventana para el tamaño del texto. Su idea general resulta útil aquí: la lectura depende de algo más que elegir una fuente. Conserva un componente relativo al tamaño del texto y comprueba qué ocurre cuando el lector cambia el zoom o sus preferencias de texto.

Revisa la parte intermedia del intervalo. Un título puede verse bien en sus tamaños mínimo y máximo y, entre ambos, formar un bloque incómodo de tres líneas. Ajustar la columna o el ritmo de crecimiento puede ser más eficaz que introducir otro cambio brusco de tamaño. Mantén una regla lo bastante comprensible para que alguien pueda conservarla cuando cambie el texto.

Ajusta el espacio dentro de las palabras y a su alrededor

Interlineado: mantén la frase unida

La distancia entre líneas hace que un título de varias líneas se perciba como una sola unidad legible. Si es insuficiente, las líneas contiguas pueden chocar visualmente, sobre todo en torno a las mayúsculas altas y las letras con trazos descendentes. Si es excesiva, las líneas pueden separarse tanto que la frase parezca un conjunto de etiquetas sin relación.

Compara las formas reales de las letras, no solo los números de un panel de estilos. Una fuente con una altura de minúsculas grande puede resultar apretada con un ajuste que funciona en otra. Los pesos gruesos pueden hacer que los huecos parezcan menores porque hay más superficie oscura en la página. Los caracteres acentuados también pueden revelar que una caja de línea que parecía suficiente con la muestra original era, en realidad, demasiado ajustada.

Durante la revisión, usa un título que mezcle mayúsculas, minúsculas y puntuación. «TRABAJA MEJOR» es un mal sustituto de la frase con mayúsculas y minúsculas que realmente aparecerá. Oculta varias formas que importan. Si la página admite varios idiomas, la prueba de títulos tendrá que incluir también sus sistemas de escritura.

Evalúa por separado el espacio que queda debajo del título. Aumentar el interlineado para dejar más distancia antes del párrafo cambia el interior del título y puede producir un efecto equivocado. Asigna un valor propio a la separación entre título y párrafo, y revisa si ambos elementos siguen percibiéndose como relacionados.

Espaciado entre letras: conserva la forma de las palabras

Conviene revisar el espaciado entre letras cuando un título parece comprimido aunque sus líneas tengan suficiente espacio. Un espaciado muy negativo puede dar dramatismo a un título en una composición estática grande y resultar incómodo al renderizarlo más pequeño. El mismo ajuste también puede verse distinto con un peso más ligero o más grueso.

Parte del espaciado normal de la fuente y compara pequeños ajustes. Observa combinaciones de letras redondas, trazos diagonales y verticales repetidas. No juzgues solo la primera palabra. Un cambio que dé aire a «tranquila» puede hacer que otra parte de la frase quede demasiado suelta.

Mantén la coherencia visual de las palabras. Un espaciado positivo excesivo puede ralentizar su reconocimiento y convertir la frase en una secuencia de caracteres aislados. También aumenta la anchura total y puede provocar precisamente el salto de línea que intentabas eliminar. Si el título ya es largo, hay que evaluar juntos el espaciado y la anchura de la columna.

Evita aplicar el mismo tratamiento a los títulos en mayúsculas y a los escritos como una frase normal. Una pequeña etiqueta introductoria en mayúsculas puede beneficiarse de algo más de separación, mientras que un título largo con mayúsculas y minúsculas suele necesitar un ajuste más discreto. El objetivo es apoyar la función del texto. Un estilo copiado de una etiqueta diminuta rara vez sirve como regla para el título principal.

Distribución en líneas: evita saltos frágiles

Un salto de línea deliberado puede mejorar una composición, pero también volverla frágil. Si insertas un salto después de «gestionar» en el título sobre gestión de proyectos, las palabras finales pueden quedar muy bien en una pantalla ancha. En una anchura menor, la primera parte quizá ya ocupe varias líneas, lo que añadiría una línea imprevista.

Antes de añadir saltos manuales, prueba a ajustar la anchura y la escala. Si un salto manual sigue siendo importante para el diseño, documenta en qué condiciones se aplica y comprueba qué sucede fuera de ellas. No des por hecho que un salto elegido para el inglés debe mantenerse en todas las traducciones.

Evita mantener una frase larga en una sola línea solo para proteger una forma que te gusta. Impedir cualquier salto puede sacar el texto de su contenedor o exigir un tamaño ilegiblemente pequeño. Limita los elementos inseparables a los casos en que separarlos perjudique realmente el significado, como una cifra breve y su unidad, y después vuelve a revisar el espacio restante.

Si la última línea parece demasiado corta, considera si se puede editar el texto sin perder significado. Eliminar una frase innecesaria puede mejorar tanto la redacción como su composición. Pero la tipografía no debe obligar a borrar una limitación del producto, una precisión importante o un término que el lector necesita para identificar la oferta.

Usa el color y el peso para reforzar la jerarquía

Un título grande no necesita acumular todos los demás recursos de énfasis. Un peso grueso, un espaciado estrecho, un degradado brillante y una sombra intensa pueden competir dentro de un mismo bloque de texto. Decide qué tratamiento aporta el protagonismo y deja los demás en segundo plano.

En una página con una ilustración colorida, un título oscuro de color uniforme puede establecer el orden de lectura más claro. Si el diseño requiere un degradado sutil, comprueba que su parte más clara siga siendo legible sobre el fondo. Un título claro a tamaño completo puede perder contraste al reducirse o al situarse junto a una imagen luminosa.

Distingue la información secundaria mediante una combinación de tamaño, peso y posición antes de volverla muy pálida. Un subtítulo discreto debe seguir siendo fácil de leer. Lo mismo ocurre con los pies de imagen y las etiquetas: hacerlos casi invisibles no crea una jerarquía útil; elimina información.

Compara la página con un vistazo rápido y después con una lectura detenida. El vistazo debe establecer el tema principal. La lectura más atenta debe revelar los detalles de apoyo sin esfuerzo. Si todos los títulos reclaman la misma atención, reducir algunos pesos o tamaños puede aportar más que añadir otro color de acento.

Prueba la fuente que realmente se carga

Un diseño puede cambiar cuando su fuente prevista termina de cargar o cuando esa fuente falla. Las distintas anchuras de las letras pueden modificar los saltos de línea y desplazar el contenido cercano. Incluye el estado con la fuente de sustitución en la revisión, en lugar de suponer que todos los visitantes ven de inmediato la misma tipografía.

En una revisión de desarrollo, comprueba qué fuente se está renderizando y si existe el peso esperado. Solicitar un peso que el archivo no contiene puede producir un resultado imprevisto. Si el título parece inusualmente grueso o estrecho, verifica el archivo antes de compensarlo con cambios de espaciado.

Observa las consecuencias sobre la composición cuando el texto cambia de forma. ¿El párrafo salta hacia abajo? ¿Una insignia se superpone al título? ¿Una cabecera de altura fija recorta la última línea? Estas observaciones son más útiles que limitarse a decir que la fuente «se ve diferente», porque identifican las condiciones que la composición debe admitir.

La fuente de sustitución no tiene que ser visualmente idéntica a la de marca, pero sí debe mantener la página utilizable. Deja suficiente flexibilidad para que el título ocupe un número distinto de líneas sin romper la sección. Aunque sea importante reproducir la marca con exactitud, esa exigencia debe convivir con la realidad práctica de unas condiciones de carga variables.

Haz una revisión breve de los títulos

Elige tres títulos: el principal, un encabezado de sección largo y el título de tarjeta más largo que sea habitual. Revísalos junto con el contenido que los rodea, en lugar de usar una muestra aislada. Examina una vista estrecha, una intermedia y una ancha; después cambia el tamaño entre ellas observando si se producen cambios bruscos.

En cada vista, lee la frase completa. Comprueba si los saltos de línea conservan el significado, si el espaciado interior resulta cómodo y si el título sigue distinguiéndose del párrafo. Después aumenta el zoom del navegador y repite la tarea de lectura esencial. Observa el resultado, en lugar de suponer que una técnica concreta de dimensionado garantiza un buen comportamiento.

Usa un título alternativo más largo como prueba de mantenimiento. En la página ficticia, cambia el título por «Una forma más tranquila de gestionar proyectos en equipos distribuidos». No estás dando por definitiva esa redacción. Estás averiguando si el componente admite un cambio editorial razonable sin necesitar arreglos a medida.

Documenta la decisión con palabras corrientes: «El título puede ocupar una línea adicional en pantallas estrechas; conserva la frase completa y deja que la sección crezca». Esta indicación es más duradera que conservar a todos los tamaños el número exacto de líneas de una captura. Explica al siguiente editor qué valora el diseño y qué puede variar.

Concreta la revisión en OpenDesign

La vista previa HTML de OpenDesign y sus vistas de escritorio, tableta y móvil pueden ayudar a comparar el mismo título en distintas composiciones. Para una revisión centrada, identifica el título y la incomodidad que has observado. Si el problema se limita al espaciado o a una propiedad de estilo compatible, puede bastar con la edición manual; una petición estructural puede describirse en el chat junto con las restricciones previstas.

Por ejemplo, pide que se mantengan la redacción y la familia tipográfica, que se relaje el espaciado entre letras demasiado apretado y que se permita al título ocupar una línea adicional en la vista estrecha. Así la revisión sigue centrada en la tipografía. Una petición vaga de hacer que toda la cabecera parezca más sofisticada podría alterar la ilustración, los colores y el texto y dejar sin resolver el problema original de lectura.

Después del cambio, vuelve a los tres títulos de la selección de revisión. Un estilo compartido puede afectar a más elementos que el título que estabas mirando. Compara las vistas pertinentes y confirma que el texto de apoyo sigue cumpliendo la función prevista.