Tipografía y color en páginas web: SEO & UX básico para periodistas y comunicadores

Un ejemplo de combinación de cuatro colores. Fuente: Colorhunt

Existe un amplio consenso entre los analistas a propósito de la estrecha relación que se da entre la experiencia de usuario o UX (por User eXperience) y la optimización para buscadores o SEO (por Search Experience Optimization).

Se trata de un círculo virtuoso porque un buen SEO atrae más tráfico a un sitio, y una buena UX no solamente retiene a ese tráfico sino que incrementa la posibilidad de que regrese, con lo cual mejoran las señales de usuario que Google y otros buscadores utilizan para determinar la calidad de un sitio.

La razón es que, más tiempo de permanencia y menores tasas de rebote (salir de una página sin hacer ningún clic), mejoran la autoridad de un sitio a ojos de Google, lo que produce que tenga sucesivamente mejores posiciones en sus páginas de resultados.

Se da la circunstancia que periodistas y comunicadores se encuentran entre los profesionales que necesitan crear y mantener sitios web, muchas veces bajo el formato de blogs personales, pero a la vez de carácter profesional.

Estos sitios deben ser creíbles por su contenido sin dejar de aportar una buena experiencia de usuario, primero por razones elementales de prestigio, pero por si hiciera falta otra motivación, por la estrecha relación SEO & UX a la que nos hemos referido.

Tipografía y color: los componentes más básicos de la UX

Si bien la UX tiene dimensiones muy diversas,  hay al menos dos componentes de un sitio web en los que es fácil arruinar la experiencia de usuario si no se poseen, al menos, algunas nociones de diseño, nos referimos a:

  • Tipografía

  • Combinaciones de color

Los sitios vinculados con periodistas y comunicadores pueden contener en realidad una amplia diversidad de contenidos multimedia, pero en casi todos ellos, los contenidos textuales son muy importantes, de aquí, a su vez, la importancia de las tipografías.

La importancia del color, por su parte, reside en que tenemos una cierta tendencia, que podemos señalar como “natural”, a utilizar colores en exceso para destacar o diferencias partes de un sitio. Es un síndrome que puede llevar a un sitio a parecer pueril, en lugar de profesional. 

En lo que sigue, consideramos ambos aspectos con algo más de detenimiento para pasar a ofrecer recursos en cada uno de ellos.

Uso de la tipografía en sitios web

Tipografías de la página de Google Fonts
Ejemplo de tres familias tipográficas. Fuente: Google Fonts

El problema principal de la tipografía es, en teoría, el más fácil de evitar y, sin embargo, es lastimosamente frecuente. Consiste en ver sitios web, incluso sitios profesionales o de organismos importantes, que contienen problemas de legibilidad.

El contenido formado por texto es un contenido destinado a ser leído, por tanto, el diseño no debe nunca conducir a una tipografía  que no priorice la legibilidad, porque entonces se trata de un diseño que atenta contra la función, cuando se supone que el buen diseño realza o ayuda a la función.

Partes de las tipografías
Anatomía de una fuente tipográfica. Fuente: jsolucioncreativa.com. Clic para hacer zoom

La captura anterior nos aporta orientaciones sobre la forma de describir o de analizar una fuente. La cuestión es que, para que una tipografía sea legible, basta con seguir unas reglas elementales:

  • contraste entre figura y fondo suficiente, tal como letra de color oscuro sobre fondo claro, e idealmente, algo tan simple como negro sobre blanco;
  • asta de la letra estándar, es decir evitar las falsamente elegantes que tienen un asta más fina de lo normal (si se pregunta qué es normal, el asta de la letra que está leyendo lo es);
  • cuerpo o tamaño también estándar, por tanto,  expresado en términos relativos de hoja de estilo como font size 100%, o 1em, o el tamaño 16px como mínimo si lo expresamos en términos absolutos,  aunque esto último depende de la fuente concreta (la de este artículo debe ser 18px con Oxygen o 19px con Roboto, Ubuntu, Segoe UI o PT Sans);
  • no más de tres familias de letra diferentes en la misma página.
Admiro Fundéu por su excelente labor, pero no tanto la tipografía de su sitio web: emplea gris  sobre blanco. Puede parecer elegante, pero es un ejemplo de diseño que va contra la función en una, por otro lado, gran página  a todos los efectos (Captura: Noviembre 2017)

