¿Qué tan incómodo puede ser leer en una página donde la tipografía no está bien pensada? En CSS, a veces basta con un par de decisiones para transformar por completo cómo se ve y se siente un sitio web. La tipografía no es solo cuestión de verse bonita —es clave— para que el contenido sea legible, tenga jerarquía y se sienta fluido en cualquier diseño.
La idea es sencilla: lograr que el usuario lea fácil, sin perderse entre estilos raros o innecesarios. Aquí van algunos tips para dejar una base sólida y atractiva usando reglas claras de CSS. Además, vas a entender por qué conviene tener una estructura tipográfica firme antes de meterte con highlights o efectos más avanzados.
/* Base typography */
:root {
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--base-size: 16px;
--line: 1.5;
}
html { font-size: 100%; }
body { font-family: var(--font); font-size: var(--base-size); line-height: var(--line); color: #1f2937; }
Elegir la fuente adecuada
Entre serif y sans-serif hay un mundo de diferencia —puede cambiar— si tu sitio parece formal o moderno. Para textos largos en pantalla casi siempre gana la sans-serif; las serif quedan bien en encabezados o si buscas ese toque editorial. ¿Y cómo le haces para no volverte loco combinando fuentes? Lo práctico es usar una principal para el cuerpo del texto y otra solo si necesitas contraste en títulos o botones.
No olvides definir bien los pesos y variaciones. Limitarte a dos o tres fuentes (no más) ayuda muchísimo tanto al look como al rendimiento del sitio. A veces con alternar entre regular y bold ya logras resaltar lo importante sin saturar al lector.
- Escoge una fuente principal para cuerpo y otra secundaria solo si hace falta.
- Mantén los pesos entre 300–700; así evitas contrastes exagerados.
- Da prioridad a la legibilidad en tamaños base —ajusta— menos en títulos.
Fuentes variables y su impacto
Las fuentes variables están cambiando el juego porque dejan ajustar grosor, ancho y otras cosas con un solo archivo —menos descargas, mejor rendimiento—. Te dan chance de adaptar la tipografía según el dispositivo sin perder coherencia visual.
¿Quieres empezar? Define tu fuente variable y usa sus opciones con propiedades CSS modernas. Eso sí, revisa bien compatibilidad de navegadores y piensa siempre en usuarios que leen desde pantallas chicas. Si aplicas bien una fuente variable puedes darle vida al diseño sin sacrificar velocidad.
@font-face {
font-family: "InterVar";
src: url("/fonts/Inter-VariableFont.ttf") format("truetype");
font-weight: 100 900;
}
html { font-family: InterVar, system-ui, -apple-system, Arial; }
Escala tipográfica y legibilidad
Tener una buena escala tipográfica ayuda a marcar jerarquía sin caer en exageraciones visuales. Con CSS puedes armar escalas modulares que ajustan tamaños entre encabezados y párrafos fácilmente —prueba valores que partan del tamaño base e incrementa poco a poco—.
Evita brincos bruscos de tamaño entre elementos cercanos; mantener proporciones consistentes da ritmo visual estable (y el ojo lo agradece). Cuando los párrafos respiran —ni muy cortos ni eternos— la lectura se vuelve mucho más cómoda.
h1 { font-size: clamp(1.8rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 2.25rem); }
p { font-size: clamp(0.95rem, 0.8vw, 1.25rem); line-height: 1.6; }
Unidades y medidas (rem/em/px)
El tipo de unidad afecta directo cómo escala todo tu diseño web—las rems escalan según el tamaño base del documento; los ems heredan del padre (útil para microajustes), mientras que px da precisión pero puede fallar en dispositivos con distintos ajustes de fuente.
Lo ideal suele ser fijar un tamaño base claro (tipo 16px) y construir lo demás usando rems —así si alguien quiere aumentar el tamaño desde su navegador todo responde parejo— evita mezclar unidades nomás porque sí; mantenerte consistente hace mucho más fácil leer cualquier cosa.
Espaciado & ritmo tipográfico
El espacio entre letras (tracking), palabras e interlineado tiene peso real sobre la legibilidad —un ritmo armónico ayuda a que el ojo no salte ni se pierda— Si quieres hacerlo sencillo ajusta line-height entre 1.4–1.6 para cuerpos grandes e introduce diferencias pequeñas sólo cuando necesites enfatizar algo puntual.
Un truco rápido es definir variables de espaciado desde CSS —úsalas igualito en títulos/párrafos/subtítulos— así logras uniformidad sin esfuerzo extra.
- Usa line-height entre ~1.45–1.6 para textos largos.
- Aplica letter-spacing suave solo si tu fuente lo soporta.
- Márgenes verticales uniformes = cadencia visual clara.
Accesibilidad & contraste
Sin accesibilidad no hay tipografía útil posible—aquí sí importa mucho tener buen contraste texto/fondo (mínimo relación de contraste recomendada es 4.5:1). No dependas únicamente del color para comunicar algo crucial; además asegúrate que tus fuentes sean legibles tanto en computadoras como celulares/tabletas.
Checa también cómo renderiza el texto según navegador/dispositivo —y deja que los tamaños respondan si alguien cambia preferencias desde su sistema operativo— eso suma puntos importantes tanto para experiencia como confianza del usuario final.
Pruebas & herramientas útiles
No te quedes solo “viendo bonito” —haz pruebas reales— para confirmar legibilidad/rendimiento usando herramientas concretas como Lighthouse, wave o axe… todas ayudan a medir accesibilidad/tipografía bajo condiciones reales (no sólo teoría).
Checklist básico:
- Verifica contraste/tamaño mínimo desde distintos dispositivos
- Prueba variantes responsivas según cambias fuentes
- Evalúa tiempos de carga cuando usas nuevas familias modernas
- Revisa jerarquía consistente página tras página
Así te aseguras que tu trabajo no sólo luce pro sino también funciona perfecto allá afuera —donde importa realmente—
