Tipografías Web: Pon una Web Font en tu WordPress!

Con la llegada de las web fonts o tipografías web, se ha democratizado (y de qué manera) el uso de tipografías en el diseño web actual. Algo muy positivo, sin duda. ¿No creeis que era hora de decir adiós a Comics Sans, Arial y Times New Roman de una vez por todas? Vamos a pensar en el usuario, y hacer que la visita a nuestra web sea una experiencia agradable para todos los sentidos 😉

Este es el tercer artículo de la serie “Tendencias de Diseño Web con WordPress”. Puedes leer el resto de los artículos y ver la conferencia aquí.

Diseñando con Tipografías Web

Es una tendencia de diseño web al alza. Sinceramente creo que está aquí para quedarse. Y más aún por su sencillez a la hora de importarlas o definirlas dentro del CSS de WordPress, como si de una tipografía más se tratase.

Además, el uso estas fuentes web es perfectamente compatible con la mayoría de navegadores antiguos (no hay que tocar nada ni encolar ninguna librería externa para su compatibilidad). Esto es positivo, pues quizás te pueda convencer que un buen diseño no se vaya a ver correctamente en Internet Explorer 8. Venga, no pasa nada, no se mostrará el degradado o aquella otra transparencia. Pero que no puedan ver el contenido, eso ya son palabras mayores! Al menos, que la experiencia de usuario tenga unos mínimos en navegadores antiguos. Pero con las Web Fonts, esto no es problema, puedes utilizar cualquier tipografía original. Puedes comprobarlo visualizando el repertorio de Google Fonts con un navegador antiguo.

tipografías google fonts

Diseño web pensando en Retina

Otro punto a su favor. Preparados para retina. Como sabrás, las nuevas pantallas retina requiere trabajar con imágenes en dos resoluciones, una para las pantallas con proporción de píxeles normal, y otra para las pantallas con resolución retina. Con las tipografías no es necesario hacer nada. Se escalan perfectamente a cualquier resolución y proporción de píxeles. Así que ojo, pues las imágenes para los iconos o pequeños elementos del diseño web tienen los días contados frente a las tipografías de iconos.

Una de las más usadas (que incorpora Bootstrap) es Awesome Font, que tiene un buen catálogo y cuyo uso e integración en nuestro diseño web, ya sea mediante WordPress u otro framework o CMS es relativamente sencillo. Puedes ver un ejemplo de su uso en esta plantilla para blogs

Se cuidadoso con el uso de tipografías.

Hablando en valores medibles, en tiempo de carga y optimización, las webs fonts (o cualquier otra fuente que no esté instalada en el equipo del usuario) hace que el usuario tenga que descargarlas, con el peso que ello supone y la llamada o llamadas al servidor. Esto incrementa (puede que poco, puede que mucho, depende de qué y cuántas fuentes) el tiempo de carga de la web.

Así que sé cuidadoso con las fuentes que utilizadas, piensa que tipografía usar (este artículo te pude venir bien), encola solo las necesarias y busca una buena combinación (te recomiendo este otro artículo sobre 7 combinaciones de Google Fonts listas para copiar y usar). Solo así utilizarás el verdadero poder de las mismas, que no es otro que mejorar la experiencia de usuario, con un aumento de la legibilidad y la accesibilidad de tu diseño web.

Web fonts en WordPress

Trabajando con Web Fonts en WordPress

Vamos a ser limpios y pulcros. Cuando diseñemos bajo WordPress, es una buena idea llevarnos la llamada a las fuentes a un sitio ordenado. Puede ser nuestro archivo functions.php del tema o plantilla, o el plugin de funciones que utilicemos para estos casos.

// Registrando Google Fonts en WordPress
if( !function_exists( 'wcsev' ) ) {
 function wcsev() { 
 wp_register_style( 'webfonts', 'http://fonts.googleapis.com/css?family=Roboto:400,400italic|Roboto+Slab:700', array(), '', 'all' );
 wp_enqueue_style( 'webfonts' );
 }
 add_action('wp_enqueue_scripts', 'wcsev');
}

De cualquiera de las formas, vamos a registrar una función donde encolemos como dichas tipografías. Nada complicado. En el ejemplo hemos llamado a nuestra función wcsev(), y la dirección se refiere a las tipografías con las que vayamos a trabajar. Si no tienes claro cual utilizar, puedes empezar por aquí o por aquí.

