Tipografía: al determinar si debe usar píxeles o em para un tamaño de fuente, ¿qué debe tener en cuenta antes de elegir?

Los em se basan básicamente en un tamaño de píxel de todos modos.

La forma en que funcionan es que tiene un tamaño base, digamos 16px = 1em.

Entonces es una ecuación simple obtener otros tamaños 2em = 32px, 0.5em = 8px.

Debería diseñar en em, la razón principal es esta: el cliente de repente dice ‘el texto es demasiado pequeño, ¿puede agrandar todo el texto’?

Intenta hacerlo con píxeles, ¡es una pesadilla!

La otra belleza de los em es que puedes combinarlos con tamaños porcentuales.

Por lo tanto, puede crear un sitio que permita a los usuarios elegir su tamaño de fuente.

JavaScript simple para cambiar el tamaño del cuerpo de 100-120% y mágicamente todo su sitio se ajusta.

No use nada más (no use% age para otra cosa que no sea el ajuste del tamaño base, ya que tienen algunas propiedades de escala bastante extrañas).

Finalmente, los em son el camino a seguir debido al cambio en la densidad de píxeles de las pantallas: son mucho más fáciles de administrar cuando tiene pantallas de densidad * 2 o densidad * 4.

Como ‘bono’ final, usar em significa que si piensas ‘Quiero que este texto tenga el mismo tamaño que x’, ¡generalmente es más fácil recordar que hiciste algo 1.2em que 22px!

Si su sitio es receptivo, use ems.
Si su sitio no lo es, vaya a píxeles.

Ems a menudo se consideran más “modernos” pero, en mi opinión, ambos funcionan bien.

Solo asegúrate de mantenerte consistente con tus unidades, podría ser un problema depurar si usas una combinación.

Solo una nota, 1em es de aproximadamente 16px y los ems a veces tienen un problema de conexión en cascada a tamaños gigantes porque se basan en su elemento padre. Use el “rem” (root em) para resolver eso. Los rems siempre serán del mismo tamaño.

Todavía soy nuevo en diseño web, pero por lo que aprendí recientemente sé que:

  • em: mida el tamaño de la fuente en em para permitir que la fuente responda. El tamaño del em es relativo al tamaño del navegador (corrígeme si me equivoco) y cambiará de tamaño con la página.
  • px: los píxeles no responden y tendrán el mismo tamaño, independientemente del tamaño del navegador. Sin embargo, obtienes un control más granular con el tamaño de fuente usando píxeles.

em = Soporte receptivo y mejores prácticas.
px = Tamaño granular y más control.