¿Qué unidad de font-size usar?

Front End Chile
Nov 7 · 4 min read

El tamaño de la fuente juega un papel muy importante en la web. Font-Size define el tamaño de los caracteres que se muestran en una página web.

Una fuente, por defecto, de cualquier página web es 16px, hasta que definamos cualquier tamaño de fuente personalizado.

A continuación explicaré 4 unidades para font-size, PX, EM, REM y VW:

La unidad píxel (px)

La unidad de píxeles (px) es una de las medidas que más utilizadas cuando comenzamos a aprender CSS y una de las primera que se nos viene a la cabeza cuando queremos cambiar el tamaño de un texto.

Si hablamos de pixeles en un diseño responsive, esta unidad no es la mejor opción, debido a la accesibilidad, ya que los píxeles son unidades absolutas, lo que significa que 16 píxeles siempre serán 16 píxeles, independientemente de la pantalla que estemos utilizando o el dispositivo que el usuario tenga en frente.

Si bien, esto nos da un control más preciso, debemos también darle al usuario la capacidad de aumentar el tamaño de la fuente del texto, ¿por qué te has puesto a pensar si el usuario no tiene buena vista?

Cuando usamos unidades absolutas como píxeles, evitamos que el tamaño de la fuente cambie si se hace zoom o si se cambia el tamaño de la fuente predeterminado del navegador.

Es necesario tener en cuenta: Cuando se define el tamaño de la fuente en píxeles (px), es posible que deba escribir algunos CSS adicionales para manejar la página web de manera responsive, declarándolas en cada punto de quiebre.

La unidad EM

La unidad EM es una unidad relativa, lo que significa que su tamaño final depende de otros factores. El tamaño de la fuente en el caso de EM se basa en el elemento padre o su antecedente directo que tiene un font-size definido explícitamente.

Por ejemplo, un elemento configurado en 2em, con un padre configurado en 16px , dará como resultado un tamaño de fuente de 2 * 16px , es decir, 32px .

Esta dependencia puede ser increíble, pero también puede tener complicaciones si tiene varias capas, es decir, múltiples elementos primarios con un tamaño de fuente definido.

Lo más importante que debe saber con EM es que siempre depende del tamaño de fuente de su padre, así que, si está definiendo la fuente en elementos anidados, debe tener esto en cuenta para establecer el tamaño de fuente deseado.

La unidad REM (Root Em)

La unidad REM se inventó para superar el problema de “em” con elementos anidados. Si bien ambos son relativos, REM no se basa en elementos padres, si no, es relativo al elemento raíz HTML.

Esto generalmente funciona de la siguiente manera: Se establece un font-size de: 100% para su elemento HTML (que corresponde a 16px , ya configurado en la mayoría de los navegadores). A continuación, ajustamos un elemento que tiene un font-size de 1.5rem de tamaño, lo que da como resultado: 1,5 * 16px = 24px.

REM es fácil de usar, sobre todo cuando se trata de la accesibilidad de un sitio web, aunque si es necesario usar un poco de matemática para calcular y obtener el tamaño de fuente deseado.

La unidad de Ancho de Ventana Gráfica (vw)

La unidad Ancho de Ventana Gráfica (y Altura, representada por vh ) se basa en el ancho y la altura de un dispositivo o navegador del usuario.

Es decir, una unidad de Viewport equivale al 1% del total de la ventana de visualización del dispositivo, entonces, 1vw desde un teléfono con pantalla de 375px será igual a 3.75px , y 10.24px en una computadora de pantalla panorámica de 1024px.

El uso de unidades vw o vh para el tamaño de fuente permite que tenga lugar una escala de texto sin problemas. Sin embargo, esto solo funciona hasta cierto punto. El escalado directo conducirá a tamaños extremos. Por otra parte, hay un problema de accesibilidad significativa como el uso de unidades de ventana gráfica afectos al zoom. Para evitar esto necesitamos algo de ayuda:

Usando ‘calc ()’

Para evitar los problemas que anteriormente expusimos, podemos usar calc().

calc()en CSS nos permite usar valores calculados para unidades. Al combinar las unidades de ventana gráfica con px, podemos igualar y controlar la tasa de crecimiento.

Por ejemplo:

h1 { 
font-size: calc (20px + 0.5vw);
}

Disminuirá la tasa de crecimiento mientras que:

h1 { 
font-size: calc (20px + 1.5vw);
}

lo aumentará.

Esto también soluciona el problema de accesibilidad ya que el zoom del navegador puede anclarse en el tamaño de la unidad que no es de ventana.

Si está utilizando SASS, puedes agregar su calc() a un mixin para automatizarlo.


¿Qué unidad de font-size usas o cuál usarás en tus proyectos o desarrollos web? Cuéntame en los comentarios…

Y si disfrutaste de este artículo, agradecería que lo compartieras con tus colegas, amigos o con todo el mundo.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade