Índice
- ¿Por qué usar rem en lugar de solo px?
- Guía modular de tamaños tipográficos (px vs rem)
- SEO + Diseño: ¿Por qué importa esta guía?
- Tip extra para desarrolladores front-end
Guía completa de tamaños tipográficos para diseño web (px y rem)
Si estás diseñando una página web y no sabes qué tamaño de fuente usar para el h1, párrafos o botones, esta guía te va a salvar.
Incluye medidas en px y rem, optimizadas tanto para escritorio como para móvil.
Está basada en un sistema modular escalable con ratios entre 1.25 y 1.333, usado por diseñadores pro para mantener jerarquía visual y legibilidad.
¿Por qué usar rem en lugar de solo px?
rempermite escalabilidad accesible: si el usuario cambia el tamaño base del navegador, tu diseño se adapta.- Ayuda al diseño responsivo sin reescalar todo manualmente
- Mejora la consistencia al definir variables globales en CSS
Base recomendada:
1rem = 16pxGuía modular de tamaños tipográficos (px vs rem)
| Elemento | Desktop (px) | rem | Móvil (px) | rem | Peso sugerido | Line-height |
|---|---|---|---|---|---|---|
| h1 (Título principal) | 48–64px | 3–4rem | 32–40px | 2–2.5rem | Extra Bold / Bold | 120–130% |
| h2 (Sección principal) | 36–48px | 2.25–3rem | 28–32px | 1.75–2rem | Bold | 120–130% |
| h3 (Subsección) | 28–32px | 1.75–2rem | 24–28px | 1.5–1.75rem | SemiBold / Bold | 130% |
| h4 (Título menor) | 22–24px | 1.375–1.5rem | 20–22px | 1.25–1.375rem | SemiBold | 130% |
| h5 (Subtítulo) | 18–20px | 1.125–1.25rem | 18px | 1.125rem | Medium | 130% |
| h6 (Etiqueta / detalle) | 16px | 1rem | 16px | 1rem | Regular | 130% |
| Párrafo base (body) | 16–18px | 1–1.125rem | 16px | 1rem | Regular | 150–170% |
| Texto secundario / notas | 14px | 0.875rem | 14px | 0.875rem | Regular | 140–160% |
| Botones (grandes) | 16–18px | 1–1.125rem | 16px | 1rem | Medium / Bold | 120–140% |
| Botones (chicos) | 14–16px | 0.875–1rem | 14px | 0.875rem | Medium | 120–140% |
| Inputs / labels | 14–16px | 0.875–1rem | 14px | 0.875rem | Regular / Medium | 140% |
| Links / Menú nav | 16px | 1rem | 14–16px | 0.875–1rem | Medium | 140% |
| Small Text | 12px | 0.75rem | 12px | 0.75rem | Regular | 130% |
SEO + Diseño: ¿Por qué importa esta guía?
- Mejora el diseño visual jerárquico
- Aumenta la legibilidad y accesibilidad
- Mejora la experiencia UX/UI en móviles
- Te ayuda a crear estilos escalables en CSS o Tailwind
Tip extra para desarrolladores front-end
Define una escala tipográfica en variables CSS:
:root {
--font-size-h1: 4rem;
--font-size-body: 1rem;
--font-size-small: 0.875rem;
}Y luego úsala de forma reutilizable en tu app o componente.
¿Te gustó esta guía? Compártela o guarda el enlace.
👉 Más contenido en leandrofuentes.com
