Diferencias entre el tamaño de la fuente 'Px' y 'Em'

Escrito por rebecca cullers | Traducido por juan manuel rodriguez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Diferencias entre el tamaño de la fuente 'Px' y 'Em'
El tamaño de la fuente de una información importante. (Sean Gallup/Getty Images News/Getty Images)

La decisión de codificar tus tamaños de fuente, ya sea en "px" o "em" implica hacer un balance entre la preferencia ascética y la legibilidad. Tu elección tiene mucho que ver con el propósito de la página web y quiénes verán las páginas. Ten en cuenta las ventajas de cada método y las necesidades específicas de tu sitio antes de elegir el método más adecuado para tu diseño.

Otras personas están leyendo

Beneficios de 'Em'

El "em" es una unidad de medida en tipografía derivada originalmente del ancho de una M mayúscula en una fuente a un tamaño de punto en particular. Si Arial establecida en 10 puntos equivale a un em, entonces dos eme equivalen a 20 puntos. En las hojas de estilo en cascada, el em se utiliza como unidad escalable donde un em es igual al tamaño de fuente estándar. Esto permite el diseño para mantener la jerarquía, incluso cuando se ve en un teléfono móvil o una pantalla grande. También permite a los usuarios con discapacidad visual que hayan establecido su tamaño por defecto más grande ver la página con todas las fuentes en el tamaño relativo correcto. El W3C (W3C, del inglés World Wide Web Consortium), o consorcio mundial Web, recomienda el uso de ems como una buena práctica debido a su escalabilidad.

Beneficios de 'Px'

"Px" es una unidad que se fija en el tamaño. Un píxel (px) es igual a un píxel en la pantalla. El tipo de letra de 12 puntos estándar es igual a aproximadamente 16 px. Esta unidad no escala para dispositivos móviles más pequeños o para usuarios con deficiencias visuales, pero tiene muchos beneficios estéticos. Ofrece al diseñador el control completo del diseño sobre el tamaño de la letra, lo que garantiza que el tipo no se saldrá de la proporción con el resto de elementos de diseño de la página. Si tienes el tipo de una imagen, utilizar px es esencial para asegurar que la jerarquía de fuentes en el diseño se mantenga, independientemente del dispositivo con el que visites tu sitio o de la configuración del navegador del usuario.

Otras unidades

Hay otras dos opciones para configurar las fuentes en CSS: punto y porcentaje. Los puntos, como píxeles, no escalares. En general, 12 puntos equivale al 100%. Los puntos se basan en el tamaño de la letra impresa, no el tamaño del píxel en la pantalla. El resultado es que las mediciones no son iguales.

El porcentaje, como ems, tendrá un efecto multiplicador, pero no en la misma forma que como el ems. La diferencia en el cálculo del tamaño de entre 200% y dos ems depende del navegador. Sin embargo, si calculas mal con ems o porcentajes, el usuario puede cambiar el texto para ser un mejor tamaño.

Consideración de la audiencia y el propósito

Si estás diseñando un sitio para un público joven o viejo que podría tener problemas de legibilidad, es importante utilizar una unidad escalable como ems. El uso de ems también es clave si tu sitio se puede ver en los dispositivos móviles. Sin embargo, si los diseñadores gráficos son tu público o el propósito del sitio es más acerca de la estética visual que sobre el contenido, utiliza una unidad fija como píxeles para asegurarte de que la jerarquía de fuente se mantenga en cualquier situación.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles