Fuentes para páginas web: tipos y tamaños
Qué fuentes utilizar en una página web es un tema problemático, dado que las fuentes disponibles difieren de un equipo a otro en función del Sistema Operativo y del navegador, variando por ello el aspecto de la página. Vamos a estudiar dos de las propiedades CSS más importantes para definir las fuentes, font-family y font-size.
font-family
A fin de proporcionar a los diseñadores web control sobre la apariencia de las fuentes en sus páginas web cuando la fuente especificada no está disponible, CSS introduce dos mecanismos, las fuentes genéricas y las fuentes de reserva, de modo que si el equipo de un visitante no tiene la fuente especificada, su navegador seleccionará una fuente similar, basándose en las fuentes de reserva y las fuentes genéricas.
- Fuentes genéricas: a fin de conservar en lo posible los estilos de las páginas web, la especificación CSS establece cinco fuentes genéricas de tal manera que los navegadores deben asignar una fuente por defecto para cada una de ellas. Estas fuentes genéricas son las siguientes:
serif sans-serif monospace cursive fantasy
- Fuentes de reserva o fuentes de respaldo (fallback fonts): en CSS, la propiedad font-family acepta una lista de fuentes separadas por comas que funciona como un sistema de retrocesos, de tal manera que el tipo de letra preferido debe figurar en primer lugar, a continuación las fuentes que reemplazarán a la primera si no está disponible (en ese orden), terminando la lista con una fuente genérica de las cinco posibles: serif, sans-serif, monospace, cursive y fantasy. Veamos un ejemplo utilizando fuentes web seguras:
p.serif { font-family: Georgia, "Times New roman", Times, serif; } p.sans-serif { font-family: Verdana, "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; } p.monospace { font-family: "Courier New", Courier, "Andale Mono", "Lucida Console", monospace; } p.cursive { font-family: "Comic Sans MS", cursive; } p.fantasy { font-family: Impact, fantasy; }
Este sería el aspecto de las fuentes web consideradas seguras citadas anteriormente:
font-size
Para configurar el tamaño de fuente en nuestra página web tenemos varias opciones, y según el sistema que empleemos podemos encontrarnos diferentes problemas, por ejemplo:
- Cross-browser y cross-platform: dada la diversidad de navegadores, dispositivos y Sistemas Operativos, no es nada fácil conseguir que una página web sea cross browsers and platforms. De entrada, en Mac se utiliza 72 dpi mientras que en Windows se emplea 96 dpi…
- Accesibilidad, escalable en IE: Internet Explorer no redimensiona texto cuyo tamaño haya sido establecido en px.
- Efecto cascada: los tamaños de fuente relativos hacen referencia al elemento padre, por lo que en estructuras anidadas obtendremos resultados indeseados.
Veamos las diferentes opciones para establecer el tamaño de fuente.
| Opciones para establecer el tamaño de fuente | ||||
| Opción | Ejemplo | Cross-browser y cross-platform | Accesibilidad, escalable en IE | Efecto cascada |
| Keywords absolutas | xx-small | x-small | small | medium | large | x-large | xx-large | ok | ok | ok |
| Keywords relativas | larger | smaller | ok | ok | not ok |
| Tamaño relativo | em | ex | ok | ok | not ok |
| Tamaño relativo CSS3 | rem | ok | ok | ok |
| Pixel | px | not ok | not ok | ok |
| Tamaño absoluto | in | cm | mm | pt | pc | ok | not ok | ok |
| Porcentage | % | ok | ok | not ok |
Veamos la equivalencia entre absolute keywords, pt y px.
Como podemos apreciar, la mejor opción para definir el tamaño de la fuentes es el sistema de tamaño relativo rem introducido en CSS3.
El resto de sistemas no son aconsejables, ya que o bien generan efecto cascada (tamaños relativos), o bien plantean problemas de accesibilidad, escalabilidad o compatibilidad cross-browser y cross-platform (tamaños absolutos), o disponen de pocos tamaños de letra, como es el caso del sistema de keywords absolutas, que sólo dispone de 7 posibles tamaños de letra.
CSS3 introduce la unidad rem, cuyo nombre deriva de “root em”, y significa que la unidad rem es relativa al elemento raíz, por lo que es escalable y además evita el efecto cascada. De esta manera, una vez definido el tamaño de fuente en el elemento <html>, podemos establecer todos los tamaños rem para que sean porcentuales respecto al elemento raíz. Por ejemplo:
html { font-size: 62.5%; /* =10px, assuming the default browser font-size is 16px */ } body { font-size: 1.4rem; /* =14px */ } h1 { font-size: 2.4rem; /* =24px */ } |
Recursos
- Propiedades CSS para fuentes: CSS font properties
Tipos de fuentes para páginas web
Cuando hablamos de fuentes para páginas web, podemos distinguir tres tipos de fuentes:
- Fuentes de sistema: las fuentes de sistema son las fuentes que están instaladas en el ordenador cliente.
- Fuentes web seguras o web safe fonts: se denominan así aquéllas fuentes que están disponibles en prácticamente la totalidad de las computadoras por estar ampliamente extendidas, e incluyen las fuentes que se instalan en la mayoría de los ordenadores Mac, Windows y Linux. De esta manera, nos aseguramos dentro de lo posible, de que todos los usuarios de nuestra web obtengan el mismo look y estilo al acceder a nuestra página, independientemente de su máquina. Sin embargo, no hay ninguna garantía de que el equipo cliente disponga de dichas fuentes.
- Fuentes web: las fuentes web permiten usar fuentes que no están instaladas en el ordenador del visitante.
Las fuentes a utilizar en una página web suponen un tema de gran importancia para que todos aquellos que accedan a la página obtengan el mismo look y estilo, ya que que las fuentes de sistema difieren de un equipo a otro en función del Sistema Operativo y del navegador. Ni siquiera empleando las denominadas fuentes web seguras se tiene la garantía de que el equipo cliente disponga de dichas fuentes.
Fuentes web
La única manera de asegurarse al 100% de que todos los equipos clientes visualizan las mismas fuentes, independientemente del dispositivo, Sistema Operativo y navegador, es emplear fuentes web, fuentes que no sean de sistema y que por tanto no están instaladas en el ordenador del visitante.
Básicamente, hay dos modelos para implementar fuentes web:
- Fuentes web embebidas: son sistemas que permiten utilizar las fuentes alojadas en el servidor del proveedor de fuentes. Los servicios de fuentes web embebidas más utilizados son Typekit (de pago, typekit.com) y Google Web Fonts (gratuito, google.com/webfonts).
Por ejemplo, para emplear en nuestra página web la fuente Open Sans de Google Web Fonts (developers.google.com/webfonts), añadiremos en el <head> el siguiente código HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">De esta manera, la fuente Open Sans estará disponible en el código CSS, por ejemplo de la siguiente manera:
p { font-family: 'Open+Sans', Arial, sans-serif; font-size: 48px; }
Nota
- Al emplear fuentes web embebidas siempre debemos listar alguna fuente segura y/o genérica, por si acaso el servidor estuviera inaccesible.
- Los espacios en el nombre de la fuente se reemplazan por signos "+".
- Fuentes embebidas usando @font-face: en este caso las fuentes están alojadas en el propio servidor de la página web, por lo que no depende de servidores de terceros. @font-face fue eliminado de CSS2 pero ha sido reintroducido en CSS3 y es soportado por todos los navegadores modernos.
El principal repositorio de fuentes libres es FontSquirrel (fontsquirrel.com), de donde nos podremos descargar un archivo ZIP que incluye la fuente en diversos formatos, como TTF, WOFF, EOT y SVG, junto con el código CSS y HTML de ejemplo. Incluiremos en nuestro CSS links a cada formato, ya que cada navegador soporta determinados tipos de ficheros:
- TTF: Safari, Firefox, Chrome, Opera y IE9.
- WOFF: Firefox 3.6+, Opera 11.10+, Chrome 5+, Safari 5.1+, IE9+.
- EOT: IE4+.
- SVG: Safari, Safari Mobile, Chrome, Opera.
Por ejemplo, una vez descargado el ZIP correspondiente a la fuente DroidSansRegular y subidos los ficheros al servidor web, para utilizarla incluiremos el siguiente código CSS:
@font-face { font-family: 'DroidSansRegular'; src: url('DroidSans-webfont.eot'); src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('DroidSans-webfont.woff') format('woff'), url('DroidSans-webfont.ttf') format('truetype'), url('DroidSans-webfont.svg#DroidSansRegular') format('svg'); font-weight: normal; font-style: normal; } p { font-family: 'DroidSansRegular', Arial, sans-serif; font-size: 48px; }