Tipografía en la Web

 

Hasta hace no mucho tiempo los diseñadores web estábamos atados de pies y manos en el uso de tipografías.

Pensando en la letra para un nuevo diseño, la elección fundamental era si utilizábamos, entre las tipografías de sistema comunes en Windows y Mac OS, una tipo serif o una tipo sans serif y además con la convicción de que en pantalla se visualizaban mejor las fuentes de palo seco que las de palo cruzado, la conclusión mayoritaria era que los párrafos iban en Arial o Helvética y los títulos en Times o Georgia.

Si el diseño precisaba de algo más personal y menos aburrido utilizábamos diversos trucos con imágenes y CSS, javaScript (Cufon) o Flash (sIFR), laboriosos de implementar, engorrosos para actualizar, poco accesibles, malos para el SEO…, tediosos.

La inclusión definitiva de la regla @font-face para CSS3, la última revisión de CSS (se incorporó en CSS2 y se desestimó en CSS2.1 porque los fabricantes no se pusieron de acuerdo con los formatos), equipara el tratamiento de la tipografía en el diseño web al del diseño impreso, aunque por desconocimiento o despreocupación la gran mayoría de publicaciones online sigan siendo igual de monótonas que hace años.

Si que es cierto que cada vez, más diseñadores web prestan especial atención a la elección correcta de la tipografía del site y de su composición: tamaño, interlineado, interletrado…, acentuada por el uso de diferentes dispositivos y pantallas, tratando de facilitar la visualización y accesibilidad de los contenidos.

La regla @font-face es la que permite incorporar casi cualquier tipografía en una página Web de este modo:

@font-face
{
font-family: 'myFont';
src: url('myFont.woff') format('woff');
}

.mySelector {
font-family: 'myFont';
}

Los navegadores modernos soportan esta regla pero para asegurarnos del uso correcto utilizaremos diferentes formatos, así:

@font-face {
font-family: 'myFont';
src: url('myFont-webfont.eot');
src: url('myFont-webfont.eot?#iefix') format('embedded-opentype'),
url('myFont-webfont.woff') format('woff'),
url('myFont-webfont.ttf') format('truetype'),
url('myFont-webfont.svg#myFont') format('svg');
font-weight: normal;
font-style: normal;
}

Internet Explorer 9 +, Firefox, Chrome, Safari y Opera soportan el formato WOFF (Web Open Font Format).
Firefox, Chrome, Safari y Opera también admiten fuentes de tipo TTF (True Type Fonts) y OTF (OpenType Fonts).
Además Chrome, Safari y Opera soportan SVG.
Internet Explorer también soporta fuentes EOT (Embedded OpenType).

Si en tu diseño estás trabajando con una tipografía TTF u OTF, ¿cómo consigues el resto de formatos para incluirlos en la web?

Podemos recurrir a diversas aplicaciones web que nos facilitan el trabajo, la que me resulta más sencilla es el generador de Fontsquirrel, subes tu tipografía y la aplicación te devuelve los diferentes formatos que debes incluir en el site y el código css para tu hoja de estilos. Además Fontsquirrel cuenta con un catálogo de tipografías de pago y también libres.

Otros sitios y aplicaciones que te facilitan la implementación y tratamiento de fuentes en la web son:

  • + Google Fonts. Cuenta con amplio catálogo alojado, tan solo tienes que hacer la llamada desde tu CSS. Algunas de las fuentes más populares de la web están aquí, como Open Sans, Oswald o Roboto. Lo mejor, su uso es totalmente gratuito.
  • + Fontspring. Al igual que Fontsquirrel dedica gran parte de su catálogo a fuentes gratuitas, entre ellas: Proxima Nova, Museo Sans y Museo.
  • + Typekit. De Adobe, un referente de calidad. Ofrece tres planes, uno de ellos gratuito aunque algo limitado.
  • + Skyfonts. Es una aplicación para PC y Mac que permite instalar temporalmente tipografías de Google Fonts, Fonts.com y MyFonts.
  • + Webfont Specimen. Aquí puedes descargar una plantilla html con diferentes estilos (tamaño, color...) para visualizar como queda la tipo de tu diseño en pantalla.
  • + Type Tester. Con menos estilos que el anterior recurso pero más rápido e intuitivo ya que es online.
  • + Type Cast.

Estas tan solo son una pequeña muestra de diversos recursos tipográficos web, seguro que podremos ampliar la lista en otro post con vuestros aportes.

Pronto dedicaremos otro artículo al uso responsive de la tipografía, como equilibrar legibilidad y atención en diferentes formatos de pantalla.

Autor: David Fernández