De las muchas opciones de estilo HTML que permite CSS, el tamaño de la fuente es una propiedad clave, especialmente cuando se trata de la capacidad de respuesta de la pantalla. Además, hay varias formas de dictar el tamaño de fuente usando CSS. De estos, las unidades rem resultan ser extremadamente flexibles y relativamente intuitivas.
Las unidades Rem (abreviatura de «root-em») determinan el tamaño de fuente de un elemento en relación con el tamaño del elemento raíz. De forma predeterminada, la mayoría de los navegadores utilizan el valor de tamaño de fuente de 16 px. Entonces, si el elemento raíz es 16px, el elemento con el valor de 1 rem también será de 16px. Por lo tanto, las unidades rem son útiles para escalar elementos CSS en relación con el tamaño del elemento principal, incluso si no sabe cuál será el tamaño de fuente predeterminado.
En este artículo, veremos qué son las unidades rem y cómo usarlas de manera efectiva para tus necesidades de estilo.
¿Qué es CSS?
Para sitios web receptivos, el tamaño de los elementos web cambia con el tamaño de la ventana gráfica. CSS le permite declarar el tamaño de la fuente usando unidades absolutas como píxeles (px) o unidades relativas como porcentajes, unidades em o rem.
Dado que los píxeles son unidades absolutas, no se escalan con la ventana gráfica. Entonces, 1px representa una unidad en un dispositivo físico, independientemente del tamaño del dispositivo. Como resultado, la creación de sitios web receptivos suele ser más fácil utilizando una unidad relativa como porcentaje, em o rem.
Los porcentajes se refieren al padre oa las propiedades de ese elemento. Se utilizan comúnmente para establecer el ancho y la altura de un elemento.
Las unidades em se relacionan específicamente con el elemento principal, lo que permite escalar el elemento en el contexto del elemento principal. Considerar pags etiqueta anidada en un artículo Elemento de tamaño de fuente de 18px:
.article { font-size: 18px;
}
p {
font-size: 2em;
/* sets font size = 36px */
}
Asignar pags elemento con tamaño de fuente 2em le da un tamaño real de 36px – el doble del valor artículo fuente del elemento
¿Qué es rem CSS?
Al igual que las unidades em, las remy son unidades relativas. Sin embargo, se refieren al elemento raíz, generalmente HTML el elemento mismo. La mayoría de los navegadores establecen el tamaño de fuente predeterminado en 16 px. Sin embargo, puedes cambiar eso. Por ejemplo, para cambiar el tamaño de fuente a 14 px, agregue lo siguiente a la hoja de estilo:
html { font-size: 14px
}
Después de establecer el tamaño de un elemento HTML, puede dictar los tamaños de todos los demás elementos que usan unidades rem como un porcentaje de ese tamaño (expresado como un decimal).
Por ejemplo, suponiendo que el tamaño de fuente predeterminado del objeto principal es 16 px, diseña el párrafo con un tamaño de fuente de 12 px usando 0.75 REM porque 12 ÷ 16 = 0,75:
p { font-size: 0.75rem;
}
Realizar estos cálculos cada vez que desea convertir la unidad rem en píxeles puede volverse frustrante rápidamente. Considere los siguientes valores obtenidos al convertir 14px, 18px y 20px a unidades rem:
- 14 píxeles = 0,875 rem
- 18px = 1.125rem
- 20 píxeles = 1,25 rem
Estos valores no son fáciles de recordar y es posible que tengas que consultar la calculadora con más frecuencia de la que deseas para confirmarlos.
Afortunadamente, el truco del 62,5% tiene como objetivo solucionar estos problemas. Después de configurar el tamaño de fuente principal al 62,5% del valor predeterminado, la referencia suele ser 10 px, lo que hace que los valores anteriores sean 1,4 rem, 1,8 rem y 2,0 rem respectivamente.
Pero, ¿por qué establecer el tamaño de fuente principal en 62,5 % en lugar de 10 píxeles?
Una de las principales ventajas de las unidades relativas es su escalabilidad independientemente del tamaño físico de la pantalla. Cambiar el valor maestro con una unidad absoluta significa que el contenido será difícil de leer o navegar. El truco del 62,5% asegura que los desarrolladores puedan escalar fácilmente los valores sin preocuparse por el tipo de dispositivo utilizado para ver el contenido.
Implementar el truco del 62,5 % en CSS se vería así:
html { font-size: 62.5%;
/* changes a default 16px font size to 10px */
}
h1 {
font-size: 2.4rem;
/* font size = 24px */
}
h2 {
font-size: 1.6rem;
/* font size = 16px */
}
p {
font-size: 1.2rem;
/* font size = 12px */
}
Como puede ver, calcular unidades rem en una base de 10 px facilita las cosas. Sin embargo, existe la posibilidad de que el truco del 62,5 % aumente su carga de trabajo. Si su cuerpo va a ser de 12 píxeles, deberá configurar la mayoría de los tamaños de fuente de los módulos o elementos en 12 píxeles. En este escenario, puede establecer el tamaño del cuerpo en 12 píxeles. Tenlo en cuenta cuando uses este truco.
Uso de Rem en consultas de medios
los especificación de consulta de medios establece que las consultas de los medios son (casi) siempre independientes de cualquier estilo interno en el documento.
Por lo tanto, las unidades rem utilizadas en las consultas de medios dependen del tamaño predeterminado del navegador o del tamaño establecido por el usuario en la configuración del navegador, no del tamaño especificado en la hoja de estilo.
Esto significa que el truco del 62,5 % no funcionará en el bloque de consulta de medios y el 1 rem en el medio será igual a 16 px o el valor especificado por el usuario.
Tomemos este ejemplo con un punto de interrupción de medios 32 remy:
html { font-size: 62.5%;
/* font-size: 10px */
}
h1 {
font-size: 2.4rem;
/* font-size: 24px */
}
@media (width <= 32rem) {
h1 {
font-size: 2rem;
}
}
El punto de interrupción aquí no será 32 × 10 px = 320 px, sino 32 × 16 px = 512 px.
¿Por qué debería usar unidades rem?
Como se mencionó anteriormente, las unidades rem se refieren al tamaño del elemento principal. Como el usuario puede establecer el tamaño predeterminado de este elemento en la configuración del navegador, el sitio web se puede escalar de acuerdo con las preferencias del usuario.
Sin embargo, el uso de unidades absolutas como los píxeles crea barreras de accesibilidad. Los píxeles reemplazan el tamaño de fuente principal del documento, lo que significa que se ignoran las preferencias del usuario. Por lo tanto, si es posible, use unidades rem para cualquier elemento escalable.
rem contra Porcentajes
Por lo general, los porcentajes se usan mejor para definir el ancho de los elementos porque brindan una solución más flexible que las unidades rem. Esto es especialmente cierto en el caso de un diseño de varias columnas. Establecer los anchos de columna en un porcentaje garantiza que siempre se escalarán de acuerdo con el tamaño de la ventana gráfica.
Por ejemplo, en un diseño de dos columnas, puede usar porcentajes para dividir un contenedor:
.column1 { width: 75%;
}
.column2 {
width: 25%;
}
Esto permite escalar las columnas proporcionalmente al tamaño de la ventana gráfica.
Rem contra em
Mientras que las unidades de rem son relativas al elemento raíz, em es relativa al elemento principal.
Para ilustrar cómo funciona esto, considere los tamaños de las fuentes principales y secundarias que se muestran a continuación. El tamaño del padre está en píxeles y el tamaño del niño está en em.
.parent { font-size: 18px;
}
.child {
font-size: 2em;
/* font-size: 36px */
}
El tamaño real de la fuente del niño es 2 × 18px = 32px.
Si el padre no tiene un tamaño de fuente establecido, em verificará el siguiente padre en el árbol DOM, hasta la raíz, hasta que encuentre la entidad a la que referirse.
Cuando em se usa en valores de medición distintos al tamaño de fuente, su valor se deriva del tamaño de fuente de ese elemento. Aquí hay un ejemplo de un h1 utilizando unidades em anidadas en wa división elemento:
div { font-size: 12px;
}
h1 {
font-size: 2em;
padding: 1.5em;
}
Aquí h1 el tamaño de fuente es 24px (2 × 12px). A continuación, el valor de relleno se calcula a partir de este valor como 1,5 × 24 px = 36 px.
El problema con em es que el tamaño de fuente se pliega cuando anida elementos.
Tomemos este ejemplo de una lista anidada con estilo CSS:
<style> div {
font-size: 15px
}
li {
font-size: 2em
}
</style>
<body>
<div>
<ul>
<li>Drinks (30px)
<ul>
<li>Tea (60px)
<ul>
<li>Black tea (120px)</li>
<li>Green tea (120px</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
Cuando usa unidades em de esta manera, los tamaños de fuente de los elementos de la lista son complejos y aumentan con cada nivel de anidamiento:
Puede evitar este efecto utilizando unidades rem, ya que el tamaño de fuente de todos los elementos del documento se deriva del tamaño de fuente del elemento HTML.
Las unidades em son útiles cuando el tamaño de un elemento secundario debe ser proporcional al elemento principal. Si elige usar unidades em, generalmente son más adecuadas para elementos con un tamaño de fuente diferente al predeterminado.
Por ejemplo, cuando aplica estilo a un componente de navegación, desea que sus elementos de relleno, margen, ancho y alto se escalen con él. Puede utilizar unidades em para estas propiedades y unidades rem para el tamaño de fuente.
Usando Rem, Em y Porcentajes en CSS
Las unidades Rem le permiten establecer tamaños relativos al elemento raíz. Por ello, se diferencian de otras alternativas de dimensionamiento como unidades em -que dependen de la matriz- o porcentajes cuyos valores reales dependen de la propiedad donde se utilicen.
Al crear sitios web accesibles, evite usar píxeles para cambiar el tamaño de los elementos de la fuente. Su carácter absoluto significa que no son escalables. En su lugar, elija rem, ems y porcentajes. Utilice unidades rem para crear elementos que se escalen en función de la configuración del usuario y unidades em para elementos que deban escalar en función de sus elementos principales. Para crear diseños fluidos, use porcentajes.
Por supuesto, hay excepciones para cada regla. Use prueba y error, así como su propio juicio, y priorice la escalabilidad y la disponibilidad en su proyecto de red.
