La guía de Richard Rutter para establecer el font-size de un elemento es interesante: sostiene que deberíamos utilizar tanto em y rem unidades en función de la relación que pueda tener con otros elementos de la página:
Tome el ejemplo de una cita extraíble que contiene dos párrafos cortos. El espacio entre los párrafos dependerá del tamaño del texto del párrafo, por lo que es posible establecer ese espacio en rems o ems. Si durante su proceso de diseño decide que la cita de extracción debe establecerse un poco más grande, entonces también debe aumentarse el espacio entre los párrafos. Por lo tanto, el espacio entre párrafos está directamente relacionado con el tamaño del texto del párrafo y, por lo tanto, se considera un tamaño local dentro de un componente. Por lo tanto, debe usar ems en este caso.
Esto complementa el método que Chris describió hace un par de años:
Así que aquí está mi idea: todavía te quedas px ajustes de tamaño en el nivel del documento para que pueda realizar cambios de tamaño de barrido fáciles y eficientes. Pero luego cada módulo de la página tiene un tamaño de fuente establecido en rem. Los elementos de texto reales (h1, h2, p, li, lo que sea), si es que los dimensiona, se dimensionan en emy, por lo tanto, se vuelve relativo al módulo.
Rompiendo eso un poco: primero configuraríamos el font-size del elemento de documento con px:
html {
font-size: 16px;
@media screen and (min-width: 900px) {
font-size: 18px;
}
@media screen and (min-width: 1200px) {
font-size: 20px;
}
}A continuación, diseñamos todos nuestros pequeños elementos textuales, como párrafos, encabezados o citas en bloque, con ems. Esto se debe a que comparten una relación entre ellos:
h2 {
font-size: 2em;
}
pre {
font-size: 0.8em;
}Y finalmente diseñamos los módulos que contienen esos fragmentos de texto rems, para que podamos ajustar fácilmente todo el texto dentro de ellos:
.module {
font-size: 1.1rem;
}
.another-module {
font-size: 1.3rem;
}… que termina funcionando algo como esto en la práctica:
Vea Pen Em AND Rem de Chris Coyier (@chriscoyier) en CodePen.
¿Qué logramos al hacer esto? ¿Por qué no podemos seguir rem o em para mantener las cosas simples? Bueno, con este método, cada módulo se compartimenta instantáneamente y es más fácil de diseñar para el futuro. Pero también podemos ajustar rápidamente el font-size de cada módulo sin tener que cambiar grandes porciones del código base. Si notamos que el font-size de todo el sitio web debe aumentarse, luego solo necesita cambiar un valor único.
em y rem Los valores son útiles para dos trabajos diferentes, y si los utilizamos de la forma en que fueron diseñados, nuestro trabajo puede volverse un poco más fácil de mantener y flexible.