Tipografía y Estilo de Texto

Familias de Fuentes y Alternativas

Siempre define una pila de fuentes para que los usuarios tengan una experiencia consistente incluso si una fuente personalizada no se carga.

body {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Tamaños de Fuente y Altura de Línea

Usa rem para tipografía escalable y establece una altura de línea cómoda para legibilidad.

:root { font-size: 16px; }

h1 { font-size: 2.5rem; line-height: 1.2; }
p { font-size: 1rem; line-height: 1.6; }

Truncamiento y Limitación de Líneas

Mantén el texto ordenado cuando el espacio es limitado:

/* Elipsis de una sola línea */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Limitar múltiples líneas */
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Longitud de Línea Legible

La lectura cómoda es alrededor de 60-75 caracteres por línea:

.content {
  max-width: 65ch;
  line-height: 1.6;
}

Carga de Fuentes Personalizadas

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}