Tipografía
La tipografía es principalmente moderación: una escala sensata, un espaciado cómodo y suficiente contraste. Una etiqueta, una celda de tabla, un titular de marketing y un párrafo de artículo no comparten un mismo conjunto de reglas.
Al revisar, lee la página renderizada en lugar de escanear el código. El mal ajuste de línea, las viudas y la truncación solo aparecen con longitudes de contenido reales.
Escribe cada corrección en el sistema de estilos del proyecto y usa los valores exactos que se indican a continuación, en lugar de equivalentes de aspecto familiar. La hoja de referencia asigna cada declaración a su equivalente en Tailwind.
Las palabras en sí pertenecen a better-writing. La estructura semántica de encabezados pertenece a better-accessibility. El diseño RTL espacial y las propiedades lógicas pertenecen a better-layout. La medición de contraste pertenece a better-colors. Este skill controla cómo se renderiza, envuelve y comporta el texto en contenido de dirección mixta.
Sirve el formato correcto
Usa .woff2 en la web, por su compresión Brotli y su amplio soporte. .woff es un respaldo para navegadores muy antiguos. .ttf y .otf son formatos de escritorio sin compresión web. La carga de los archivos es responsabilidad del proyecto.
Propiedades en lugar de etiquetas raw
Cuando exista una propiedad CSS, úsala. font-weight: 650 en lugar de font-variation-settings: "wght" 650. font-optical-sizing: auto en lugar de "opsz". font-variant-numeric: tabular-nums en lugar de font-feature-settings: "tnum" 1.
Las propiedades siguen funcionando cuando se renderiza un respaldo no variable. Reserva las etiquetas raw para ejes personalizados ("GRAD" 80) y funciones especializadas ("ss01" 1) que no tengan propiedad propia. Los ejes y las etiquetas de funciones se enumeran en variable-fonts-and-opentype.md.
Carga los pesos y estilos previstos
Los navegadores sintetizan un peso o estilo que la familia activa no proporciona, distorsionando la fuente real. Carga las fuentes que el diseño utiliza.
font-synthesis: none desactiva la síntesis, pero borra el énfasis en lugar de notificarlo. Ajústalo solo después de verificar que cada forma requerida (negrita, cursiva, versalitas, superíndice y subíndice) se mantiene distinguible en toda la pila de respaldo.
Menos fuentes, tamaños y pesos
Rara vez uses más de tres fuentes. El peso y el tamaño definen la jerarquía; abusar de ellos perjudica rápidamente la legibilidad. Combínalas por contraste, no por similitud: un titular con serifa sobre un cuerpo sin serifa se percibe como intencionado; dos sans-serif casi idénticas se perciben como un error.
Por debajo de 18px, mantente en peso 400 o más. Los pesos inferiores a 300 son solo para visualización a 28px+; desaparecen en tamaños de texto. La guía de combinación está en choosing-fonts.md.
Usa una escala tipográfica con nombres semánticos
Define un conjunto pequeño de tamaños y aléjate de él lo menos posible. Los tamaños codificados sin un sistema subyacente se descomponen a escala.
Nombres simples y predeterminados como text-sm están bien cuando las reglas de uso son claras. En un equipo, nombra los tamaños por uso (text-body-sm) para que las reglas sobrevivan a otras personas. La construcción de la escala está en spacing-and-sizing.md.
Los tamaños de encabezado descienden con el nivel
Asigna los niveles de encabezado a pasos descendentes de la escala tipográfica, de modo que un encabezado visualmente subordinado nunca supere a su elemento padre. Los niveles adyacentes pueden compartir un tamaño hacia el extremo pequeño de la escala, siempre que el peso o el espaciado los mantengan distintos. El elemento semántico es de better-accessibility; este skill establece solo el tratamiento visual.
Interlineado según el rol
Encabezados más ajustados, alrededor de 1.1. Cuerpo de texto 1.5 a 1.6. Prefiere valores sin unidad, para que el interlineado escale con el tamaño de fuente; un 24px fijo no lo hace.
El interlineado ajustado es para texto corto. Cualquier cosa que se envuelva en tres o más líneas necesita al menos 1.4, incluso en una fila con altura restringida.
Espaciado entre letras según el tamaño
Los encabezados grandes suelen verse mejor con un espaciado entre letras ligeramente negativo. Las etiquetas pequeñas en mayúsculas necesitan un poco de espaciado positivo, o las letras se sienten apretadas. El cuerpo de texto en tamaños de lectura no necesita ninguno.
Limita la medida
Las líneas largas dificultan que el ojo encuentre la siguiente. Limita el texto de formato largo a unos 60–75 caracteres por línea. Cualquier unidad funciona, siempre que exista un límite y la longitud de línea esté dentro del rango. Consulta opciones de unidad y equivalentes en píxeles.
Envuelve deliberadamente
Cuatro declaraciones, cuatro trabajos:
text-wrap: balancedistribuye el texto de manera uniforme en las líneas. Úsalo en encabezados.text-wrap: prettyevita que una sola palabra corta termine en la última línea. Úsalo en descripciones.overflow-wrap: break-worddonde una palabra larga, enlace o ID pueda escaparse del contenedor.white-space: nowrapen etiquetas y badges donde un salto de línea se vea mal.
Omite balance y pretty en texto de formato largo.
Números tabulares en valores cambiantes
Los dígitos tienen diferentes anchos por defecto, por lo que los temporizadores, contadores y precios cambian el diseño a medida que se actualizan. Aplica font-variant-numeric: tabular-nums a cualquier valor que cambie.
Trunca sin perder contenido
Para una sola línea, text-overflow: ellipsis con overflow: hidden y white-space: nowrap. Para varias, line-clamp. La truncación oculta contenido. Cuando el texto faltante importa, mantén el valor completo accesible en un tooltip o una vista expandida.
Escribe el texto de forma natural, estiliza con CSS
Almacena el texto en mayúsculas/minúsculas naturales y controla la presentación con text-transform, de modo que un rediseño nunca implique reescribir el texto.
Usa puntuación inteligente en el texto renderizado:
- Comillas curvas en prosa, comillas rectas en código.
- Un guion largo para rangos:
2010–2020. - El carácter de puntos suspensivos único, no tres puntos.
para mantener16 pxjuntos a través de un salto de línea.­para indicar dónde puede romperse una palabra larga.
Subrayados desde la fuente
Los subrayados predeterminados se colocan donde el navegador decide. Extrae la posición y el grosor de las métricas de la fuente con text-underline-position: from-font y text-decoration-thickness: from-font. Ajusta a mano con text-decoration-thickness, text-underline-offset y text-decoration-skip-ink.
text-decoration-style dibuja la línea punteada, discontinua u ondulada. Un subrayado punteado es una pista común de que una palabra lleva información adicional, como una abreviatura o un término definido.
El color es la única parte de un subrayado real que se anima de forma fiable. Por lo tanto, a menos que lo único que se anime sea el color, construye el subrayado como un elemento separado en lugar de usar text-decoration.
Inputs a 16px en móvil
Safari en iOS acerca la página completa cuando el texto de un input es menor de 16px. Dos soluciones mantienen el tamaño a 16px y se ven diferentes, así que pregunta cuál quiere el diseño:
- Aumenta el tamaño del input en móvil (
text-base sm:text-sm). Cambia su aspecto en pantallas pequeñas. - Mantén
font-size: 16pxy renderiza el tamaño previsto contransform: scale(), compensando el ancho yline-height. Idéntico en cada viewport, más código que mantener.
Ambas recetas están en details-and-accessibility.md.
Pisos de tamaño y contraste
Empieza el texto de cuerpo largo a 16px, el valor predeterminado del navegador. Aléjate de él solo por una razón que puedas nombrar: la tipografía es pequeña, la medida es estrecha o el producto es una herramienta profesional densa.
El texto de la interfaz de usuario puede ser más pequeño. 14px es un punto de partida útil para inputs y menús, 13px para subtítulos y raramente por debajo de 12px. Los inputs aún necesitan 16px en móvil.
Cuando el texto se vea de bajo contraste, usa better-colors para medir el par renderizado y better-accessibility para clasificar el requisito. Deja los colores en paz a menos que te lo pidan.
Suavizado de fuente en la raíz
En macOS, el texto se renderiza más pesado de lo previsto. Aplica -webkit-font-smoothing: antialiased y -moz-osx-font-smoothing: grayscale una vez en el diseño raíz, nunca por componente. antialiased de Tailwind cubre ambos.
Comportamiento de idioma y bidi
Establece lang para que los navegadores y la tecnología de asistencia elijan la pronunciación, comillas y separación silábica correctas. Establece dir en el documento o en el límite de contenido donde cambie la dirección. Preserva el orden de los dígitos y usa <bdi> para aislar un valor de dirección mixta. El reflejo espacial y las propiedades CSS lógicas pertenecen a better-layout.
Mantén el texto útil seleccionable
Mantén el texto seleccionable por defecto. ::selection puede llevar la marca a la experiencia de lectura, siempre que la combinación seleccionada siga siendo legible.
user-select: none pertenece a una superficie arrastrable o basada en gestos donde la selección accidental interfiere. Nunca en toda la interfaz y nunca porque una etiqueta de botón pueda resaltarse.
Antes de terminar
| Error | Solución |
|---|---|
| La cara sintetizada difiere del diseño | Carga la fuente real; desactiva solo el modo de síntesis verificado |
| Un encabezado hijo supera visualmente a su padre | Asigna la jerarquía de esa sección a pasos descendentes de la escala |
| Elemento de encabezado elegido por su tamaño predeterminado | Elige la semántica primero, luego establece el tamaño en CSS |
| Huérfana en la última línea de un párrafo | text-wrap: pretty |
| Encabezado de dos líneas desequilibrado | text-wrap: balance |
| Texto justificado en una interfaz | text-align: start; reserva justificar para diseños editoriales específicos |
| Subrayado corta los descendentes | text-decoration-skip-ink: auto, métricas from-font |
| Valor de dirección mixta se renderiza en orden incorrecto | Corrige lang/dir; aísla el valor con <bdi> |
| Selección deshabilitada en toda la interfaz de la aplicación | Restáurala; suprime solo donde entre en conflicto con un arrastre o gesto |
| Indicación de información adicional sin señal visual | Subrayado punteado mediante text-decoration-style: dotted |
Peso Thin/Light en texto de IU a 14px | Peso 400+ por debajo de 18px; los pesos finos son solo para visualización |
leading-none en una descripción de tarjeta de tres líneas | Al menos 1.4 en cualquier texto que se envuelva a 3+ líneas |
Reporte
Gravedad. HIGH hace que el texto sea ilegible o trunca contenido sin posibilidad de recuperarlo. MEDIUM rompe el sistema tipográfico o la jerarquía de encabezados. LOW es un ajuste aislado.
Verificación. Sin navegador: tamaño y peso calculados para cada nivel de encabezado, verificados en orden descendente; interlineado y medida declarados; reglas de truncamiento contra longitudes de cadena realistas. Con uno: redimensiona el viewport para detectar ajuste de línea, viudas y truncamiento en longitudes de contenido reales. Reporta cada verificación que no pudiste ejecutar como No verificado.
Formato. Agrupa los hallazgos bajo el principio que cada uno viola, ordenados por gravedad, una fila por causa raíz que enumere cada ubicación donde aparece:
| Gravedad | Ubicación | Antes | Después | Por qué |
|---|
Ubicación es ruta/al/archivo:línea. Por qué nombra el principio y el impacto en el usuario.
Termina con Bloquear cuando quede algún HIGH, Aprobar en caso contrario, dejando el resto en la tabla como trabajo pendiente. Nunca Aprobar cobertura que no inspeccionaste. Sin nada que reportar, indica "Sin hallazgos tipográficos accionables" y reporta la verificación.