hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Por qué querrás utilizar unidades relativas como rem y em ... o por qué no

1100 palabras
4 minutos
April 10, 2020
blogcss

Cuánta gente cambia el tamaño de texto en la configuración del navegador? Nadie lo sabe, en función de la respuesta querrás utilizar rem em, o seguir con los px

  1. Lo que prometen
  2. El problema
  3. Accesibilidad
  4. Qué elegir
  5. Conclusión

Lo que prometen

A primera vista y en una frase, todos deberíamos utilizar unidades relativas y escalables, básicamente porque lo que "prometen" es muy interesante

Y qué prometen?

Prometen dos cosas

  1. Definir todas las medidas relativas a un elemento, y si ese elemento cambia todo se ajusta a ese cambio mágicamente y sin tener que hacer nada más
  2. Lo mismo de arriba, aplicado a accesibilidad, esto es, das el poder al usuario con necesidades visuales especiales

Difícil decir que no a estas dos promesas, al menos a la segunda ya que ejemplos prácticos de lo primero ... difícil

Pero como todo en la vida, hay que matizar

Pero antes, cómo funcionan?

Muy brevemente, un rem representa el tamaño por defecto de la fuente, que es de 16px (a no ser que el usuario lo cambie en la configuración del navegador)

Y dónde se supone que deben utilizarse?

Todo lo que quieras que escale, y aquí hay distintas escuelas

  • Hay cosas que no querrás que escalen, como un border, un divisor o un box-shadow

  • Hay otras que sí que querrás que escalen como un line-height, letter-spacing o el font-size

  • Y otras donde hay quien prefiere que sí, y hay quien prefiere que no, como el padding o el margin

Y cuándo utilizar em en lugar de rem? Cuando quieras algo relativo al tamaño de fuente del mismo elemento o de cualquier elemento padre del que heredará

Ejemplo práctico, cuando tienes un elemento padre que tiene tamaños de fuente distintos en función de ciertas media query, si defines algún hijo con un tamaño de 1.2em, ese tamaño siempre se ajustará al tamaño de base (el que es responsive) por lo que estarás bien cubierto

El problema

Y entonces, cuál es el problema?

Al definir las medidas con unidades relativas, hay 2 problemas:

- El primero, que no tienes un control preciso sobre los espacios, ya que estos cambian en función del tamaño de fuente, y esto normalmente representa un problema

Por ejemplo, quieres que un espacio entre paneles se modifique al cambiar el tamaño de fuente? O el espacio entre botones? O el espacio entre la letra i el borde de su caja?

Esto puede representar un problema cuando quieras cambiar tu tipografía ya que todo tu layout puede cambiar y te tocará revisarlo

Por otro lado, cuando el usuario augmenta el tamaño de letra, la consecuencia de tener esos espacios en px es grave? Puedes comprobarlo tu mismo, un espacio entre párrafos de 100px se convertiría en un espacio de 180px si lo hubieras definido como 2.5rem

Tu diseño sí se ve afectado, pero el impacto es bajo y la accesibilidad en la gran mayoría de casos seguirá existiendo (aunque sí es verdad que a esos usuarios les estarás dando un diseño distinto, por lo tanto estarás discriminando en ese sentido)

- El segundo problema, que mezclar unidades siempre te complica la vida

Complicarla en el sentido de que tienes más cosas a mirar, menos simplicidad

Y lo cierto es que nuestro cerebro entiende mejor un espacio de 100px que un espacio de 4.2rem

Accesibilidad

Al final el uso de medidas escalables se reduce a la accesibilidad, ya que es la única vez donde un usuario querrá cambiar el tamaño de tu página web

Ojo, que por accesibilidad no me limito a personas con necesidades especiales, a mi que me gusta la letra algo pequeña voy con un zoom del 90% en mi portátil de 1080p

Y esto que acabo de decir es clave

Qué hace la gente que quiere cambiar el tamaño de las páginas web?

La respuesta no está tan clara

