Advertencias Validador CSS: Familia de fuentes genérica
19 Marzo 2006
Una de las advertencias más cantosas del Validador CSS del W3C es la siguiente:
Recomendamos encarecidamente ofrecer una familia genérica como última opción.
Bien, ¿qué significa? Vamos a explicarlo con un ejemplo que siempre repito en los cursos. Realmente no se trata de un error, sino de una advertencia (warning).
Como no quieres comprar algo equivocado, llamas a tu madre y le cuentas el problema. Entonces ella te dice que compres el detergente de marca Elena.
Lo buscas, y tampoco queda Elena. Vuelves a llamar a tu madre, que te dice que, entonces, compres Skip.
Miras, y qué mala suerte, tampoco queda. Vuelves a llamar a tu madre y te dice:
Ok, cómprame cualquier detergente, de la marca que quieras, pero compra uno.
Y éso es precisamente lo que nos pide el Validador: que como última opción indiquemos una familia genérica. Vale, bien, eso ya lo hemos dicho al principio. ¿Pero qué significa.?
Bien, cuando indicamos la tipografía de un elemento en la hoja de estilos, algo así como:
h1{ font-family: Arial, Verdana;}
En este caso estoy indicando que quiero que todos los encabezados de primer nivel (h1) utilicen la letra Arial, y en el caso de que el usuario no disponga de esta fuente en su sistema, que utilice Verdana.
¿Pero qué ocurre cuando el usuario no tiene ni Arial ni Verdana? Entonces es el navegador el que las sustituye por la funte predeterminada en el navegador.
Y ahí es precisamente donde entra en juego la advertencia del validador. En este ejemplo estoy poniendo 2 tipos de letras de tipo “sans-serif”. ¿mande?, ¿y esto qué es?
Los tipos de letras se agrupan en cuatro grandes familias: serif, sans-serif, fantasy y monospace. Las más conocidas para nosotros pueden ser:
- serif:
- Letras con mucho detalle (como la Times New Roman). En pantalla se leen peor debido a la cantidad de detallas que tienen, sin embargo, impresas en papel se leen mejor.
- sans-serif
- Letras sin detalla (como la Arial o la Verdana). En pantalla se leen mejor porque no tienen detalles, sin embargo, impresas en papel se leen peor.
¿Ya sabéis por dónde voy? Vale, lo explico aún más.
En mi ejemplo, quiero que los encabezados de primer nivel tengan una tipografía de tipo sans-serif (verdana o arial). Pero igual un usuario no dispone de esa tipografía, así que el navegador la sustituye por la que tenga establecida por defecto, y se puede dar la casualidad que el navegador tenga estabecida, por defecto, una letra de tipo serif.
Lo que el validador nos está “cantando” es que, si el usuario no dispone de nuestra tipografía, al menos se sustituya por una de su familia. Si queremos una letra sans-serif, para favorecer la legibilidad en pantalla de la página, que el navegador ponga otra letra sans-serif.
Entonces, nuestro ejemplo quedará así:
h1{ font-family: Arial, Verdana, sans-serif;}
Y el validador ya no nos mostrará la advertencia.
