Tipografía en la web

A la hora de manejar fuentes en una página web tenemos que tener en cuenta las limitaciones que presenta este medio particular.
Las familias tipográficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de Internet Explorer instalan un conjunto de fuentes similar en Windows y Mac Os, hay que tener en cuenta que existen otros navegadores y otros sistemas operativos, por lo que es importante asegurarnos de que los contenidos textuales tendrán el mismo aspecto (oel más parecido posible) sea cual sea la pareja SO-navegador de cada usuario.
Puesto que un 97% de los usuarios de Internet utilizan PC+Windows o Mac+Mac Os, parece lógico diseñar nuestras páginas web buscando la mayor compatibilidad tipográfica entre ambos sistemas.
Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son:


En cuanto a Linux, el número de fuentes instaladas por defecto depende de la versión, aunque suelen ser pocas.

Estas fuentes por defecto se van ampliando según las aplicaciones instaladas posteriormente. Las aplicaciones de ofimática suelen instalar fuentes propias, así como los navegadores web, especialmente Internet Explorer.

Por otra parte, Microsoft, Apple y las distintas empresas involucradas en Linux ofrecen a sus usuarios paquetes gratuitos de fuentes, por lo que el número de ellas presentes en una máquina puede aumentar considerablemente. Un ejemplo de estos paquetes es Windows Font Pack, que facilita fuentes tanto para entornos PC y Mac.

Buscando siempre la máxima compatibilidad entre plataformas, en el diseño de páginas web deberemos usar tan solo fuentes seguras, prescindiendo de las adicionales que hayan podido instalar en los ordenadores aplicaciones complementarias o los propios usuarios.

Equivalencia entre fuentes Windows y Mac OS

Como las fuentes instaladas por defecto son diferentes en el caso de un PC con Windows y un Mac, puede darse el caso de que una página web no se visualice de forma correcta si utilizamos fuentes incompatibles.

Las fuentes equivalentes en los sistemas PC y Mac son las siguientes:


Para asegurarnos de la correcta visualización en ambos sistemas habrá que utilizar siempre Hojas de Estilos en Cascada (CSS), asignando a los elementos textuales dos fuentes equivalentes, una para PC y otra para Mac. Si además queremos estar seguros de una visualización similar en otros sistemas (Linux, por ejemplo), podemos asignar también una familia tipográfica genérica, como serif, sans-serif, cursive, etc.).

Ejemplo:

<style type="text/css">
.titular{font-size:16px;font-family:Arial, Helvetica,sans-serif;}
</style>
...
<p class="titular">Esto es un titular</p>


Generalmente los usuarios de Mac disponen de las fuentes incluidas en Windows Font Pack, ya que éste se instala automáticamente desde que Mac Os viene por defecto con Internet Explorer, pero nunca estaremos seguros de qué versión tiene el usuario final, así que la regla de declarar fuentes alternativas mediante CSS deberemos aplicarla siempre.

Tamaño de las fuentes

Un Mac trabaja por defecto a una resolución de 72 ppp (pixels por pulgada), por lo que en él existe una equivalencia exacta entre punto y píxel, cosa que no ocurre en un PC con Windows, cuya resolución de trabajo por defecto es de 96 ppp.

Mac: 12 pt ---------- 12 px
PC: 12 pt ----------- 16 px

Como consecuencia, el tamaño de una fuente definida en puntos es diferente en ambos sistemas, por lo que los usuarios de Mac verán las fuentes más pequeñas que los de PC.


La siguiente imagen muestra la equivalencia entre puntos y píxeles, así como la visualización de los diferentes tamaños en fuente Verdana.


Como se puede apreciar en la imagen, los tamaños inferiores a 9 píxeles (7 puntos) no se visualizan correctamente, ya que las letras se hacen demasiado pequeñas a esos tamaños. Por el contrario, a tamaños superiores a 16 píxeles (12 puntos), las letras comienzan a escalarse, produciéndose un efecto de dientes de sierra en sus contornos, sobre todo en las zonas inclinadas y curvas de las mismas.