Los usuarios que quieran ampliar el texto pueden hacer 3 cosas

  1. Ampliar el texto base de su navegador
  2. Hacer zoom en las páginas que quieran hacer zoom
  3. Ampliar el texto base de todo su sistema operativo

Y todas estas posibilidades son reales?

En otras palabras, y esto es lo que se cuestiona Gilbertson o Benfrain, quien escogería la opción número 1 o 2?

Si tienes dificultades visuales, lo suyo es que las tengas todo el rato, no sólo cuando utilices el navegador

Por lo tanto, quién augmentará el tamaño del texto en el navegador pero dejará igual el tamaño del texto en el sistema operativo?

Y quién hará zoom en el navegador?

Aunque podría parecer obvio, lo cierto es que quien desconozca que se puede hacer zoom posiblemente intentará cambiar el tamaño de letra, o un administrador de sistemas quizá quiera dejar por defecto esa posibilidad en lugar de aplicar un zoom permanente (algo que se puede activar de forma accidental y que quizá interese que esté deshabilitado)

Y no es un tema menor

  • Si se hace zoom, no pasa nada, los navegadores escalan el contenido perfectamente aunque éste esté definido con px

  • Pero si se cambia el tamaño con la configuración del navegador, si el texto está con px éste no se inmutará

En la práctica, nadie en su sano juicio utilizará sólo la configuración del navegador ya que hay páginas que siguen utilizando px (y a estas alturas no creo que tengan pendiente cambiarlo)

Hablo de sitios que acabo de testear ahora y que no responden a este cambio:

  • Amazon (no responde a cambiar el tamaño de texto)
  • Facebook (sí responde)
  • Twitter (no responde)
  • Youtube (no responde)
  • Google (algo responde, la mayoría no)
  • Wikipedia (sí responde)
  • Medium (no responde)
  • StackOverflow (no responde)

Qué elegir

Entonces, qué elegir?

Podemos quedarnos con las unidades escalables, y hacer algo muy listo como lo que propone chiamakaikeanyi o engageinteractive (ninguno de los dos será el enlace original, pero no lo he encontrado)

Esto es, definir la fuente en un porcentaje base de 62.5% para así conseguir que 1rem sea lo mismo que 10px, en lugar de los 16px de siempre

css
html {
font-size: 62.5%;
}
body {
font-size: 16px; /* fallback para navegadores que no entiendan rem */
font-size: 1.6rem;
}

Es lo mismo que si pusieramos un tamaño de fuente base de font-size: 10px, pero en lugar de hacerlo en px lo hacemos en un porcentaje y así permitimos el escalado

Ventajas? Que si tenemos un array de fuentes en theme-ui de [12, 14, 16, 18, 20] que se corresponderían a px, para hacer el equivalente en rem es algo tan intuitivo como escribir ['1.2rem', '1.4rem', '1.6rem', '1.8rem', '2.0rem']

Y si quieres afinar luego con componentes que no quieres definir globalmente sino en el mismo componente?

Nada más sencillo que utilizar em para así adaptar el contenido en función del tamaño base y responsive definido antes

Conclusión

Por lo tanto, resumiendo

  • Si utilizas px sigues permitiendo al usuario escalar tu texto con el zoom o con el escalado de todo el sistema operativo, lo que muy posiblemente cubra la gran mayor parte de accesibilidad del planeta
  • Si utilizas rem en el font-size, permites también que el usuario pueda cambiar el tamaño del texto en su navegador
  • El coste de hacer esto es abandonar la comodidad de trabajar con px para pasar a utilizar unidades menos evidentes, lo cual implica mayor lentitud al programar y mayor dificultad al mantener
  • Pero con la solución de arriba, lo cierto es que el punto anterior pierde muchos enteros y quedan pocas excusas para no utilizar rem
  • Y, sobre todo, que los px seguirán teniendo su uso en elementos que no queremos que escalen

*Tienes un resumen muy completo en 24a11y, y ojo con definir breakpoints con rem, no funcionan bien con Safari con lo que lo suyo es utilizar em

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]