CSS y @font-face para el uso de fuentes tipográficas en diseño web.
Escrito por Revista NeoPixel Martes, 18 de Octubre de 2011 21:53
Uno de los principales obstáculos al que nos enfrentábamos hace algunos años al diseñar sitios web era la pequeña cantidad de fuentes tipográficas que teníamos a nuestra disposición para desarrollar sitios que pudieran ser vistos en cualquier navegador. Las famosas "Web-Safe Fonts" eran un grupo de 18 fuentes tipográficas que venían pre-instaladas en la mayoría de las computadoras, por lo que teníamos que hacer uso de estas para estar seguros de que cualquier navegador podría ver nuestras páginas de la misma forma y con las mismas fuentes que como las habíamos imaginado a la hora de diseñar.
Esta limitante nos orillaba a hacer uso de recursos o técnicas en caso de querer diseñar con fuentes distintas a las "web-safe fonts", podíamos por ejemplo utilizar imágenes en lugar de texto o recurrir al uso de Flash, teniendo claro que esto va en contra de los estándares web, haciendo a estos textos no seleccionables, inaccesibles e imposibles de identificar e indexar por los buscadores.
Si tenemos en cuenta que más del 80% del contenido de internet es información escrita, nos damos cuenta de la importancia de la tipografía dentro del diseño, desarrollo y creación de sitios web. Y hablamos de esto no solo por el carácter estético que la tipografía representa, si no por su función de comunicar con claridad manteniendo leibilidad así como congruencia con la personalidad y presencia de la marca o producto que representa (Macro y Micro tipografía).
Dicho lo anterior, y si nuestro objetivo es hacer buen uso de la tipografía en nuestros sitios pero sin tener la limitante de un número reducido de fuentes tipográficas, la mejor opción es el uso de @font-face, una opción de CSS que nos permite definir una familia tipográfica y ligar el texto de nuestro sitio a la fuente que hayamos subido a nuestro servidor, en lugar de ligarlo a las fuentes pre-instaladas de la computadora. Hemos de aclarar que @font-face no es una función nueva en CSS3 y que incluso ya tiene varios años que se se viene utilizando, aunque con el pequeño inconveniente de incompatibilidad con algunos navegadores web, ya que no todos ellos soportaban o reconocían esta función. Sin embargo a partir del 2009 este ha dejado de ser un problema ya que la mayoría de los navegadores como Safari, Chrome, Firefox, Opera y Explorer (e incluso navegadores de dispositivos móviles) son totalmente compatibles con @font-face.
La estructura básica de nuestro CSS para hacer uso de @fotn-face sería la siguiente:
@font-face {
font-family: 'Skia Font';
src: url('/skia.ttf');
}
Aquí estamos definiendo una fuente, asignando un nombre e indicando la ruta y nombre de la fuente que tendremos en nuestro servidor. Después solo restaría asignar la fuente que hemos declarado a algún elemento dentro de nuestro HTML de la siguiente forma:
h1 {
font-family: 'Skia Font';
}
Como resultado tendremos un texto seleccionable, accesible, redimensionable y de fácil acceso para ser indexado por motores de busqueda, es decir un texto que está diseñado de acuerdo a los estándares web.
Sin embargo no todo es "miel sobre hojuelas" y aún quedan algunos aspectos de incompatibilidad (que se pueden arreglar con un poco de código extra), sobre todo relacionado a los formatos de las fuentes que son compatibles con cada navegador. Los formatos más comunes para utilizar fuentes en web son otf, ttf, svg y woff, siendo entre estos el OTF y TTF los más compatibles con la mayoría de los navegadores, incluso con los de dispositivos móviles. Así para asegurarnos de que todos los navegadores desplieguen bien nuestra información tendremos que subir nuestras fuentes al servidor en los 4 formatos más comunes y cambiar un poco el código por el siguiente:
@font-face {
font-family: 'Skia Font';
src: url('/skia.eot?') format('eot'),
url('skia.woff') format('woff'),
url('skia.ttf') format('truetype');
url('skia.svg#svgFontName') format('svg');
}
Esta declaración en CSS será compatible con Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3 y Opera 11 por lo que no tendremos que preocuparnos por la incompatibilidad con alguno de ellos.
Ok, hasta aquí todo bien, ¿pero qué pasa si no tengo mis fuentes en alguno de estos formatos?. FontSquirrel es una herramienta "online" indispensable para el uso de @font-face, ya que nos permite cambiar el formato de cualquiera de nuestras fuentes a los formatos mencionados previamente.
Hasta aquí podemos decir que hemos cubierto y explicado a grandes rasgos la función y forma de usar @font-face, sin embargo hay aspectos o detalles más avanzados de los que hablaremos en próximos artículos, como lo serían el uso de @font-face con algún servicio "hosted web fonts" o subscripción al uso de fuentes hospedadas en "la nube" (como Kernest, Fontdeck, Typekit, Web Fonts, WebINK, FontsLive, WebType), que es una buena opción si es que no tenemos la fuente instalada en nuestra computadora o no queremos comprarla.
Como hemos visto el uso de fuentes para diseño web ha mejorado, pero el hecho de que ahora podamos utilizar la cantidad de fuentes tipográficas que queramos no significa que nuestros diseños serán mejores; eso dependerá de nuestra habilidad, conocimiento y creatividad en el buen manejo de la tipografía: "Information design is not about the use of good typefaces, it is about the use of good typography" (iA³ Template © 2011 Information Architects, Inc) . El buen entendimiento, la leibilidad y legibilidad van en relación a los principios del uso de contrastes, alineación, repetición y proximidad para generar una buena comunicación, con estilo y claridad para el usuario.
RSS feed Comments