Como medidas adicionales, se considera conveniente cuidar el interlineado evitando uno excesivamente denso, repartir blancos utilizando párrafos de pocas líneas, así como evitar que el ancho o la longitud de cada línea ocupe la totalidad de la pantalla, para lo cual es conveniente situar también espacios en blanco en los lados de la página.

Por si resulta útil, tenemos un glosario en idioma inglés en el sitio web del que hemos tomado la siguiente captura. 

Glosario sobre tipografía en ingles. Fuente: Fonstshop

Combinaciones tipográficas

Un aspecto algo más complicado es la elección de las familias tipográficas que queremos combinar, típicamente, la que elegimos para titulares y la que elegimos para el cuerpo, dado que, al igual que hay buenas combinaciones, las puede haber poco acertadas.

Afortunadamente, disponemos de algunos recursos que nos ayudan a seleccionar combinaciones óptimas de tales familias. Como hemos señalado, tal combinación suele referirse a la elección de una familia para el cuerpo y otra para los títulos. 

Los siguientes sitios proporcionan una excelente guía para estos propósitos:

El caso de Google Fonts

Tipografías del sitio Google Fonts
El sitio Google Fonts permite explorar más de 800 fuentes mediante diferentes criterios y filtros como los que muestra la captura

Por su parte, el siguiente sitio, consiste en la página web de Google donde podemos ver de una forma muy gráfica las diferentes fuentes que podemos usar en el caso de que el tema de nuestro CMS (WordPress, p.e.) soporte el uso de Google Fonts:

En esta página, podemos explorar las más 800 fuentes utilizando las opciones de una útil barra de navegación a la derecha, como hemos mostrado en la captura precedente.

Además, si hacemos clic en una de las fuentes, además de información específica sobre la misma, tenemos ejemplos de parejas de fuentes, como podemos ver en la captura que sigue para el caso de Roboto.

Ejemplos de combinación populares de pares de fuentes para el caso de Roboto. Fuente: Google Fonts

Combinar con y sin serif

En general, una combinación muy utilizada consiste en elegir una fuente con y otra sin serif. Típicamente, sin serif (como esta misma), para el contenido, porque tradicionalmente se ha considerado que en pantalla son más legibles. En el caso de la web, podiblemente el uso de fuentes sin serif es más habitual también porque se asocian a una cierta idea de modernidad.

En cambio, para los títulos suele utilizarse una fuente con serif,  ya que al ser letras de mayor tamaño la legibilidad no resultaría afectada, a la vez que permiten un buen contraste con el cuerpo.

Resulta curioso observar que, en el caso de textos impresos solía utilizarse la cominación contraria: con serif para el cuerpo, porque se suponía que el serif ayudaba a seguir la lectura, al ser letras más pequeñas, y sin serif para los titulares.

En el caso del siguiente ejemplo tenemos una combinación típica de la web, con una fuente, Merryweather con serif para el título y otra, Open Sans, sin serif, para el contenido (el ejemplo está tomado de Google Fonts):

Combinación de letra serif para el título (Merrywheater) y san serif para el cuerpo (Open Sans). Fuente: Google Fonts

Otra posibilidad, aún más simple, es utilizar una misma fuente con sus variantes con y sin serif, como muestra el siguiente ejemplos con Roboto, una tipografía enormemente popular en la web:

Combinación de una misma fuente tipográfica (Roboto) con y sin serif. Fuente: Google Fonts

De todos modos, sobre esta “teoría” que atribuye más legibilidad a las fuentes sin serif en pantalla, cabe señalar su posible inadecuación a la situación actual. Dada la calidad general del parque de pantallas de ordenador actuales, posiblemente esta apreciación ya no tenga mucho sentido y de este modo, lo cierto es que tenemos mucha más libertad de elección.

Un indicador importante es que muchos medios de comunicación utilizan fuentes con serif en el cuerpo de las noticias. Esto puede ser debido a la influencia de la página impresa, así como al hecho de que las fuentes con serif a una cierta idea de solvencia y rigor. En todo caso, no deja de ser significativo que la mayoría de los medios en Internet sigan utilizándolas sin ningún problema especial, al parecer.

Un ejemplo de uso de fuente con serif en el contenido (y los títulos) tomado de un artículo publicado en The Guardian