Por estos motivos, el tamaño de los contenidos textuales para la web debe oscilar entre 9 y 15 píxeles (7 y 11 puntos), ya que con estos valores los caracteres resultan legibles y sin escalado.

Si necesitamos incluir textos de mayor o menos tamaño en una página, la alternativa pasa por hacerlo como fichero gráfico, en formato GIF o PNG, teniendo en cuenta entonces la imposibilidad de modificar dichos textos “en el aire", por lo que no es viable este sistema para contenidos que deban cambiar con el idioma, por ejemplo (habría que crear versiones de la imagen para cada opción posible).

Una consideración adicional referente a los tamaños de las fuentes, válida tanto para puntos como para píxeles, es que conforme se aumenta la resolución de pantalla disminuye el tamaño relativo de las fuentes, es decir, su tamaño de visualización final.

Esto obliga a tener especial cuidado al usar textos de pequeño tamaño a resolución 800x600, ya que para los usuarios que visualicen la página web a 1024x768 pueden resultar ilegibles.

Caso de ser necesario incluir textos en estas condiciones, una buena solución es crear dos ficheros de estilos CSS, uno para cada resolución, asignando un fichero u otro a la página mediante JavaScript según la resolución empleada por cada usuario.

Ventajas e inconvenientes de usar medidas en píxeles

La especificación de tamaños de fuente en píxeles ofrece la ventaja de permitirnos controlar en todo momento la visualización final de los contenidos textuales, ya que nos asegura la máxima compatibilidad entre sistemas operativos y la inmutabilidad del tamaño de los textos frente a posibles configuraciones personalizadas de los navegadores web (Ver > Tamaño de la fuente > Grande, por ejemplo).

Sin embargo, con su uso pueden producirse problemas de accesibilidad, ya que impide la personalización por parte de los usuarios con problemas de visión de mayores tamaños para las fuentes.

Como norma general, y si las especificaciones del proyecto no nos marcan condiciones específicas sobre accesibilidad, usaremos siempre como unidad de medida en trabajos web el píxel.

Referencia: Sobre asignar tamaños al texto con CSS os recomendamos la lectura del artículo Prácticas aconsejables al definir los tamaños del texto.

Fuentes a usar en las páginas web

A la hora de seleccionar las fuentes que vamos a usar en una página, deberemos tener en cuenta que existe algunas especialmente diseñadas para su visualización en la pantalla de un monitor, por lo que suelen resultar las más apropiadas para la web.

Estas fuentes suelen ser sans serif, destacando entre ellas Verdana, Arial y Helvetica, pudiendo especificarse también el tipo genérico sans-serif, con lo que el navegador usará la fuente sans serif que por defecto tenga instalada la máquina del usuario.

En caso de facilitar a los usuarios de la web documentos o páginas para impresión, es conveniente sustituir las fuentes anteriores por alguna tipo serif (con remates en sus extremos), ya que son más legibles en documentos impresos y menos monótonas.

Entre ellas podemos destacar Times New Roman, Courier y Courier New, pudiendo especificarse también el tipo genérico serif, con lo que el navegador usará la fuente serif que por defecto tenga instalada la máquina del usuario.

Es posible asignar a una página web mediante CSS dos conjuntos de fuentes diferentes, uno para su visualización en pantalla y otro para su impresión. Basta con declarar los dos bloques de estilos separadamente, especificando en el atributo media de la etiqueta style el tipo de medio en el que será válido cada uno.

Ejemplo:

<style type="text/css" madia="screen">
.contenidos{font-size:12px;font-family:Verdana,Helvetica,sans-serif;}
</style>
<style type="text/css" madia="print">
.contenidos{font-size:10px;font-family:Times New Roman,Times,serif;}
</style>


Conclusiones

A la hora de trabajar con textos en nuestras páginas web deberemos siempre especificar el tamaño de las fuentes y las familias mediante estilos CSS.

