Tipos de tamaños de fuente en web y por qué usar REM

introducción

Hoy vamos a hablar de unidades de medida que un diseñador que trabaje para web debe tener en cuenta

pero antes un dato curioso importante:

El tamaño mínimo recomendado para el texto en una página web es de 16 píxeles. Esto se debe a que el tamaño de fuente de 16 píxeles es legible en la mayoría de los dispositivos y pantallas sin ser demasiado pequeño o difícil de leer.

Sin embargo, es importante tener en cuenta que el tamaño mínimo adecuado para el texto puede variar en función de varios factores, como el tipo de fuente utilizado, el diseño de la página y el público objetivo. Por ejemplo, si está creando una página web para personas mayores o con discapacidad visual, es posible que desee utilizar un tamaño de fuente mayor para garantizar la legibilidad.

En general, es importante asegurarse de que el tamaño de fuente es legible y cómodo de leer, ya que un tamaño de fuente demasiado pequeño puede ser difícil de leer y puede disuadir a los visitantes de la página. Al mismo tiempo, es importante no utilizar un tamaño de fuente demasiado grande, ya que puede hacer que la página se vea desorganizada y difícil de navegar.

Dicho esto… vamos al meollo.

tipos de unidades de medida de tamaño de fuente usados en diseño web

En diseño web, hay varias unidades de medida que se pueden utilizar para especificar el tamaño de fuente de un elemento. Algunas de las unidades de medida más comunes son:

1. Píxeles (px): los píxeles son una unidad de medida absoluta que se utiliza para especificar el tamaño de fuente de un elemento en términos de píxeles. Por ejemplo, si se establece el tamaño de fuente de un elemento en 16 píxeles, el tamaño de fuente del elemento será de 16 píxeles independientemente del tamaño de la pantalla o del dispositivo en el que se visualice.
2. Puntos (pt): los puntos son una unidad de medida utilizada en la tipografía y se utilizan a menudo para especificar el tamaño de fuente en impresión. En diseño web, se pueden utilizar puntos para especificar el tamaño de fuente, pero suelen ser menos precisos que otros tipos de unidades de medida debido a las diferencias en la resolución de pantalla y la forma en que los navegadores interpretan los puntos.
3. EM: la unidad EM se refiere al tamaño de fuente del elemento padre del elemento en el que se está utilizando. Por ejemplo, si el elemento padre tiene un tamaño de fuente de 16 píxeles y se establece el tamaño de fuente de un elemento hijo en 2 EM, el tamaño de fuente del elemento hijo será de 32 píxeles (2 x 16 = 32).
4. REM: la unidad REM se refiere al tamaño de fuente del elemento raíz de la página, que es el elemento HTML. Por ejemplo, si se establece el tamaño de fuente del elemento raíz en 16 píxeles y se establece el tamaño de fuente de un elemento en 2 REM, el tamaño de fuente del elemento será de 32 píxeles (2 x 16 = 32).
5. Porcentajes (%): los porcentajes se pueden utilizar para especificar el tamaño de fuente en términos del tamaño de fuente del elemento padre. Por ejemplo, si el tamaño de fuente del elemento padre es de 16 píxeles y se establece el tamaño de fuente de un elemento hijo en 200%, el tamaño de fuente del elemento hijo será de 32 píxeles (200% x 16 píxeles = 32 píxeles).

Cada unidad de medida tiene sus propias ventajas y desventajas y puede ser más adecuada para determinadas situaciones. Es importante elegir la unidad de medida adecuada en función de las neces

¿qué es rem y em y en que se diferencian?

REM (Root EM) y EM son dos unidades de medida utilizadas en la tipografía y el diseño web para especificar tamaños de fuente y espaciado.

La unidad REM se refiere al tamaño de fuente del elemento raíz de la página, que es el elemento HTML. Como ya se ejemplifico, si se establece el tamaño de fuente del elemento raíz en 16 píxeles y se establece el tamaño de fuente de un elemento en 2 REM, el tamaño de fuente del elemento será de 32 píxeles (2 x 16 = 32).

Por otro lado, la unidad EM se refiere al tamaño de fuente del elemento padre del elemento en el que se está utilizando. Como ya se ejemplifico, si el elemento padre tiene un tamaño de fuente de 16 píxeles y se establece el tamaño de fuente de un elemento hijo en 2 EM, el tamaño de fuente del elemento hijo será de 32 píxeles (2 x 16 = 32).

Una de las principales diferencias entre REM y EM es que REM siempre se refiere al tamaño de fuente del elemento raíz, mientras que EM se refiere al tamaño de fuente del elemento padre. Esto significa que si se cambia el tamaño de fuente del elemento raíz en una página, todos los elementos que utilizan REM cambiarán su tamaño de fuente en consecuencia, mientras que los elementos que utilizan EM mantendrán su tamaño de fuente original basado en el tamaño de fuente del elemento padre.

Otra diferencia importante es que REM tiene un comportamiento más predecible y consistente en diferentes navegadores y dispositivos, mientras que EM puede variar en su comportamiento debido a la forma en que los navegadores y dispositivos interpretan el tamaño de fuente del elemento padre.

En resumen, REM es una unidad de medida más consistente y predecible en términos de tamaño de fuente y espaciado, mientras que EM se basa en el tamaño de fuente del elemento padre y puede tener un comportamiento menos predecible en diferentes navegadores y dispositivos.

¿es mejor rem o em?

En términos generales, se recomienda utilizar REM para la mayoría de las aplicaciones de diseño web. Esto se debe a que REM tiene un comportamiento más predecible y consistente en diferentes navegadores y dispositivos, lo que puede ayudar a evitar problemas de diseño y asegurar que el contenido se muestre de manera consistente en todos los dispositivos.

Otra ventaja de utilizar REM es que es más fácil de usar y mantener a largo plazo. Al utilizar REM, puede establecer una escala de tamaños de fuente y espaciado basada en el tamaño de fuente del elemento raíz, lo que hace que sea más fácil ajustar los tamaños de fuente y espaciado en toda la página simplemente modificando el tamaño de fuente del elemento raíz.

Sin embargo, hay algunas situaciones en las que puede ser útil utilizar EM. Por ejemplo, si desea que un elemento hijo tenga un tamaño de fuente que sea un porcentaje del tamaño de fuente del elemento padre, EM puede ser la mejor opción. Por ejemplo, si desea que un elemento hijo tenga el doble del tamaño de fuente del elemento padre, puede utilizar 2 EM. Sin embargo, es importante tener en cuenta que EM puede tener un comportamiento menos predecible y consistente en diferentes navegadores y dispositivos, por lo que es posible que deba realizar pruebas adicionales para asegurarse de que el diseño se vea correctamente en todos los dispositivos.

En resumen, REM es la unidad de medida más recomendada para la mayoría de las aplicaciones de diseño web debido a su comportamiento predecible y consistente, mientras que EM puede ser útil en situaciones específicas en las que se desee basar el tamaño de fuente o el espaciado en el tamaño de fuente del elemento padre.