En la captura precedente hemos tomado un ejemplo de un medio digital de gran prestigio, The Guardian, donde podemos ver que utilizan una fuente con serif (se trata de un fuente del mismo nombre, Guardian) tanto para el cuerpo como para el título (si el lector tiene curiosidad por la noticia, aquí tiene el enlace a la misma).

¿Qué fuente es esta?

A veces sucede que consideramos atractiva la tipografía una página que estamos visitando y nos gustaría saber de cual se trata. Decimos esto porque existen plugins para el navegador que nos permiten identificar las fuentes de un sitio web pasando el cursor sobre la misma. Es el caso de WhatFont que funciona sobre Chrome.

El plugin para Chrome WhatFont permite identificar una fuente pasando el cursor sobre ella.

Uso del color en sitios web

Combinaciones de colores según Colorhunt
Ejemplos de combinaciones de colores. Fuente: Colorhunt

Con los colores nos sucede algo parecido. La norma esencial es absolutamente fácil de observar: se trata de mantener, en general, una buena combinación figura/fondo, es decir, una que favorezca el contraste y que no impida (ni distraiga) la lectura o la visulización de los contenidos.

De aquí, la supremacía del color blanco como fondo que es fácil observar en la mayoría de sitios web profesionales, incluida la mayoría de sitios de medios de comunicación.

En ellos, el blanco (o un color extremadamente suave) es el color de fondo elegido casi siempre. Incluso como parte de la composición general, con frecuencia el blanco resulta ser uno de los colores dominantes (a veces los diseñadores lo denominan espacio negativo en cuanto el blanco se equipara a ausencia de contenido).

Ejemplos de combinaciones válidas de color. Fuente: Coloors.co

Combinaciones de color

Ahora bien, no es ningún secreto que los sitios web suelen necesitar de otros colores, más que nada porque con blanco sobre blanco no iríamos a ningún sitio.

Los colores suelen utilizarse para diferenciar secciones: por ejemplo, la navegación del contenido, o el contenido principal de contenidos destacados, etc., o las diferentes secciones entre ellas. Por la misma razón, es frecuente utilizar en  los titulares con un color diferente del que se utiliza para el cuerpo, etc.

Nuevamente, nos encontramos con la posible trampa que puede afectar a quienes no posean nociones de diseño de elegir combinaciones de colores antiestéticas o incluso antifuncionales (ver Anexo 1).

Como en el caso de la tipografía, afortunadamente disponemos de algunos sitios que nos permiten consideran combinaciones de color cuya unión es virtuosa.

Algunos de los sitios donde podemos encontrar consejos sobre combinación de diferentes colores, son los siguientes:

Nuevamente, el consejo si no tenemos nociones de diseño y no queremos correr riesgos es ser parco en el uso del color. Un sitio basado en el blanco, el negro y, como máximo, un tercer color, como el azul o el naranja, siempre será acertado en este aspecto.

¿Qué color es este?

Al igual que nos sucede con loa tipografía, puede suceder que, visitando un sitio web veamos un color que nos parece adecuado o atractivo y deseamos conocer cuál es su código hexadecimal para poder usarlo en nuestra web. Tal como sucedía con las tipografías, hay plugins que, al pasar el cursor sobre un color nos indican su código hexadecimal. Es el caso de ColorPick Eyedropper, una extensión del navegador Chrome.

ColorPick Eyedropper nos permite conocer el código exhadecimal de cualquier color presente en una página web.

Implementación

Ejemplo de modificación de la tipografia en un tema de WordPress

Lógicamente, para poder elegir familias tipográficas y combinaciones de colores necesitamos un CMS que nos permita implementar y modificar tal clase de opciones.

En el caso de WordPress, necesitamos un tema o plantilla (theme) que sea compatible con las fuentes de Google (más de 800 actualmente) y que permita modificar los colores de la misma, es decir, necesitamos poder modificar la hoja de estilo (CSS) del sitio.

Ejemplo de modificación de los colores en un tema de WordPress

Por desgracia, la mayor parte de los temas gratuitos tiene serias limitaciones en estos apartados. Otra cosa es que los precios de los mejores temas de pago (premium) tampoco arruinan a nadie (entre 40 y 90 euros).

La barrera principal más bien está en la necesidad de utilizar versiones de WordPress que, a su vez, requieren un alojamiento web de pago. Pero si ha dado este paso, es absurdo no utilizar un tema que permita hacer modificaciones en estos aspectos tan esenciales de la UX.

Conclusiones

