Tipografía
La tipografía es principalmente moderación: una escala sensata, un espaciado cómodo, 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 texto, las viudas y el truncamiento solo se manifiestan 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 apariencia familiar. La hoja de referencia asigna cada declaración a su equivalente en Tailwind.
Las palabras en sí pertenecen a hr-better-writing. La estructura semántica de encabezados pertenece a hr-better-accessibility. El diseño espacial RTL y las propiedades lógicas pertenecen a hr-better-layout. La medición de contraste pertenece a hr-better-colors. Esta skill gestiona cómo se renderiza, ajusta y comporta el texto en contenido con direcciones mixtas.
Servir el formato correcto
Usa .woff2 en la web, por su compresión Brotli y su amplia compatibilidad. .woff es un fallback para navegadores muy antiguos. .ttf y .otf son formatos de escritorio sin compresión web. Cómo se cargan los archivos es responsabilidad del proyecto.
Propiedades sobre 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 fallback no variable. Reserva las etiquetas raw para ejes personalizados ("GRAD" 80) y características niche ("ss01" 1) sin propiedad propia. Los ejes y las etiquetas de características se enumeran en variable-fonts-and-opentype.md.
Cargar pesos y estilos previstos
Los navegadores sintetizan un peso o estilo que la familia activa no proporciona, distorsionando la cara real. Carga las caras que el diseño utiliza.
font-synthesis: none desactiva la síntesis, pero elimina el énfasis en lugar de notificarlo. Establécelo solo después de verificar que cada forma requerida (negrita, cursiva, versalitas, superíndice, subíndice) se mantiene distinta en toda la pila de fallback.
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 daña rápidamente la legibilidad. Combínalas por contraste, no por similitud: un titular serifa sobre un cuerpo sans se percibe como intencionado, dos sans-serif casi idénticos se perciben como un error.
Por debajo de 18px, mantén un peso 400 o mayor. Los pesos por debajo de 300 son solo para display a partir de 28px+; desaparecen en tamaños de texto. La guía de combinación está en choosing-fonts.md.
Usar 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 rompen a escala. Refuerza la escala con una regla de lint o una prueba de guardia que falle ante un tamaño arbitrario fuera de ella.
Nombres simples por defecto 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 superior. Los niveles adyacentes pueden compartir un tamaño hacia el extremo pequeño de la escala, siempre que el peso o el espaciado los mantenga distintos. El elemento semántico es responsabilidad de hr-better-accessibility; esta skill establece solo el tratamiento visual.
Interlineado por rol
Los encabezados más ajustados, alrededor de 1.1. El cuerpo de texto de 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 breve. Cualquier cosa que se ajuste a tres líneas o más necesita al menos 1.4, incluso en una fila con altura restringida.
Espaciado entre letras por tamaño
Los encabezados grandes a menudo se ven mejor con un espaciado entre letras ligeramente negativo. Las etiquetas pequeñas en mayúsculas necesitan un pequeño espaciado positivo, o las letras se sienten apretadas. El cuerpo de texto en tamaños de lectura no necesita ninguno.
Limitar la medida
Las líneas largas dificultan que el ojo encuentre la siguiente. Limita el texto de formato largo a alrededor de 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 sus equivalentes en píxeles.
Ajustar deliberadamente
Cuatro declaraciones, cuatro trabajos:
text-wrap: balancedistribuye el texto uniformemente entre líneas. Úsalo en encabezados.text-wrap: prettyevita que una sola palabra corta termine en la línea final. Úsalo en descripciones.overflow-wrap: break-worddonde una palabra larga, enlace o ID podría salirse del contenedor.white-space: nowrapen etiquetas y badges donde un salto de línea se vería roto.
Omite balance y pretty en texto de formato largo.
Números tabulares en valores cambiantes
Los dígitos tienen anchos diferentes por defecto, por lo que temporizadores, contadores y precios desplazan el diseño al actualizarse. Aplica font-variant-numeric: tabular-nums a cualquier valor que cambie.
Truncar sin perder contenido
Para una sola línea, text-overflow: ellipsis con overflow: hidden y white-space: nowrap. Para varias, line-clamp. El truncamiento oculta contenido. Cuando el texto faltante es importante, mantén el valor completo accesible en un tooltip o una vista expandida.
Elige por campo. Ajusta nombres y títulos que el usuario necesita completos para identificar un elemento. Trunca en el medio cuando los elementos difieran al final, como nombres de archivo, rutas y correos electrónicos que comparten un dominio, porque una elipsis al final los hace parecer idénticos. Nunca trunques números, cantidades o fechas que el usuario compare. Los detalles están en wrapping-and-punctuation.md.
Escribir copia de forma natural, estilizar con CSS
Almacena el texto en mayúsculas/minúsculas natural y controla la presentación con text-transform, para que un rediseño nunca implique reescribir la copia.
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 elipsis único, no tres puntos.
para mantener16 pxjuntos a través de un salto de línea.­para indicar dónde puede dividirse una palabra larga.
Subrayados desde la fuente
Los subrayados por defecto se colocan donde el navegador decide. Obtén la posición y el grosor de las métricas propias de la fuente con text-underline-position: from-font y text-decoration-thickness: from-font. Ajusta manualmente 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 amplía toda la página cuando el texto de un input es menor de 16px. Dos correcciones mantienen el tamaño en 16px y se ven diferentes, así que pregunta cuál quiere el diseño:
- Aumentar el tamaño del input en móvil (
text-base sm:text-sm). Cambia cómo se ve en pantallas pequeñas. - Mantener
font-size: 16pxy renderizar el tamaño deseado contransform: scale(), compensando el ancho y elline-height. Idéntico en cada viewport, más código que mantener.
Ambas recetas están en details-and-accessibility.md.
Suelo de tamaño y contraste
Empieza el texto de cuerpo de formato largo en 16px, el valor por defecto del navegador. Aléjate 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 UI puede ser más pequeño. 14px es un punto de partida útil para inputs y menús, 13px para leyendas y rara vez por debajo de 12px. Los inputs aún necesitan 16px en móvil.
Cuando el texto se vea de bajo contraste, usa hr-better-colors para medir el par renderizado y hr-better-accessibility para clasificar el requisito. No modifiques los colores 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 layout raíz, nunca por componente. La clase antialiased de Tailwind cubre ambas.
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 del 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 mirroring espacial y las propiedades CSS lógicas pertenecen a hr-better-layout.
Mantener el texto útil seleccionable
Mantén el texto seleccionable por defecto. ::selection puede incorporar la marca en 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 la etiqueta de un botón pueda resaltarse.
Antes de terminar
| Error | Solución |
|---|---|
| La cara sintetizada difiere del diseño | Carga la cara 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 escala |
| Elemento de encabezado elegido por su tamaño por defecto | Elige primero la semántica, luego establece el tamaño en CSS |
| Huérfano 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 la justificación para diseños editoriales específicos |
| El 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; suprímela solo donde entre en conflicto con un arrastre o gesto |
| Pista de información extra sin señal visual | Subrayado punteado mediante text-decoration-style: dotted |
Peso Thin/Light en texto UI de 14px | Peso 400+ por debajo de 18px; los pesos finos son solo para display |
leading-none en una descripción de tarjeta de tres líneas | Al menos 1.4 en cualquier texto que se ajuste a 3+ líneas |
Reporte
Gravedad. HIGH hace que el texto sea ilegible o trunca contenido sin posibilidad de recuperación. MEDIUM rompe el sistema tipográfico o la jerarquía de encabezados. LOW es un pulido aislado.
Verificación. Sin navegador: tamaño y peso calculados para cada nivel de encabezado, comprobando que desciendan; interlineado y medida declarados; reglas de truncamiento contra longitudes de cadena realistas. Con navegador: redimensiona el viewport para detectar ajuste, viudas y truncamiento en longitudes de contenido reales. Reporta cada comprobació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 listando 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.
Reporta Bloqueante cuando quede algún HIGH, Aprobar en caso contrario, dejando el resto en la tabla como trabajo pendiente. Nunca Aprobar cobertura que no hayas inspeccionado. Sin nada que reportar, indica "No se encontraron hallazgos tipográficos accionables" y reporta la verificación.