Tipografía

Funciones web: font-size rem unidad em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() y clamp() Unidades de viewport

Prácticas recomendadas generales

  • Usa números sin unidades para line-height (p.ej., 1.5) para garantizar el escalamiento relativo durante la herencia del tamaño de la fuente.
  • Usa overflow-wrap: break-word (o anywhere) para contener URLs largas.
  • NO uses px para el tamaño de la fuente. Se prefiere rem para respetar las preferencias de tamaño de fuente del navegador del usuario (tamaño de fuente raíz) o em/porcentajes para el tamaño contextual.

Legibilidad

  • Evita las líneas de texto largas: Limita los bloques de párrafos a un ancho máximo de 80 caracteres.
  • Evita los ríos de espacios en blanco: Evita text-align: justify, ya que puede dificultar la lectura del texto. Si debes usarlo, combínalo con hyphens: auto para evitar espacios en blanco excesivos entre las palabras.
  • No uses fuentes ornamentadas: Omite los tipos de letra cursiva para el contenido de lectura principal.
  • No uses todo en mayúsculas para enfatizar: Prefiere la negrita para el énfasis visual y usa <em>/<strong> cuando el énfasis sea semántico.
  • Limita el énfasis general: El énfasis pierde sentido cuando está en todas partes. Aplícalo solo donde cambie la forma en que se debe leer el contenido.
  • Admite las preferencias de zoom de los usuarios: Permite que los usuarios cambien el tamaño del texto hasta un 200% sin perder contenido ni funcionalidad.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Ajuste de texto

  • Usa text-wrap: balance para títulos equilibrados y contenido similar a un título (p. ej., <th>).
  • Usa text-wrap: pretty para el texto del cuerpo de formato largo (párrafos, citas en bloque, etc.).
  • Usa text-wrap: balance o text-wrap: pretty de forma deliberada, NO lo apliques en *, ya que tiene un costo de rendimiento.
  • Evita usar text-wrap: balance en elementos con un cuadro visible (fondos, bordes, sombras, etc.), ya que no cambia el ancho del contenedor, sino que solo afecta la forma en que se ajusta el texto dentro de ese ancho. Esto puede dejar un espacio vacío al final del contenedor, lo que suele ser indeseable.

Tipografía responsiva

  • SÍ combina unidades relativas al viewport y a la fuente en clamp() para los tamaños de fuente que se ajustan al tamaño del viewport y, al mismo tiempo, asegúrate de que se mantengan dentro del rango deseado. Por ejemplo, clamp(2rem, 1rem + 5vw, 4rem). Ajusta la proporción de unidades relativas al viewport y a la fuente para controlar la rapidez con la que cambia el tamaño de la fuente.
  • NO uses vw solo para font-size sin clamp(), ya que puede escalar el texto demasiado pequeño o demasiado grande en pantallas extremas.