Font: tipografía clara y consistente en tu app
Publicado el · Actualizado el
Font influye en legibilidad, jerarquía, identidad, rendimiento y localización de una aplicación. Esta guía explica cómo construir un sistema tipográfico coherente, elegir fuentes adecuadas, definir escala y espaciado, adaptar el texto al responsive, soportar varios idiomas, optimizar carga y comprobar el resultado con contenido real.
Define primero un sistema tipográfico
Empieza definiendo los papeles del texto dentro del producto: título de página, encabezado de sección, cuerpo, label, botón, tabla, error, caption, número y metadatos. Cada papel debe tener una jerarquía y un estilo reutilizable. Si cada pantalla inventa tamaños y pesos distintos, la interfaz pierde ritmo y mantenerla se vuelve costoso. Un conjunto pequeño de estilos documentados suele ser mucho más útil que decenas de excepciones porque todos los componentes comparten la misma lógica visual.
Separa jerarquía de decoración. Un encabezado debe parecer importante por tamaño, peso, espacio y posición, no porque cada pantalla utilice una fuente distinta. Define tokens para body, small, label, subtitle, section, page title y display. Así un cambio global se vuelve seguro. Si más adelante aumenta el tamaño de body o se añade un modo de accesibilidad, el sistema puede actualizarse sin editar manualmente cada pantalla.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Elige tipografías según su función
Elige una tipografía según las condiciones de lectura. Un gran titular de marketing puede aceptar más personalidad que una tabla densa, un formulario o documentación larga. Para cuerpo de texto busca formas claras, buena puntuación, pesos útiles, números distinguibles y buen renderizado a tamaños pequeños. Prueba contenido real de interfaz. Una fuente atractiva en una maqueta puede funcionar mal en botones compactos o dashboards llenos de datos.
Limita el número de familias. Una familia con varios pesos puede cubrir casi todo el producto y una segunda puede reservarse para títulos display. Cada familia adicional aumenta complejidad visual, archivos, peticiones y mantenimiento. Si existe una fuente de marca, documenta dónde debe usarse y dónde conviene un fallback más práctico. La consistencia aporta más valor que cambiar de estilo constantemente.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Crea una escala de tamaños coherente
Crea una escala tipográfica en vez de escoger tamaños independientes. Parte de un body cómodo, define textos secundarios más pequeños y luego niveles de títulos. Lo importante es la relación entre niveles. Muchos tamaños casi iguales debilitan la jerarquía y saltos excesivos crean ruido. Una escala útil cubre body, small, label, subtitle, section, page title y display con peso y line-height definidos.
El tamaño no actúa solo. Peso, line-height, letter-spacing, color y uso de mayúsculas también cambian la jerarquía. Un label puede ser menor pero más denso; un título grande puede necesitar line-height ajustado; un párrafo requiere más aire. En tablas, números tabulares ayudan a alinear valores. Documenta estas reglas para que cards, formularios y dashboards hablen el mismo lenguaje.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Controla espacio y longitud de línea
La longitud de línea influye directamente en la lectura. Líneas muy largas dificultan encontrar el comienzo de la siguiente; columnas demasiado estrechas provocan demasiados saltos. Define un ancho máximo razonable para contenido largo. Ajusta line-height según fuente, tamaño y script, no con un único valor automático para todo el producto.
Cuida también el ritmo vertical entre títulos, párrafos, listas y campos. Normalmente el espacio antes de un título debe separar más que el espacio después. Evita márgenes arbitrarios por pantalla y usa spacing tokens. Si cambia tamaño o line-height, revisa el espacio alrededor para mantener agrupaciones claras.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Diseña tipografía responsive
Responsive no significa crear otro sistema tipográfico por dispositivo. Los títulos grandes pueden reducirse en móvil, mientras body debe permanecer dentro de una zona cómoda. Usa breakpoints o tamaños fluidos con mínimos y máximos. Prueba titulares reales largos porque el wrapping puede alterar altura y equilibrio de una sección completa.
Revisa botones, tabs, labels, navegación y tablas en espacios estrechos. Decide si el texto puede envolver, truncarse, desplazarse o cambiar de layout. Prueba zoom del navegador y configuraciones de texto grande. Una interfaz que solo funciona con zoom estándar no es suficientemente resistente.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Soporta correctamente varios idiomas
En un producto multilingüe verifica cobertura real de caracteres. Una fuente excelente para latín puede carecer de árabe, caracteres checos u otros scripts y provocar un fallback inesperado. Ese cambio afecta ancho, altura y peso. Prueba traducciones reales, porque botones y títulos pueden crecer significativamente respecto al inglés.
Los scripts de derecha a izquierda requieren atención a dirección, alineación, puntuación, números y texto mixto. No copies letter-spacing o line-height de latín de forma ciega. Si distintas lenguas utilizan familias diferentes, intenta que sus métricas sean similares para reducir saltos de layout al cambiar idioma.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Optimiza carga y fallback
Carga solamente los pesos y estilos realmente usados. Descargar toda una familia aumenta el peso de la página sin necesidad. Utiliza formatos modernos y cuidado con subsetting para no eliminar caracteres que luego necesita otra lengua. El objetivo es mostrar texto pronto y reducir layout shift cuando la fuente personalizada sustituye al fallback.
Define un fallback stack legible y de proporciones parecidas. Prueba red lenta, requests bloqueados y primera visita sin caché. Self-hosting ofrece control pero también responsabilidad sobre archivos, cache, licencias y actualizaciones. Mide antes de decidir cuál estrategia es mejor.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Prueba y mantén la tipografía
Prueba tipografía con páginas reales: títulos largos, formularios, tablas, errores, estados vacíos, números, traducciones y contenido de usuarios. Busca clipping, solapamiento, wrapping excesivo, contraste bajo y pesos inconsistentes. Una demo perfecta no representa toda la variabilidad de producción.
Mantén una referencia con familias, pesos, tamaños, line-height, letter-spacing, usos, fallbacks y carga. Antes de crear un nuevo estilo, comprueba si uno existente sirve. Al cambiar de familia compara métricas y wrapping en múltiples pantallas. Un sistema mantenible acelera futuros cambios.
Prueba también contenido generado por usuarios como nombres, direcciones, comentarios y datos importados. Puede ser mucho más largo que los ejemplos de diseño. Cada componente necesita un comportamiento de overflow definido. Ensaya palabras largas, números grandes, cadenas sin espacios y puntuación mixta, especialmente en tablas, cards, badges y headers móviles.
Accesibilidad no es solo contraste. Prueba zoom, tamaño de texto del sistema y ajustes del navegador que cambian fuentes. No dependas únicamente de peso o color para transmitir significado. La jerarquía debe seguir siendo comprensible aunque la fuente personalizada falle y aparezca un fallback.
Prueba también contenido generado por usuarios como nombres, direcciones, comentarios y datos importados. Puede ser mucho más largo que los ejemplos de diseño. Cada componente necesita un comportamiento de overflow definido. Ensaya palabras largas, números grandes, cadenas sin espacios y puntuación mixta, especialmente en tablas, cards, badges y headers móviles.
Accesibilidad no es solo contraste. Prueba zoom, tamaño de texto del sistema y ajustes del navegador que cambian fuentes. No dependas únicamente de peso o color para transmitir significado. La jerarquía debe seguir siendo comprensible aunque la fuente personalizada falle y aparezca un fallback.
Prueba también contenido generado por usuarios como nombres, direcciones, comentarios y datos importados. Puede ser mucho más largo que los ejemplos de diseño. Cada componente necesita un comportamiento de overflow definido. Ensaya palabras largas, números grandes, cadenas sin espacios y puntuación mixta, especialmente en tablas, cards, badges y headers móviles.
Accesibilidad no es solo contraste. Prueba zoom, tamaño de texto del sistema y ajustes del navegador que cambian fuentes. No dependas únicamente de peso o color para transmitir significado. La jerarquía debe seguir siendo comprensible aunque la fuente personalizada falle y aparezca un fallback.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Preguntas
¿Cuántas familias font usar?
Normalmente una familia principal y, si hace falta, una segunda para display.
¿Qué importa en el body?
Formas claras, tamaño cómodo, line-height, longitud de línea, cobertura de idiomas y renderizado estable.
¿Cargar todos los pesos?
No, solo los pesos y estilos realmente usados, con fallback probado.
¿Cómo probar multilingüe?
Con traducciones reales, cobertura de caracteres, dirección, wrapping, line-height y fallback.