Tuétano, creatividad que cala hasta los huesos


Equivalencias entre pixeles, ems, porcentajes y pixeles
26.mayo.2008, 3:27 pm
Filed under: Recursos

En Dreamweaver podemos definir medidas con diferentes unidades. Lo más usual en un diseñador que viene de programas para print (Ilustrator, InDesign) es que este acostumbrado a trabajar con puntos, pero en web es recomendable trabajar con otro tipo de medias, menos rígidas, como son porcentajes y ems, ya que si armamos una página para que se vea en una resolución de pantalla de 800 x 600 y ponemos medidas de fuente en puntos o pixeles, cuando se visualice nuestro sitio en monitores de 1480 pixeles de ancho o más, la letra se verá sumamente pequeña, en cambio, si usamos medidas basadas en porcentajes o ems, esas medidas serán “elásticas” y cambiarán su tamaño dependiendo del monitor donde se este viendo la página.

Después del salto les pongo una tabla de equivalencias aproximadas entre éstas cuatro medidas que me encontré en webadictos qué a su vez la sacaron de WorldTechies. Ya saben esto de la RED trabajando al 100:

Pts Px Em Porcentaje
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%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%
Anuncios

5 comentarios so far
Deja un comentario

muy util la tabla, la andaba buscando 🙂
gracias

Comentario por miguel

Muchas gracias por la equivalencia

Comentario por DrMabuse

Buena información me saco de un problema 🙂

Comentario por Tcc Brian

Muchas gracias por haber creado esta tabla es muy útil. Mil gracias por el tiempo que te tomaste.

Comentario por Zezy

Gracias por compartir conocimiento. 😀

Comentario por pato




Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s



A %d blogueros les gusta esto: