EM Vs. PX en CSS

Escrito por laurel storm Google | Traducido por juliana star
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
EM Vs. PX en CSS
EM Vs. PX en CSS. (Comstock/Comstock/Getty Images)

Al diseñar tu sitio web quizá te encuentres con que quieres especificar el tamaño de fuente de tu sitio web en CSS y estar seguro de que aparecerá igual sin importar el explorador que tu lector utilice. La propiedad "font-size" de CSS acepta muchos tipos de valores diferentes; los que se usan de forma más común para darle estilo al texto de los sitios web son los píxeles y los ems. Cualquiera de estos tipos te permitirá darle estilo a tu texto de forma consistente, pero cada uno presenta algunos problemas que tendrás que resolver.

Otras personas están leyendo

Ems

El tamaño em es relativo al tamaño de fuente configurado para el sitio web entero. El tamaño de fuente predeterminado para texto normal, cuando no se especifica otro valor, es de 16 píxeles; por lo tanto configurar el tamaño del texto a 1 em ocasionará que éste sea mostrado con un tamaño de 16 píxeles. Puedes calcular tamaños de fuentes más grandes y pequeños dividiendo el tamaño que desees para tu texto en píxeles entre 16; por ejemplo, si quieres que el texto de un encabezado se muestre en tamaño de 28 píxeles, necesitarás configurarlo a 1,75 ems. Los tamaños em son relativos y por lo tanto tendrán un efecto de cascada; si configuras el tamaño de fuente de todas las etiquetas <div> a 1,2 ems y el tamaño de fuente de todas las listas a 1,2 ems, el tamaño de fuente de cualquier lista contenida dentro de una <div> será igual a 1,44 ems.

Píxeles

Especificar tu tamaño de fuente en píxeles te permite un control preciso sobre el tamaño del texto de tu sitio web. El texto configurado al tamaño de 16 píxeles siempre ocupará 16 píxeles de altura, sin importar la fuente configurada para el texto ni el navegador que tu lector use. Los tamaños en píxeles son absolutos y no en cascada; si configuras el tamaño de fuente de todas las etiquetas <div> a 16 píxeles y el tamaño de fuente de todas las listas a 14 píxeles, el tamaño de fuente de cualquier lista contenida dentro de una <div> seguirá siendo de 14 píxeles.

Problemas con los tamaños en píxeles

Al configurar el tamaño de tu fuente en píxeles se presentan algunos problemas de usabilidad. Las personas que visiten tu sitio web usando Internet Explorer no podrán ajustar el tamaño del texto sin usar la función de acercamiento del explorador; como resultado, los lectores que sufren de problemas de visión no podrán leer el texto de tu sitio web. De forma adicional, el tamaño del texto podría no tener una escala menor apropiada en algunos exploradores de dispositivos móviles, reduciendo su legibilidad cuando tu sitio web se visualice a través de teléfonos inteligentes u otros dispositivos móviles.

Problemas con los tamaños en em

El text configurado en ems puede escalarse hacia arriba y abajo cuando sea necesario; desafortunadamente este tipo de tamaño también causará algunos problemas con Internet Explorer. Al aumentar o disminuir el tamaño del texto su escala aparecerá desproporcionada, resultando en un texto mucho más grande o pequeño de lo que sería apropiado. Sin embargo este problema puede solucionarse fácilmente configurando un tamaño de fuente predeterminado basado en un porcentaje para el cuerpo del sitio web:

body { font-size: 100%; }

Una vez establecida esta base de referencia, cualquier texto configurado en ems será escalado correctamente.

No dejes de ver

Referencias

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