La limitación más frustrante para los diseñadores web que cuidan especialmente la tipografía de sus páginas es la imposibilidad de utilizar cualquier tipo de letra para mostrar los contenidos de texto. Como se sabe, las fuentes que utiliza una página deben estar instaladas en el ordenador o dispositivo del usuario para que el navegador pueda mostrarlas.
Por lo tanto, si el diseñador utiliza en la página una fuente especial poco común entre los usuarios normales, el navegador no encuentra esa fuente y la sustituye por una fuente por defecto. El resultado es que la página que ve el usuario y la que ve el diseñador se diferencian completamente en su tipografía.
La consecuencia directa de esta limitación es que todos los diseñadores se limitan a utilizar las pocas fuentes que tienen casi todos los usuarios del mundo:
- Sistemas operativos tipo Windows:
Arial,Verdana,Tahoma,Courier New,Times New Roman,Georgia. También está disponible una lista con todas las fuentes que incluye por defecto cada versión de Windows. - Sistemas operativos tipo Mac:
Arial,Helvetica,Verdana,Monaco,Times. - Sitemas operativos tipo Linux: incluyen decenas de fuentes, muchas de ellas versiones libres de las fuentes comerciales. También es posible instalar las fuentes más populares de Windows mediante el paquete Core Font.
Debido a la presencia mayoritaria de los sistemas operativos Windows y la disponibilidad de muchas de sus fuentes en otros sistemas operativos, la mayoría de diseñadores utilizan exclusivamente las fuentes más populares de Windows.
Afortunadamente, existen varias técnicas que permiten utilizar cualquier tipo de letra en el diseño de una página con la seguridad de que todos los usuarios la verán correctamente.
1.7.1. La directiva @font-face
La única solución técnicamente correcta desde el punto de vista de CSS es el uso de la directiva @font-face. Esta directiva se definió en el estándar CSS 2, pero desapareció en el estándar CSS 2.1 que utilizan todos los navegadores de hoy en día. La futura versión de CSS 3 volverá a incluir la directiva @font-face en el módulo llamado Web Fonts.
La directiva @font-face permite describir las fuentes que utiliza una página web. Como parte de la descripción se puede indicar la dirección o URL desde la que el navegador se puede descargar la fuente utilizada si el usuario no dispone de ella. A continuación se muestra un ejemplo de uso de la directiva @font-face:
@font-face {
font-family: "Fuente muy rara";
src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf");
}
h1 {
font-family: "Fuente muy rara", sans-serif;
}La directiva @font-face también permite definir otras propiedades de la fuente, como su formato, grosor y estilo. A continuación se muestran otros ejemplos:
@font-face {
font-family: Fontinsans;
src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: Tagesschrift;
src: url("fonts/YanoneTagesschrift.ttf") format("truetype");
}Los ejemplos anteriores han sido extraídos de la página 10 Great Free Fonts for @font-face embedding. Para ver el efecto de la directiva @font-face, debes acceder a esa página utilizando un navegador como Safari.
1.7.2. Soluciones FIR
Las siglas FIR (Fahrner Image Replacement) abarcan decenas de técnicas similares que tratan de resolver el problema de utilizar cualquier tipo de letra en una página web. El propósito de estas técnicas es sustituir el texto normal por una imagen que contenga el mismo texto escrito con la tipografía deseada. La primera técnica se presentó en el artículo Using Background-Image to Replace Text.
Si se dispone de un título de sección <h1> que se quiere mostrar con una tipografía muy especial, se puede utilizar el siguiente código HTML y CSS para sustituirlo por una imagen:
<h1><span>Lorem ipsum dolor sit amet</span></h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png") no-repeat top left;
}
h1 span {
display: none;
}El código anterior muestra como imagen de fondo del elemento <h1> la imagen que contiene el titular escrito con la tipografía deseada. Para sustituir el texto por la imagen, simplemente se oculta el texto mediante la propiedad display: none.
Aunque se trata de una de las técnicas FIR más sencillas, su principal problema es que el texto oculto mediante display no lo leen correctamente los dispositivos lectores de páginas que utilizan las personas con discapacidades visuales.
La evolución de la técnica anterior consiste en reemplazar la propiedad display por text-indent:
<h1>Lorem ipsum dolor sit amet</h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png") no-repeat top left;
text-indent: -5000px;
}Utilizando un valor negativo muy grande en la propiedad text-indent del elemento que se quiere reemplazar, el texto no se oculta pero se desplaza fuera de la pantalla. Los navegadores normales no muestran el texto y los lectores de páginas lo leen correctamente porque el texto no está oculto.
El problema de la solución anterior es que si el navegador tiene activado CSS y desactivada la carga de las imágenes, no se muestra nada. La solución consiste en volver a utilizar otro elemento <span> dentro del elemento que se quiere reemplazar:
<h1><span></span>Lorem ipsum dolor sit amet</h1>
h1 {
width: 450px;
height: 100px;
position: relative;
}
h1 span {
background: #FFF url("/imagenes/titular.png") no-repeat top left;
position: absolute;
width: 100%;
height: 100%;
}En esta solución, la imagen se muestra por delante del texto, por lo que aunque el texto no se oculta ni se desplaza, el usuario no puede verlo. El principal problema de esta técnica es que no se pueden utilizar imágenes con transparencias.
Por último, se muestra una versión simplificada de la solución anterior que presenta los mismos problemas con las imágenes transparentes:
<h1><span>Lorem ipsum dolor sit amet</span></h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png") no-repeat top left;
}
h1 span {
position: relative;
z-index: -1;
}El artículo Revised Image Replacement presenta otras técnicas FIR y discute sus problemas y limitaciones.
Independientemente de los problemas técnicos relacionados con CSS y los navegadores, el principal problema de las técnicas FIR anteriores es que se deben crear tantas imágenes como elementos se quieran reemplazar. Aunque el proceso de creación de imágenes sea automático, es un proceso pesado cuando se quiere modificar por ejemplo el tamaño o tipo de letra utilizado.
1.7.3. Soluciones avanzadas
Las soluciones basadas exclusivamente en CSS suelen presentar problemas con los lectores de páginas que utilizan las personas discapacitadas para navegar. Por ese motivo se han ideado otras soluciones basadas en diferentes lenguajes de programación.
El programador Peter-Paul Koch ha creado una solución basada en JavaScript y que explica en su artículo Image Replacement. Esta solución muestra las imágenes en todos aquellos navegadores que las soporten y muestra sólo el texto en cualquier otro caso. De esta forma, el texto original no se oculta de ninguna manera que pueda impedir a los lectores de páginas acceder a los contenidos.
Otras soluciones permiten crear de forma dinámica las imágenes que sustituyen al texto. El proceso es muy complejo porque hay que considerar aspectos como el espacio máximo que puede ocupar la imagen y los posibles saltos de línea en el texto. Existen multitud de soluciones de este tipo para diferentes lenguajes de programación, como por ejemplo el proyecto pcdtr para PHP.