Micaela 23 de abril de 2009 a las 13.08
   Imprimir artículo
elWebmaster.com

Cómo determinar el tamaño de fuente con CSS (¿px, em, %, pt o keyword?)


tipografia2Cuando se trata de programar el tamaño de una fuente en CSS, tenemos varias opciones. Cada una de las opciones tiene una función específica y algunas ventajas y desventajas según el uso que se le dé.

Para empezar, puedes aplicar una palabra clave como p { font-size: small; } o un valor númerico. Si decides esta segunda opción, necesitarás declarar una unidad de medida fija que a su vez ofrece cuatro opciones: px, em, % o pt. ¿Cuál es mejor? Depende… Hechemos un vistazo.

Palabra clave

Las opciones válidas para programar el tamaño de la fuente en palabras claves son: xx-small, x-small, small, medium, large, x-large, y xx-large, siendo xx-small el tamaño más pequeño y xx-large el más grande.

Pero también se pueden utilizar palabras claves relativas a otras medidas, como smaller (más pequeño) y larger (más grande). Esto es muy útil cuando queremos que una fuente disminuya o aumente su tamaño en determinadas situaciones.

Sorprendentemente, programar el tamaño por medio de palabras claves es bastante consistente a través de los distintos navegadores y plataformas.

font01Noten que si bien son bastante parecidas, existen diferencias en los sitios donde las líneas se rompen y en el total de párrafos.

Una de las técnicas más populares es programar un tamaño de fuente clave en el elemento cuerpo, y luego usar un tamaño de fuente relativo en el resto de la página. Esto brinda la posibilidad de hacer más grande o pequeño el tamaño de la fuente de forma muy sencilla y lograr que el sitio web aumente o disminuya su tamaño consistentemente.

Sin embargo, las palabras claves no ofrecen un control muy preciso sobre nuestra tipografía porque las opciones son bastante limitadas.

px: píxel

Si necesitas un control más detallado, programar el tamaño de las fuentes en valor de píxeles es una opción excelente. En una pantalla de computadora, no hay nada más preciso que un píxel.

Al utilizar esta técnica estás literalmente diciéndole al navegador el número exacto de píxeles que deseas que mida la fuente.

font02Sin importar de qué navegador o plataforma se trate, una fuente programada en 14px medirá siempre 14px. Igualmente, puede que se presenten algunas variaciones, pero el tamaño seguirá siendo más consistente que mediante la implementación de palabras claves.

Los pixeles han tenido una mala movida en el pasado en lo que respecta a la accesibilidad y la usabilidad. En IE6 y versiones inferiores, los tamaños de fuentes programados en píxeles no pueden ser reprogramados por el usuario.

Programar el tamaño de la fuente en píxeles es el método más preciso, pero es necesario tener en cuenta el número de visitantes que todavía están utilizando IE6.

em: ancho de la letra M

Los valores Em son los más difíciles para trabajar, probablemente debido a que el concepto de este valor es algo bastante abstracto y arbitrario. Em no es otra cosa que el ancho de la M, la letra más ancha y la que ocupa el ancho total de la caja contenedora de cada letra. Pero ¿Qué clase de referencia es esa?

Bueno, esta es la cuestión: en CSS, 1 em es igual al tamaño de fuente actual del elemento en cuestión. Si no has programador un tamaño de fuente en ninguna parte del sitio, será el que trae el navegador por defecto, el cuál será probablemente 16px. Así que por defecto 1em=16px. Si programas el tamaño general de la fuente de body en 20px, entonces 1em=20px.

font03Las cosas se empiezan a complicar más con em cuando empezamos a programar tamaños de texto más complejos. Por ejemplo, si necesitamos un titular con un tamaño de fuente más grande, por lo que programamos h1 { font-size: 2em; } Ese “2″ es esencialmente un multiplicador del valor em actual. Pero a menudo es necesario redondear los números.

El método más popular al trabajar con valores em es programar el tamaño de la fuente del cuerpo en 62.5%. Porque al ser el tamaño de fuente por defecto16px, esto hará que nuestra fuente sea de 10px. Y utilizar 10 como multiplicador es mucho más fácil que utilizar 16. Así si necesitas como tamaño de fuente 18px, utilizarás1.8em.

Pero ¿Porqué molestarse con todo este tema de los em, cuando no es más que una abstracción del uso de píxeles? Existen 3 posibles razones.

  1. Son reprogramables en IE6, algo muy importante en caso que desees trabajar con píxeles pero no quieras problemas de accesibilidad.
  2. Tiene mejor relación con otros sitios ya que los sitios de ancho elástico utilizan valores Em para todo, lo que hace que el sitio sea esencialmente “zoomeable”. Los Em tienen una relación directa unos entre otros en este sentido.
  3. Em hereda en cascada. Esta es una cualidad muy buena pero con un potencial problema. Cada valor em es relativo al valor de su padre. Si estás utilizando em como una sustitución directa de los valores de píxeles, esto puede causar problemas. Por ejemplo, puede que programes tus tamaños de fuente tanto “p” (paragraph) y “li” (list item) para que sean 1.2em. Hoy luce genial, pero mañana se publica algún contenido en el sitio que posee un párrafo dentro de una lista de ítems. Esos dos valores harán cascada (1.2 x 1.2) y esa lista de items será más grande en tamaño de fuente que cualquiera de las otras. Todo lo que se podrá hacer en este caso es remover la etiqueta.

%: porcentaje

Los porcentajes es bastante obvio cómo funcionan. Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.

Al igual que los em, los porcentajes son relativos a otras medidas y también hacen cascada.

font04Una técnica popular al utilizar porcentajes en el tamaño de fuente es programar un tamaño de fuente razonable general para todo el sitio y luego usar porcentajes para cada estilo diferente.

pt: puntos

La última unidad de medida con la que es posible declarar el tamaño de una fuente es en valor de puntos. Los valores punto son sólo para CSS impreso. Un punto es una unidad de medida usada para la tinta en el papel tipográfico y muy común de ver en programas de edición de texto como Microsoft Word o el Writer de OpenOffice.org.

La unidad de medida máxima que debería declararse en puntos es 72pts = una pulgada. Esta pulgada es igual a la pulgada que puedes medir con una regla. No se trata de pulgadas en una pantalla, que es algo totalmente arbitrario basado en la resolución.

Al igual que los píxeles son lo más preciso para la programación del tamaño de la fuente en un monitor, los puntos lo son en un papel.

Fuente: CSS Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (13)

  1. Alexis dice:

    Buen aporte!
    Probare el uso de % porque hasta ahora uso sólo px.
    Interesante también lo de pt para impresión, será de utilidad en su momento.

  2. Jonathan Quintero dice:

    Muchas gracias por este aporte. Todo muy bien explicado. Sobre todo la unidad em, siempre supe que era relativa al tamaño del tamaño de letra definido, pero no sabía como funcionaba en sí.

  3. Luis Fdez dice:

    Según las normas wai aa los tamaños en PX no son correctos, pero qué pasa si el usuario (a mi me ha pasado) tiene el navegador con un tamaño de fuente distinta a 16x? no es mejor poner 16x como tamaño de fuente del cuerpo principal para evitar estos problemas?

  4. paola maricel robles dice:

    necesito saber qué es cuerpo 12 en la narrativa. no tengo experiencia y lo relaciono con el tamaño de la fuente.tengo que presentar un trabajo en cuerpo 12 sobre papél A 4, preciso despejar esa duda. sería de gran ayuda si me podrían aportar este dato. desde ya muchas gracias. maricel

  5. Morton dice:

    Hola, Paola

    Efectivamente, en tipografía, el cuerpo se refiere al tamaño de la fuente.

    Saludos!

  6. Emiliano dice:

    Hola yo queria hacer una pregunta!!…me podrian dar una respuesta de ¿por q el tamaño del pixel es relativo?..se los agradeceria mucho lo necesito para un trabajo!!..GRACIAAS!!

  7. Alejandra dice:

    Hola Emiliano. Justamente, el tamaño del pixel no es relativo! Es fijo. 1 píxel es un 1 píxel.

    Las medidas relativas son las de porcentaje y “em”. Saludos.

  8. Tamaños de fuente en CSS: Tamaños relativos, tamaños fijos, diferencia entre px y em y ventajas de accesibilidad « El gran artista universal dice:

    […] artículos de otros lados, pero hoy haré una excepción. Este artículo que han traducido en el blog del webmaster habla sobre las diferentes maneras de programar los tamaños de fuentes en nuestras paginas web. […]

  9. Jon dice:

    Gracias por la traducción del artículo, de lo mas útil que he leído ultimamente.

  10. Ignacio dice:

    gracias…
    Buen artículo, me ha aclarado bastante

  11. David dice:

    Una pregunta. ¿Por que la fuente sale con colores como marrón y azul y se ve negro? ¿Es algún tipo de tratamiento o suavizado del texto? Es que también lo he visto en Mac OS X.

  12. Pepe dice:

    Es buen artículo y muy claro. Gracias.
    P.D. Por favor, corregid el “hechemos” del segundo párrafo (“(…) Depende… Hechemos un vistazo.”, que hace un poco de daño a los ojos!! . 😉

  13. Daniel Braga dice:

    Pepe (y todos): más daño hace ver escrito echar con H, sea mayúscula o minúscula.
    Por lo demás, muy buena nota.
    http://buscon.rae.es/drae/srv/search?val=echar

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder