- Adaptar texto a rem
Convierte tamaños en px a rem asumiendo base de 16 px (1 rem = tamaño de fuente del
). Ejemplos:/* Antes */
p { font-size: 18px; }
h2 { font-size: 24px; }
/* Después /
p { font-size: 1.125rem; } / 18 / 16 = 1.125 /
h2 { font-size: 1.5rem; } / 24 / 16 = 1.5 */
rem es relativo al font-size del elemento raíz (
); si no lo cambiaste, normalmente equivale a 16 px.MDN Web Docs
+1
Tip: usa line-height sin unidad (p. ej., line-height: 1.5;) para mantener la legibilidad al escalar.
- Convertir todos los font-size a rem
Busca en styles.css todas las declaraciones font-size: Xpx;.
Convierte con la fórmula rem = px / 16 (salvo que hayas cambiado el tamaño base del
).Reemplaza:
/* Ejemplos comunes /
.small { font-size: 0.875rem; } / 14px /
.body { font-size: 1rem; } / 16px /
.lead { font-size: 1.125rem; } / 18px /
.title { font-size: 2rem; } / 32px */
Los tamaños en rem se ajustarán automáticamente si cambias el font-size del
.MDN Web Docs
- Probar la responsividad tras el cambio
Abre la página y cambia el tamaño de fuente del navegador (Muy grande → Muy pequeño).
Observa si títulos, párrafos, botones y menús siguen siendo legibles y si los layouts no se rompen.
Anota problemas (texto que desborda, botones que colapsan, saltos de línea indeseados).
La tipografía responsiva puede hacerse con media queries o funciones como clamp() para fijar mínimos y máximos.
MDN Web Docs
+1
- Ajustes para distintos tamaños de fuente
Según tus pruebas, aplica estos patrones:
a) Títulos con clamp() (escala fluida con límites)
h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); }
clamp(min, preferido, max) bloquea el tamaño dentro de un rango, ideal para tipografía fluida.
MDN Web Docs
+1
b) Espaciados relativos a la fuente
Usa em en paddings/márgenes para que crezcan con el texto:
section { padding: 2em 1.5em; }
.card { gap: 1em; }
c) Media queries para refinar
Si algo sigue rompiéndose en textos muy grandes/pequeños, añade ajustes específicos:
@media (max-width: 600px) {
.hero { padding: 1.25em; }
}
@media (min-width: 1200px) {
.content { max-width: 70ch; } /* ancho de lectura cómodo */
}
Las media queries permiten adaptar estilos según características del dispositivo/viewport.
MDN Web Docs
Checklist rápido
Todos los font-size relevantes están en rem.
line-height razonable (1.4–1.7) para párrafos.
Espaciados clave en em para escalar con la tipografía.
Títulos con clamp() y límites razonables.
Ajustes con media queries donde haga falta.
