Tamaños de fuente en CSS: Tamaños relativos, tamaños fijos, diferencia entre px y em y ventajas de accesibilidad

Los lectores de este blog bien saben que no me gusta «copiar y pegar» 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. Aunque lo intentara, no podría explicarlo mejor, así que hoy si, copio y pego este pedazo de artículo extremadamente útil.

¿Cuales son las ventajas e inconvenientes de programar tamaños de fuentes relativos mediante CSS?¿Qué es mejor, tamaños de fuente mediante porcentajes o tamaños de fuente fijos en una página web? ¿Qué diferencia existe entre px, em, %, palabra clave…? Ahora puedes saber la respuesta a todas estas respuestas, leyendo este artículo en menos de 5 minutos.

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) ylarger (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.

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

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

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

Una 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