La tipografía está controlada por una familia de propiedades font-* y text-*. Hacer que sean correctas es la mayoría de lo que hace que una página se vea pulida y legible.
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
El navegador intenta cada una en orden hasta que una está disponible. Siempre termine con una familia genérica (sans-serif, serif, monospace) para que el texto se represente incluso si fallan las fuentes personalizadas. system-ui utiliza la fuente nativa del SO (rápida, sin descargas).
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* prevent wrapping */
word-break: break-word; /* break long words/URLs */
}
line-height: 1.5; /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px; /* ⚠️ fixed — doesn't adapt if font-size changes */
Un line-height sin unidades multiplica el tamaño de fuente propio de cada elemento, por lo que permanece proporcional cuando los elementos anidados tienen tamaños diferentes — el enfoque recomendado.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
Las propiedades de texto impulsan la legibilidad y la jerarquía visual — font-size/weight para énfasis, line-height (~1.5) para una lectura cómoda, pilas de respaldo para confiabilidad y text-overflow para truncamiento limpio.
La buena tipografía es la mayor parte de una interfaz de usuario de buen aspecto.