Con esta función puedes integrar varias tipografías, con los grosores y estilos que decidas, en este caso con una combinación de Google Fonts. Una vez realizado esto, vamos a nuestro archivo style.css que se encuentra en el directorio raíz de nuestra plantilla WordPress y podemos comenzar a utilizar la tipografía seleccionada como una fuente más.

h1 {
 font-family: 'Roboto Slab', serif;
 font-weight: 700;
}
h4 {
 font-family: 'Roboto', serif;
}

Conclusiones: Usa las Tipografías Web con cabeza.

Es un gran recurso. Estamos de acuerdo, pero piensa realmente el objetivo de la misma antes de actuar. Hablando en términos de rendimiento, las web fonts están un paso por detrás de las tipografías por defecto del navegador. Esto es evidente. La tipografía web es necesario que sea descargada por el usuario mientras que la tipografía por defecto ya está instalada en el dispositivo u ordenador.

Esto es una llamada más al servidor, y unos cuantos kilobytes más de transferencia. (aquí cada pequeño detalle cuenta para optimizar el rendimiento y los tiempos de carga) Sin embargo, no hay que obsesionarse con eso. Si sacrificando unas décimas de segundo vamos a lograr unos beneficios en la experiencia de usuario y legibilidad de nuestra web, yo hago el cambio. ¿Donde hay que firmar? 🙂

tipografia espacio

La clave está en diseñar con sentido común y cabeza. Combina una o dos fuentes máximo. Selecciona una legible y completa para los textos, que te guste y sea creativa (aquí algunos ejemplos). Dale un buen interlineado y un tamaño generoso (pero sin pasarte) y conseguirás que tus usuarios se sientan a gusto leyendo el contenido de tu web. Se que es algo intangible, pero por suerte medible, créeme (en breve escribiremos como aumentamos el tiempo de estancia en página de esta web en más de un 100% usando con sentido las tipografías)

Esto tiene dos ventajas claras: la experiencia del usuario mejora. Ya no escanea los artículos. Los lee, resulta agradable y la legibilidad de los mismos aumenta. ¿Y para Google? Hemos perdido unos décimas en tiempos de carga, pero el tiempo de estancia aumenta, con lo que los buscadores entienden que nuestro contenido y diseño gusta a los usuarios.  Te dejo un listado de las tipografías que nos gustan especialmente en SiloCreativo.

Pon todos los elementos en la balanza y decide hasta donde quieres llegar con el uso de las tipografías web. Personalmente (y sé que es un poco enfermizo) un diseño web con una fuente por defecto me deja la impresión de que está poco trabajado, en construcción. Parece que no se le ha dedicado suficiente tiempo. Las fuentes por defecto son aburridas y están muy vistas. Es verdad ¿Y tú, en qué lado de la balanza está tu diseño web?

Comentarios (8)

  1. Hola Ricardo

    Acabo de descubrir tu sitio y la verdad me encantó

    Excelente contenido.

    Una preguntita, ¿cuál es la font que usas para el texto de tus entradas? Me gustaría implementarla en algunos de mis blogs.

    Muchas gracias y felicidades, ya tienes un nuevo lector 🙂

    Jaime

    1. Hola Jaime, encantados de tenerte por aquí.
      En la versión actual de la web ( llamémosla de 2014, la cambiamos continuamente, es nuestro campo de pruebas 🙂 ) usamos una combinación de Roboto Slab + Roboto, jugando con los grosores o weight que permiten cada una. Ambas son muy ligeras, combinan bien y dan buena legibilidad. Perfecto para el usuario y para la velocidad de carga!

      Un saludo y gracias por comentar 😉

  2. Dentro de poco voy a crear una página web (es la primera que hago) y los consejos que dais en silocreativo son muy muy buenos! Muchas gracias por compartir vuestros conocimientos y ayudar a principiantes como yo.

  3. Estimado Ricardo. Recién encuentro este artículo y me pareció sumamente interesante. Pero me dejó una duda: ¿cómo incorporar a un wordpress fonts que no son de Google o de Typekit? Sitios como Fonstsquirrel y everythingfonts te permiten crear webfonts de fonts en tu disco rígido.
    Gracias!

    1. Saludos!

      Normalmente en las webs donde permiten crear dichas fuentes webs, al descargar los archivos viene un CSS de ejemplo sobre como incorporarlas a la web. Se trata de declararlas en el CSS e indicar la ruta de carga de los archivos TTF, OTF o similar.

      Aquí está explicado el proceso.

      Suerte!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *