Medidas en CSS

16/Ene/2008 1808

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. 우리카지노 [#]

    Howdy! This article couldn’t be written any better!
    Reading through this post reminds me of my previous roommate!
    He always kept talking about this. I am going to send this post to him.
    Pretty sure he’s going to have a good read. Thanks for sharing!

  2. no deposit bonus [#]

    Sweet blog! I found it while searching on Yahoo News. Do you have any tips on how to
    get listed in Yahoo News? I’ve been trying for a while but I never seem to get there!
    Thanks

  3. gaming [#]

    Wow, wonderful blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your site is
    fantastic, let alone the content!

  4. remedy entertainment [#]

    I have been surfing online more than 3 hours nowadays, but I never discovered any interesting article like
    yours. It is beautiful value sufficient for me. Personally, if all webmasters and bloggers
    made just right content material as you did, the net will be much more useful than ever before.

  5. インター カジノ 入金 不要 ボーナス [#]

    Hello to every single one, it’s truly a fastidious for
    me to pay a visit this website, it contains priceless
    Information.

  6. betway online betting [#]

    What’s up, all the time i used to check weblog posts here early in the morning, because i like to find out
    more and more.

  7. blackjack online [#]

    Hi! I simply wish to offer you a big thumbs up for your excellent info you’ve got
    here on this post. I will be coming back to your blog for
    more soon.

  8. propel lemon water [#]

    Hi there! Would you mind if I share your blog with
    my facebook group? There’s a lot of people that I think
    would really appreciate your content. Please let me know.
    Thanks

CSSLab