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