Los tamaños se especificarán normalmente en píxeles, considerando valores válidos aquellos comprendidos entre 9 y 16 píxeles.

Si debemos usar el tamaño 8 píxeles en resolución 800x600, se deberá comprobar su correcta visualización en resolución 1024x768, implementando un fichero de estilos para cada resolución caso de ser necesario. En ningún caso se usarán tamaños inferiores a 8 píxeles.

Si debemos usar tamaños superiores a 16 píxeles, es conveniente sustituir el texto afectado por una imagen en la que figure el mismo, evitándose con ello el escalado.

Las fuentes a usar serán aquellas que tengan un equivalente en PC y Mac, declarando ambas en estilos CSS.

Se elegirán preferentemente las fuentes Verdana, Helvetica y Arial para la presentación de textos en pantalla, añadiendo además la fuente genérica sans-serif, en aras de la correcta visualización en todos los casos.

Si ofrecemos páginas alternativas para la impresión, se usarán en ellas preferentemente las fuentes Times New Roman y Times, añadiendo la fuente genérica serif.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Compartir

Comentarios

r

12/1/2005
muy buen articulo!!!

Ivan

17/6/2005
Sres, y puedo yo agregar una fuente al momento de cargar una pagina web, con la intencion de que mi pagina se vea con la fuente que cargué??? es decir, agregar yo a travez de codigo la fuente al directorio correspondiente...

ANABEL

06/11/2007
EL TEXTO Q SE HA PRESENTADO ES MUY INTERESANTE, YA QUE TE VA EXPLICANDO DE COMO TU VAS A DISEÑAR TU PAGINA WEB, EL TIPO DE LETRA QUE REALMENTE DEBE LLEVAR PARA Q ESTA NO SE VEA TAN CARGADA Y ASI SEA MAS LLEVADERA Y SEA EL PUNTO DE ATRACCIÒN DE NUESTROS USUARIOS.

Luisita

08/5/2009
GRACIAS!
Hola! Solo queria decir... gracias! Este articulo me aclaro muchas dudas y me sirvio para la facu! La redaccion es clarisima y el nivel de los terminos es simple, asi que lo pude leer sin problemas.
Se agradece!

ValmontWindgate

26/9/2009
Gran aporte
Buen aporte sí señor, estaba a punto de utilizar una fuente extrañísima para mi web, pero ya veo que lo más probable es que NADIE termine poder viéndola así que... Me reservo.

Gracias!

Dart

24/3/2010
Excelente
Hey gracias que buena info :D

Johnny Condezo

21/7/2010
Gracias
Me encuentro muy agradecido por este material "Introducción al diseño gráfico. Soy profesor de periodismo. Para mí es de gran ayuda y conocimiento algunos temas no lo había pasado alto.

Gracias.
Johnny Condezo
Lima - Perú

MARIAN

02/9/2010
Duda sobre tamaño de letras
Perdonar mi ignorancia pero cuando decimos por ejemplo tipo de letra Arial 10 ¿estamos diciendo que son 10 puntos o 10 píxeles? y esto realmente ¿cuantos milímetros mide?. Muchas gracias

monica

29/9/2010
saber mas
cuando escribo con acentos, comillas, en la página aparecen signos inentendibles en lugar de lo que quise poner, como puedo hacer para que eso no suceda

balarma

29/9/2010
Respuesta a la duda sobre los acentos
A la pregunta sobre el problema de visualización de los acentos correctamente, hay que escribir esta línea de código en la pág. web, justo antes de </head>:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Espero que os sirva de ayuda. ;-)

Eulalia

31/8/2012
Tipografía
me gustaría saber si se ha hecho algún estudio para determinar los tipos de fuente para páginas web o para impresión,

Luca

12/11/2013
¿y en el 2013 cuales son las fuentes?
Hola, gran articulo!
imagino que desde el 2004 cuando se escribió abrá que actualizar
las tablas de las fuentes seguras, ahora cuales son? Gracias.