Medidas en CSS

16/ene/2008 23

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%

Comentarios

  1. Ivan Grimaldo [#]

    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

  2. Medidas en CSS [#]

    [...] el CSSLABS encontre una tablita muy interesante de las medidas y sus equivalencias, esta sirve un buen cuando no eres bueno con las [...]

  3. Medidas en CSS « Semanticode [#]

    [...] 16, 2008 Vía CSSLab encuentro un interesante articulo sobre medidas en CSS. Con tabla de proporciones equivalentes [...]

  4. Aragorn Invent [#]

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

    saludos

  5. Webramientas [#]

    ¿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?

  6. Hector Rodriguez [#]

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

  7. Daniel [#]

    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 …

  8. seba [#]

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

  9. Daniel G. Blázquez [#]

    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!

  10. jose roberto (vevni) [#]

    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..!

  11. fearlex [#]

    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

  12. miklown [#]

    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!!!

  13. franco [#]

    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.

  14. franco [#]

    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 ;)

  15. miklown [#]

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

  16. Fabbianz [#]

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

    Definitivamente de mucha utilidad.

    Saludos

  17. Unidades de medidas para Web [#]

    [...] invito a visitar el articulo original CSSLab – Medidas en CSS, que tiene mas información al [...]

  18. Juan Manuel [#]

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

    ¡Saludos!

  19. Repasando las medidas y tamaños en CSS « Un Web jam [#]

    [...] csslab.cl, Jorge Epuñan nos trae un repaso de los estándares dispuestos por el w3c, ideal para que [...]

  20. Repasando las medidas y tamaños en CSS [#]

    [...] csslab.cl, Jorge Epuñan nos trae un repaso de los estándares dispuestos por el w3c, ideal para que [...]

  21. PixMedial — Design & Geek » Parende a medir en medir en CSS [#]

    [...] Un interesante artículo de CSSLab en el que podemos saber las diferentes unidades de medidas en CSS, además de saber las medidas sabrás en que poder ocupar ciertas unidades de y aplicarlas en textos, layouts, margenes, etc. una guía recomendada para compensar con CSS.Medidas en CSS [...]

  22. Aprende a medir en CSS « Blog de mArkO [#]

    [...] Un interesante artículo de CSSLab en el que podemos saber las diferentes unidades de medidas en CSS, además de saber las medidas sabrás en que poder ocupar ciertas unidades de y aplicarlas en textos, layouts, margenes, etc. una guía recomendada para compensar con CSS. Medidas en CSS [...]

  23. Unidades de medidas en CSS « Quest’s Blog [#]

    [...] Enlace: CSSLab – Medidas en CSS [...]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab