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