DIFERENCIA entre REM y EM en CSS
¿Cuáles son las diferencias entre REM y EM? ¿Porqué deberíamos de usar EM siempre? ¿Debemos de usar la técnica de 62.5% de CSS? Vamos a analizar cada una de las preguntas con sus respectivas respuestas en este artículo.
Pero antes de nada decirte que este artículo hace referencia al vídeo de Youtube donde hablo y enseño en código de todo el proceso de explicación, pero para quienes nos gusta leer, aquí va un artículo con las respuestas a cada una de las preguntas:
📏 ¿Cuáles son las medidas en CSS para font-size?
Hay varias unidades de medida que se pueden usar para especificar el tamaño de la fuente en CSS. Algunas de las unidades más comunes son:
- pixels (px): esta es una unidad absoluta que indica el número de pixels que ocupará el tamaño de la fuente. Por ejemplo, si se especifica un valor de 16px para el tamaño de la fuente, el tamaño de la fuente será de 16 pixels.
- em: esta es una unidad relativa que se basa en el tamaño de la fuente del elemento actual. Por ejemplo, si la fuente del elemento actual es de 16 pixels y se especifica un valor de 1em para el tamaño de la fuente, el tamaño de la fuente será de 16 pixels. Si se especifica un valor de 2em, el tamaño de la fuente será de 32 pixels.
- rem: esta es una unidad relativa que se basa en el tamaño de la fuente del elemento raíz (que suele ser la etiqueta html). Por lo tanto, si la fuente del elemento raíz es de 16 pixels y se especifica un valor de 1rem para el tamaño de la fuente, el tamaño de la fuente será de 16 pixels. Si se especifica un valor de 2rem, el tamaño de la fuente será de 32 pixels.
- porcentaje (%): esta es una unidad relativa que se basa en el tamaño del font-size del navegador hasta la etiqueta en la cual usemos.
Al final: las unidades de medida que se pueden usar para especificar el tamaño de la fuente en CSS incluyen pixels, em, rem y porcentaje. Cada una de estas unidades tiene sus propias características y ventajas menos el px.
✅ Diferencias entre REM y EM
Cuando hablamos de las dos mejores medidas para desarrollar webs, hablamos de las medidas em y rem ya que como comentamos previamente se utilizan para especificar el tamaño de un elemento en una página web en donde la unidad em se basa en el tamaño de la fuente del elemento actual, mientras que la unidad rem se basa en el tamaño de la fuente del elemento raíz (que suele ser el elemento html).
La unidad em se utiliza a menudo para especificar el tamaño de los elementos en relación al tamaño de la fuente del elemento actual. Por ejemplo, si la fuente del elemento actual es de 16 pixels, un valor de 1 em para el tamaño de un elemento significaría que el elemento tendrá un tamaño de 16 pixels. Si el elemento tiene un valor de 2 em para el tamaño, su tamaño será de 32 pixels.
La unidad rem se utiliza para especificar el tamaño de los elementos en relación al tamaño de la fuente del elemento raíz o etiqueta html. Por lo tanto, si la fuente del elemento raíz es de 16 pixels y se especifica un valor de 1 rem para el tamaño de un elemento, el elemento tendrá un tamaño de 16 pixels. Si se especifica un valor de 2 rem para el tamaño del elemento, su tamaño será de 32 pixels.
Al final: las unidades em y rem se utilizan para especificar el tamaño de los elementos en una página web en relación al tamaño de la fuente del elemento actual o del elemento raíz, respectivamente.
👨🏻🏫 Repaso: ¿Qué es rem en CSS?
Recapitulando y volviendo a la definición dada previamente: La unidad rem en CSS es una unidad de medida que se utiliza para especificar el tamaño de un elemento en una página web que se basa en el tamaño de la fuente del elemento raíz o etiqueta html.
Por ejemplo, si la fuente del elemento raíz es de 16 pixels y se especifica un valor de 1 rem para el tamaño de un elemento, el elemento tendrá un tamaño de 16 pixels. Si se especifica un valor de 2 rem para el tamaño del elemento, su tamaño será de 32 pixels.
La unidad rem se utiliza a menudo para especificar el tamaño de los elementos en relación al tamaño de la fuente del elemento raíz, lo que permite crear diseños que sean flexibles y adaptables a diferentes tamaños de fuente.
👨🏻🏫 Repaso: ¿Qué es em en CSS?
La unidad em en CSS es una unidad de medida que se utiliza para especificar el tamaño de un elemento en una página web. La unidad em se basa en el tamaño de la fuente del elemento actual, lo que significa que el tamaño de un elemento en em será relativo al tamaño de la fuente del elemento que lo contiene.
Por ejemplo, si la fuente del elemento actual es de 16 pixels, un valor de 1 em para el tamaño de un elemento significaría que el elemento tendrá un tamaño de 16 pixels. Si el elemento tiene un valor de 2 em para el tamaño, su tamaño será de 32 pixels.
Importante: ¿Cuál es el font-size por defecto en CSS?
El tamaño de fuente por defecto en CSS es de 16 pixels. Este valor se aplica a todos los elementos en una página web si no se especifica un tamaño de fuente diferente para ellos.
El valor por defecto de 16 pixels se ha establecido en base a una serie de factores, como la legibilidad y la estética. Sin embargo, es posible cambiar el tamaño de fuente por defecto en CSS si es necesario para un diseño específico. Para hacerlo, puedes usar la propiedad «font-size» en la regla «html» de tu hoja de estilos y especificar el tamaño de fuente que deseas usar como valor por defecto. Por ejemplo:
html {
font-size: 18px;
}
En este ejemplo, se establece el tamaño de fuente por defecto en 18 pixels en lugar de 16 pixels. Cualquier elemento en la página web que no tenga un tamaño de fuente específico asignado se mostrará con un tamaño de 18 pixels.
❌ Porqué NO usar PX en el body
Aunque el uso de la unidad de medida px en el body no está prohibido, es comúnmente considerado una mala práctica en CSS. Esto se debe a que el tamaño de la fuente en una página web debería ser especificado en unidades relativas, como porcentaje o em, en lugar de unidades absolutas como px.
La razón de esto es que las unidades de medida relativas son más flexibles y adaptables a diferentes tamaños de pantalla. Por ejemplo, si se establece un tamaño de fuente en px para el body, este se verá bien en una pantalla de tamaño determinado, pero puede verse demasiado grande o demasiado pequeño en otras pantallas. En cambio, si se utilizan unidades de medida relativas, el tamaño de la fuente se ajustará automáticamente a diferentes tamaños de pantalla.
Además, el uso de unidades de medida relativas es importante para garantizar que la página web sea accesible para personas con discapacidad visual. Estas personas pueden utilizar herramientas que permiten aumentar o disminuir el tamaño de la fuente en una página web, y si se utilizan unidades de medida absolutas como px, el tamaño de la fuente no se ajustará automáticamente a estos cambios.
Al final: el uso de unidades de medida absolutas como px en el body puede limitar la flexibilidad y la accesibilidad de una página web, por lo que se recomienda utilizar unidades de medida relativas en su lugar.
✅ Porque usar Porcentaje en el body y html
Uno de los principales motivos por los que se recomienda usar porcentajes para el tamaño de la fuente en el body es que esta unidad de medida es relativa y se ajusta automáticamente a diferentes tamaños de pantalla.
Por ejemplo, si se establece un tamaño de fuente del 100% para el body, esto significa que la fuente tendrá el mismo tamaño que la fuente predeterminada del navegador del usuario. Esto permite que la página web se adapte automáticamente a diferentes tamaños de pantalla y resoluciones, lo que garantiza una mejor experiencia de usuario en dispositivos móviles y de escritorio.
Además, el uso de porcentajes en el tamaño de la fuente también es importante para garantizar la accesibilidad de la página web. Las personas con discapacidad visual pueden utilizar herramientas que les permiten aumentar o disminuir el tamaño de la fuente en una página web, y si se utilizan unidades de medida absolutas como px, el tamaño de la fuente no se ajustará automáticamente a estos cambios. En cambio, si se utilizan porcentajes, el tamaño de la fuente se ajustará automáticamente a los cambios en el tamaño de la fuente, lo que facilita el acceso a la página web para estas personas.
Al final: el uso de porcentajes para el tamaño de la fuente en el body es una buena práctica en CSS porque garantiza una mejor adaptabilidad y accesibilidad de la página web.
🤔¿Cuál es la técnica del 62.5% en CSS?
La técnica del 62.5% en CSS se refiere a una técnica utilizada para especificar el tamaño de una fuente en una página web. Esta técnica consiste en establecer el tamaño de la fuente en 62.5% del tamaño predeterminado y, a continuación, utilizar la unidad de medida REM para especificar el tamaño de los demás elementos en la página en relación con la fuente.
La idea detrás de esta técnica es hacer que el tamaño de la fuente sea más fácil de trabajar en unidades de medida rem. Por ejemplo, si establece el tamaño de la fuente en 62.5%, un tamaño de fuente de 10px se convertiría en 6.25rem, lo que es más fácil de recordar y utilizar en las propiedades de estilo CSS.
Además, al utilizar la unidad de medida REM en lugar de píxeles, puede asegurarse de que los elementos de la página se mantengan proporcionales al tamaño de la fuente, lo que permite un mayor control y flexibilidad en el diseño de la página.
❌ ¿Es buena práctica usar la técnica 62.5%?
La respuesta rápida es no, aunque como muchos desarrolladores la usan vamos a enfocarlo como que simplemente es una técnica que puede resultar útil a algunos desarrolladores porque como ya mencioné previamente, la idea detrás de esta técnica es hacer que el tamaño de la fuente sea más fácil de trabajar en unidades de medida rem, lo que puede resultar útil en algunos casos.
Sin embargo, también es importante tener en cuenta que la técnica del 62.5% no es la única forma de trabajar con unidades de medida rem en CSS, y que hay otras formas de lograr el mismo resultado. Por lo tanto, la decisión de utilizar o no esta técnica dependerá de sus necesidades y preferencias personales en términos de diseño web.
Por lo tanto espero que este artículo te haya servido junto al vídeo en Youtube y sobretodo que te haya gustado 😊