Tamaño de fuente en el diseño web

El uso de fuentes, como diseñador web, queda bastante limitado por tener que usar las fuentes «tipo» que el usuario tiene instaladas en su máquina. No vamos a entrar en este artículo en scripts especiales para poder usar otras fuentes.

Ahora gracias a las CSS y cada vez más, el usuario podrá tener la opción de decidir el tipo de letra con el que quiere ver nuestra web.

Decidir el tamaño de letra es muy importante a la hora de diseñar nuestra web, sin embargo hay que ser conscientes de que un mismo tamaño de letra no se ve igual por ejemplo, en Windows que en Mac. En un Mac, la resolución por defecto es de 72 dpi, mientras que en Windows es 96 dpi.

Las fuentes pequeñas son mucho más difíciles de leer, por lo que no es nada conveniente usar una fuente pequeña para grandes textos, pero esto no supone tampoco que debamos usar tamaños enormes de fuente. Entonces ¿cómo saber el tamaño de fuente correcto?. Los últimos estudios de usabilidad, aconsejan que sea el propio usuario el que pueda elegir este tamaño de letra, esto lo podemos solucionar con una CSS específica, en la que en lugar de tamaños absolutos usaríamos porcentajes de tamaño.

Hoy en día con navegadores como el firefox existe la posibilidad de modificar este tamaño a nuestro gusto, independientemente de que en la CSS hayamos puesto valores absolutos o relativos, basta con usar las teclas CTRL+ +, CTRL+ – ó CTRL+ 0 para aumentar, disminuir o dejar el valor predeterminado, para poder manejar a nuestro gusto los valores que nos hagan más fácil la lectura. Aunque esto no es válido para Internet Explorer, ya que si usamos tamaños absolutos, el poner la fuente grande o pequeña, no tiene ningún efecto sobre la pantalla.

Tenemos que contar con un aspecto muy importante y es que con las nuevas tendencias de diseño, la fuente ha pasado de ser pequeña a ser en muchas webs de tamaño extravagante. Es decir, ahora las fuentes son mucho más grandes sobre todo en los titulares, con lo cual una vez más hago referencia a la lógica del diseñador, yo no usaría fuentes de menos de 12 px para textos, y de ahí para arriba siempre y cuando el diseño lo permita. De todos modos las recomendaciones son usar tamaños en porcentajes y no absolutas, aunque he de confesar que yo no suelo hacerlo, ya que me gusta tener el control del diseño, por lo que suelo utilizar para textos Arial a 12px y luego juego con los h1, h2,… dándoles tamaños mucho mayores.

Consejos de legibilidad de Jakob Nielsen:

  • No usar tamaños de fuente absoluto en las CSS. Código de los tamaños de fuente en términos relativos, por lo general, utilizando como porcentajes del 120% para las fuentes más grandes y el 90% para las más pequeñas.
  • Si la web va destinada a la tercera edad, usar un mínimo de 12 puntos de fuente.
  • Si es posible, evitar texto gráfico, ya que no se puede modificar ni desde el explorador ni desde la CSS. Si tiene que usar las imágenes de texto, asegúrese de que el tamaño de la fuente es especialmente grande (por lo menos 12 puntos), y que utiliza colores de alto contraste.
  • Maximizar el contraste de color entre el texto y el fondo.

A continuación, os dejo una tabla de equivalencias de tamaños de fuente que puede resultar de gran utilidad.

Pts Px Em
16pt 22px 1.4em
17pt 23px 1.45em
18pt 24px 1.5em
20pt 26px 1.6em
22pt 29px 1.8em
24pt 32px 2em
26pt 35px 2.2em
27pt 36px 2.25em
28pt 37px 2.3em
29pt 38px 2.35em
30pt 40px 2.45em
32pt 42px 2.55em
34pt 45px 2.75em
36pt 48px 3em
Pts Px Em
6pt 8px 0.5em
7pt 9px 0.55em
7.5pt 10px 0.625em
8pt 11px 0.7em
9pt 12px 0.75em
10pt 13px 0.8em
10.5pt 14px 0.875em
11pt 15px 0.95em
12pt 16px 1em
13pt 17px 1.05em
13.5pt 18px 1.125em
14pt 19px 1.2em
14.5pt 20px 1.25em
15pt 21px 1.3em