Dos de los principales problemas de la UX de un sitio web se pueden solucionar de forma muy eficiente con la utilización adecuada de las tipografías  y las combinaciones de colores.

Visto desde el lado opuesto, son dos componentes del diseño de un sitio que, mal implementados pueden arruinar completamente la experiencia de usuario. Una legibilidad deficiente llevará al abandono prematuro del sitio y disminuirá la probabilidad de que los usuarios regresen en el futuro, lo que afectará al SEO del sitio.

Los mismo puede decirse del uso de las combinaciones de colores. Ni periodistas ni comunicadores en general deberían fallar en estos dos aspectos esenciales puesto que se trata de profesionales para los cuales la información de calidad es esencial, aspecto en el cual no solamente interviene el contenido, sino también los dos aspectos formales ya señalados.

Gracias a recursos como los reseñados aquí, no es necesario tener amplios conocimientos de diseño para evitar las peores trampas de usabilidad que una mala elección en términos de tipografía o de colores podría acarrearnos. Lógicamente, sin recurrir a un diseñador profesional no será fácil tener, además, un aspecto original, o que sea capaz de transmitir ciertos valores, pero tendremos un sitio usable, accesible y con un diseño más que digno.


Anexo 1: Accesibilidad y color

Un problema diferente (y complementario) en relación con color se refiere al tema de la accesibilidad que aquí no hemos considerado, pero del que dejamos constancia aunque sea a través de este anexo. Cuando consideramos temas de accesibilidad nos estamos refiriendo a algún tipo de discapacidad, como visión parcial o daltonismo.

En este sentido, la precaución principal consiste en evitar el uso del color como único medio  de transmitir instrucciones o informaciones importantes, tal como señala uno de los criterios de accesibilidad sobre el uso del color:

El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. (Fuente: “Comprender las WCAG 2.0”. Criterio 1.4.1 Nivel A)

Anexo 2: colores y tipografías utilizados este sitio

Para posibles interesados: este sitio suele utilizar fuentes como PT Sans o bien Oxygen para el cuerpo y los títulos. En ocasiones he utilizado también las fuentes UbuntuMerryweatherMontserrat,  Open Sans, todas sin serif y de una enorme legibilidad. Últimamente, me he inclinado por Segoe UI. Para cuando el lector lea esto, no sé cual será la fuente utilizada, pero casi seguramente será una de las anteriores (hago cambios con frecuencia, pero siempre con fuentes sin serif y sobre todo con fuentes que privilegian la legibilidad, porque hago pruebas constantemente).

Utilizo fuentes como Ubuntu  en ocasiones para la cabecera y los títulos (h1-h6) sobre todo porque permite diferenciar bien entre letras que en otras tipografías son ambiguas, como entre las letras i y l que en algunas combinaciones aparecen idénticas.

En concreto, a veces he optado por utilizar solo minúsculas en la cabecera, y entonces, dadas las dos “eles” de mi nombre, otras tipografías sin serif no permitirían saber si las dos primeras letras que aparecen en la cabecera de mi sitio (a veces lo pongo todo en minúsculas) son dos “eles” minúsculas o dos “ies” mayúsculas, o primero una i mayúscula y luego una l minúscula o al revés.

Concretamente, con Helvetica, es imposible de distinguir entre dos “eles” minúsculas una “i” mayúscula más una “ele” minúscula o dos “ies” mayúsculas:

A continuación, las tres cadenas anteriores, todas distintas, quedan iguales si se utiliza la fuente Helvetica:

ll vs Il vs II

Si no lo creen, aquí tienen el código fuente de la secuencia de caracteres anterior, vean que ninguno de los tres pares de letras es igual, sin embargo en la fuente Helvetica son idénticas:

Para el color, dada mi inseguridad en la materia, las combinaciones que pueden verse en la cabecera, barra de navegación y títulos están obtenidas de Colorhunt, siendo esta exactamente la utilizada (al menos en el momento de publicar esta entrada, si el lector accede a ella mucho después, puede que haya cambiado; tiendo a ser frívolo en este aspecto).

Por último, el tema utilizado en mi sitio, que me permite utilizar la mayoría de las fuentes de Google así como amplias posibilidades de combinaciones de color, es GeneratePress, en versión Premium (40 dólares).

Para saber más

¿Suscribirse?


Si desea recibir información sobre nuevas publicaciones de este sitio, puede suscribirse (ver formulario al pie) para recibir las novedades por correo.