Medidas en CSS

Varias son las unidades de medidas que se pueden utilizar en CSS para definir tamaños a elementos y texto. Durante años para tipografías utilizo pixeles, ya que me parecía tener más control en cuanto a cómo lo despliegan los browsers (salvo IE6 que siempre es diferente del resto). Pero últimamente le he tomado el gusto a em, y he podido controlarlo.

A nuestra disposición, la W3C puso las siguientes unidades de medidas:

Absolutas

  • in (pulgadas)
  • cm (centímetros)
  • mm (milímetros)
  • pt (puntos)
  • pc (picas)
  • px (pixeles)

Las unidades absolutas permiten un contro exacto de la apariencia de la página, siempre y cuando se visualice en el entorno para la cual fue diseñada. A modo de ejemplo, al utilizar px se visualizará diferente en cada resolución de pantalla y la plataforma del usuario que está desplegando ese contenido. Peor si utilizamos pt, ya que depende del tamaño del punto de la resolución de la pantalla.

Relativas

  • em
  • ex

Las unidades relativas dependen de la altura del elemento en el que se usa, aunque en la práctica, es el tamaño de texto definido en las preferencias del browser. Con esto, quien está definiendo estilos mantiene un control relativo ya que depende directamente del tamaño de fuente por defecto del usuario (1em), y a partir de eso, cuanto más grande (1.2em por ej) o menor (0.7em) se visualizará esa letra. Además, permiten su uso en cualquier propiedad de medida (margin, padding) lo que finalmente muestra un diseño proporcionado a la configuración del usuario (por ejemplo, proporcionado entre una pantalla widescreen de 17" y un iPhone).

Porcentaje

  • %

No recomendado para tipografías, ya que su control no es fácilmente determinado por quien construye los estilos ya que necesita de un elemento de referencia (100%). Sólo recomiendo su uso en cajas de layout, determinados por el ancho de la resolución del usuario.

Tabla de equivalencias

Puntos Pixeles Em %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Más tipografías con sIFR

Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para [...]

@font-face y renderizado de texto en Chrome Windows

@font-face y renderizado de texto en Chrome Windows

Este es un bug molesto, donde a partir de algunas tipografías (generalmente de palo seco y delgadas) tienen un pobre renderizado en Chrome en Windows. Buscando una solución me deparo con 4 diferentes; finalmente solo la solución 2 me resulta efectiva pero las dejo todas ya que puede variar con el tipo de tipografía y [...]

Mejor renderizado para textos

Mejor renderizado para textos

Érase una vez una tímida propiedad CSS que pocos conocen y nadie usa, pero que es muy beneficiosa cuando tratamos con textos. Es conocido que cada plataforma -y cada browser- trata a las tipografías a su modo; es así como un font-size de una Arial no es similar no sólo dependiendo de la resolución ó [...]

  1. Gracias caray, hace tiempo que quería algo así, me llevo tu post a mi blog aver si a alguien le sirve, buen día

    Ivan Grimaldo
    16 / Enero / 2008

  2. Interesante, no soy nada pro en CSS, pero lo que acabas de publicar es de harta utilidad.

    saludos

    Aragorn Invent
    16 / Enero / 2008

  3. ¿Cómo recomendáis definir las fuentes en una web para que sea lo más accesible posible?

    ¿todo con em?

    ¿Definis la fuente en el Body por ej :0.75em?

    Webramientas
    17 / Enero / 2008

  4. Excelente es de gran ayuda conocer las unidades y más aún sus equivalencias.

    Hector Rodriguez
    17 / Enero / 2008

  5. Excelente Post, la verdad es que a veces si llega a ser un problema utilizar medidas absolutas en CSS, mas cuando el cliente pretende que su sitio se vea en todas las resoluciones posibles.

    Me ha servido de mucho …

    Daniel
    17 / Enero / 2008

  6. Q buen post george, la tabla está re buena!

    seba
    18 / Enero / 2008

  7. Una pega: resulta que en Windows (no he comprobado otros SO) la unidad EM es proporcional al tamaño definido en el sistema operativo (la del navegador es relativa a ésta).

    He podido comprobar que la tabla de referencias no es válida si hemos cambiado los valores por defecto del SO.

    Un saludo!

    Daniel G. Blázquez
    18 / Enero / 2008

  8. que bien, fijate que estos pequeños tips que cuentas mucha gente que trabaja con css lo sabe, pero mucha gente no, a veces este par de consejillos es lo que hace la diferencia en el porque de las cosas.

    es como por ejemplo no esta de mas decir que en PHP toda la info que se pasa ya sea por $_GET o $_POST es convertido a cadena… jejeje pequeños tips… grandes diferencia, saludos..!

    jose roberto (vevni)
    19 / Enero / 2008

  9. La tabla esta rebuenaaaa !!! Super, uso hace un tiempito ya em para el font-size, pero esta tabla me ha salvado la vida :D

    Gracias

    fearlex
    21 / Enero / 2008

  10. hola antes que nada una felicitacion por la pag… esta bien fregona saca de dudas super bien… hace tiempo que veia eso de los em’s y nomas no entendia el porque je! solo tengo una duda es algo que se me antoja pero nomas no veo por donde… la pregunta. es la siguiente… tengo tres barras en vertical el with de la primera y de la tercera que se maneje fijamente digamos 250px y de la segunda que es la que esta en medio se maneje por porcentaje??? o tansiquiera que la tercera se quede totalmente a la derecha?? se puede??? de antemano grx!!!

    miklown
    07 / Febrero / 2008

  11. Claro que se puede. Pero no entiendo bien, las barras que son? Divs, tablas..
    Creo que los que estás buscando es la propiedad float:right para la tercera.

    franco
    13 / Febrero / 2008

  12. Otro: los porcentajes útiles tambiés cuando incluyes la funcionalidad de otorgar al usuario el control del tamaño tipográfico. Defines los diferentes tamaños con porcentaje y luego por javascript (en wordpress hay plugins para eso por ej) vas incrementando o disminuyendo el porcentaje en grados que especifiques. Eso te ayuda a realizar las modificaciones de tamaño sin perder el diseño entre los distintos elementos.
    Así que si se los recomienda, todo según la necesidad ;)

    franco
    13 / Febrero / 2008

  13. GRACIAS!!!!! Franco!!! en busqueda de un rallo de esperanza :P

    miklown
    16 / Febrero / 2008

  14. Excelente articulo… nunca esta de más una ayuda de memoria.

    Definitivamente de mucha utilidad.

    Saludos

    Fabbianz
    17 / Marzo / 2008

  15. ¡Muy bueno! qué buena investigación, realmente muy útil. Lo voy a publicar en elWebmaster.com.

    ¡Saludos!

    Juan Manuel
    07 / Abril / 2008

  1. [...] el CSSLABS encontre una tablita muy interesante de las medidas y sus equivalencias, esta sirve un buen cuando no ...
    Medidas en CSS
  2. [...] 16, 2008 Vía CSSLab encuentro un interesante articulo sobre medidas en CSS. Con tabla de proporciones equivalentes ...
    Medidas en CSS « Semanticode
  3. [...] invito a visitar el articulo original CSSLab - Medidas en CSS, que tiene mas información al [...]
    Unidades de medidas para Web
  4. [...] csslab.cl, Jorge Epuñan nos trae un repaso de los estándares dispuestos por el w3c, ideal para que [...]
    Repasando las medidas y tamaños en CSS « Un Web jam
  5. [...] csslab.cl, Jorge Epuñan nos trae un repaso de los estándares dispuestos por el w3c, ideal para que [...]
    Repasando las medidas y tamaños en CSS
  6. [...] Un interesante artículo de CSSLab en el que podemos saber las diferentes unidades de medidas en CSS, además de ...
    PixMedial — Design & Geek » Parende a medir en medir en CSS
  7. [...] Un interesante artículo de CSSLab en el que podemos saber las diferentes unidades de medidas en CSS, además de ...
    Aprende a medir en CSS « Blog de mArkO
  8. [...] Enlace: CSSLab - Medidas en CSS [...]
    Unidades de medidas en CSS « Quest’s Blog

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 4 veces
Cargando