03/02/2016

Consejos para elegir una fuente web

Consejos para elegir una fuente web

En los últimos años, gracias al creciente soporte de la regla @font-face y la aparición de nuevos formatos de fuente, el diseño web se enriqueció con un sinfín de tipografías que antes no eran aptas para su uso fuera de programas de escritorio. Así aparecieron muchos servicios que ofrecen, de manera paga o gratuita, fuentes web listas para usar. Sin embargo, pese al avanzado desarrollo de este campo, las fuentes web siguen teniendo varios problemas, que podemos evitar haciendo una buena elección a partir de estos consejos.

  • Conocer el tema. Antes de elegir una fuente (web o no), debemos adquirir, al menos, nociones básicas de tipografía. Conceptos como serif y sans serif; kerning, tracking y leading; legibilidad y contraste son de consideración obligatoria para hacer una buena elección.
  • Privilegiar la legibilidad. Muchas de las fuentes web más atractivas son, en por otro lado, muy difíciles de leer. En general, es preferible una fuente tradicional, pero legible, a una fuente original pero difícil de entender.
  • Optimizar los archivos grandes. Muchos archivos de fuente son pesados porque contienen una gran cantidad de caracteres, llegando a incluir alfabetos que nunca usaremos. Una forma de reducir el tamaño del archivo es eliminar esos caracteres innecesarios.
  • Garantizar la compatibilidad. Los browsers se diferencian en el rango de formatos de fuente que soportan. Debemos crear suficientes archivos «de repuesto» (fallbacks), en diferentes formatos, para que la mayor cantidad posible de lectores pueda ver nuestras fuentes. Podemos hacerlo a través del generador de Font Squirrel, siempre que la licencia de nuestra fuente lo permita.
  • Probar la fuente en todos los navegadores y sistemas operativos. Los browsers y los sistemas operativos también presentan diferencias en cómo muestran (renderizan) las fuentes. Por ejemplo, Firefox y Chrome pueden mostrar la fuente con más o menos cuerpo, o con diferente antialias. Antes de utilizar las fuentes en producción, debemos probarlas en todas las plataformas posibles.
  • Probar la fuente antes de comprarla. Si nos hemos decidido a comprar una tipografía paga, antes debemos probar que funcione bien en otras páginas. Muchas tiendas de fuentes web ofrecen un sistema para probarlas, pero, en el caso de que esta opción no exista, podemos consultar por otros web en los que se esté utilizando.

A estos principios debemos sumarle nuestro criterio personal para elegir una fuente que no solo funcione bien, sino que además refleje los valores que queremos transmitir y se integre correctamente con la página donde se inserta.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce