Tamaños de texto con CSS: buenas prácticas

Bien sabido es que CSS permite varias unidades para definir tamaños de letra u otras características de estilos. Quizás estemos acostumbrados a trabajar siempre con unas unidades determinadas y nos vaya bien, pero aun así, puede que no estemos teniendo en cuenta diferentes plataformas y dispositivos que pueden acceder a una web, así como la optimización de la web en términos de usabilidad y accesibilidad. En este artículo del Taller de CSS de DesarrolloWeb.com vamos a dar algunos consejos sobre prácticas que serían deseables a la hora de asignar tamaños a los textos de la página con CSS.

Lo cierto es que visualmente en nuestro ordenador puede que sea indiferente usar una u otra unidad para asignar el tamaño a los textos, pero hay algunas diferencias entre las distintas unidades que merecería la pena conocer. Nosotros vamos a asumir en este artículo que la mejor manera de asignar tamaño a los textos es cuando:

• El tamaño se define de modo que se pueda ver bien en todos los dispositivos de acceso (que pueden ser un ordenador, con diferentes sistemas operativos o distinto navegador, pero también una agenda electrónica o teléfono móvil)
• Que las fuentes se puedan redimensionar correctamente, para aumentar o reducir su tamaño (lo que es útil para mejorar la accesibilidad a nuestra web por todo tipo de personas)

Tamaño de las fuentes en unidades relativas

La primera regla básica para definir los tamaños de los textos en una web con CSS es utilizar unidades CSS relativas. Las unidades relativas tienen la particularidad que se ajustan mejor a distintos dispositivos, ya que su tamaño real es en función de las características propias de cada sistema.

Por ejemplo, pensemos en la unidad de centímetros, que es una unidad absoluta, porque un centímetro es exactamente igual en España y en China, en un ordenador o en un teléfono móvil. Si definimos las unidades en centímetros, puede que para nuestro ordenador esté todo correcto, que tiene una pantalla, digamos, de 17 pulgadas, en la que un tamaño de fuente en x centímetros puede ser razonable. Pero ¿qué pasaría con un móvil que tiene una pantalla de 2,5 pulgadas? Quizás esas fuentes que se veían bien en la pantalla del ordenador se vean gigantes en la del móvil.

Otra unidad absoluta, por ejemplo es la pulgada. Otro ejemplo de unidad absoluta son los puntos (que equivalen a 1/72 pulgadas y son bastante utilizados a la hora de especificar tamaños de letras, puesto que estamos acostumbrados a ello en todos los procesadores de texto), tampoco es muy adecuada.

Las unidades relativas son:

• em: 1em equivale al tamaño de fuente que tenga ese dispositivo configurada por defecto.
• ex: que es el tamaño de la letra x, según la fuente por defecto del sistema
• px: que es justamente un pixel de la pantalla.

Por poner un ejemplo, si definimos el tamaño del texto con píxeles, al ver la fuente en el monitor del ordenador, tendrá un tamaño relativo a la definición que el usuario tenga en su pantalla y las dimensiones de la misma. Al ver la fuente en un móvil tampoco habrá problema, aunque quizás los píxeles de esa pantalla puedan ser menores, la letra seguirá viéndose igual de bien definida y ajustada a las características de esa pantalla.

Además de estas unidades relativas, está la posibilidad de usar la unidad de porcentaje, que es relativa al tamaño de la fuente con la que se estaba escribiendo.

Posibilidad de reducir y ampliar el texto de la página

Otro de los criterios válidos para decidir si una unidad es o no interesante para asignar tamaño a las fuentes es que el texto se pueda ampliar y reducir en la pantalla del ordenador. Como sabemos, la mayoría de los navegadores modernos admiten hacer zoom sobre la página para ver el contenido mayor o menor. De hecho, seguramente muchos de los lectores utilicen esta funcionalidad para leer con más facilidad los textos de los artículos de las webs. Pero ésta no es una utilidad de los navegadores creada simplemente para la comodidad de algunos usuarios, sino más bien es una ayuda necesaria para que cualquier persona con dificultades de lectura o de visión pueda asimilar el texto de las webs.

Así pues, para mejorar la accesibilidad de las páginas web, es ideal que se puedan aumentar o reducir las dimensiones del texto y para ello hay algunas unidades que se comportan mejor que otras.

Unidades en píxeles:
Tienen el problema que, en Internet Explorer, antes de la reciente versión 8, no permitían redimensionarse. Al ser medidas en píxeles, el explorador entendía que siempre tenían que medir lo indicado en las CSS, independientemente del tamaño de fuentes configuradas por el usuario.

Unidades en em:
Son las recomendadas por la W3C. El único problema que podemos tener para utilizarlas es saber cómo convertir los tamaños que conocemos en puntos (pt) a em. La regla es bien simple, pero tenemos que asumir el tamaño de fuentes predeterminado en el entorno del usuario. Lo común es que 1em corresponda con 16pt. Luego, si queremos convertir cualquier pt a em tenemos que dividir por 16, es decir Xpt = X/16em. Por ejemplo 14pt = 14/16em = 0,875em.

Unidades en porcentaje:
Otra posibilidad para ahorrarnos el cálculo constante de unidades em, es asignar un tamaño al cuerpo (etiqueta BODY) en unidades CSS em y luego asignar por porcentaje los tamaños de distintas fuentes, mayores con valores en porcentaje superiores a 100% y menores con tamaños en porcentaje menores que 100%.

Sobre las unidades en em, que serían las más aconsejadas, de nuevo Internet Explorer 6 y 7 dan un problema y es que cuando se reduce la fuente, el tamaño se hace demasiado pequeño. Esto se puede arreglar con un truquillo. Simplemente tenemos que asignar el atributo CSS font-size: 100% a la etiqueta BODY y luego definir con em las fuentes de cualquier otro elemento.

BODY{
   font-size: 100%;
}
.cualquierotroestilo{
   font-size: 0.875em;
}

Conclusión sobre la mejor manera de aplicar tamaños a las fuentes en CSS

Así pues, ya sabemos que las unidades más adecuadas son las relativas y entre ellas, la más aconsejada es em. Quizás es complicado a un sitio web ya creado alterar todas sus unidades CSS de tamaño de textos, para hacerlas relativas, pero merece la pena tener este detalle en cuenta para próximos rediseños o para la creación de nuevos proyectos en la web.