En post anteriores, hemos tratado detenidamente otros estilos para tu web como el color y la fotografía. Hoy, voy a dedicar el artículo a otro factor más olvidado, pero no por ello menos importante: la tipografía. En esta guía encontrarás fuentes recomendadas para web, su clasificación, consejos para utilizarlas de manera correcta y dónde encontrarlas, ¡vamos a ello!
¿Por qué he de tener en cuenta la tipografía? ¿Qué me puede aportar?
Los estilos en tu web, son una traducción de un estudio previo de tu marca. Estos elementos, reflejan tus valores, tu propuesta diferencial y logran conectar con tu público objetivo. En resumen, el diseño de tu web, es una estrategia enfocada a conseguir tus objetivos.
La tipografía en concreto, es un elemento muy potencial si la utilizas de manera correcta. Seleccionar una buena fuente, te puede ayudar a conectar mejor con tu público y mejorar su experiencia a través de tu web.
Una tipografía adaptada a pantallas de dispositivos, mejorará la legibilidad del usuario. Esto se traducirá en que el posible cliente, se sienta cómodo y permanezca más tiempo en tu sitio web. Y el interés, aumenta enormemente las posibilidades de un posible contacto, ¿entiendes mejor su importancia?
Clasificación de las tipografía y usos
El primer paso que vamos a dar para comprender la tipografía, es conocer sus diversas clases. En el siguiente listado, podrás encontrar algunas de las tipologías y ejemplos gráficos de las mismas.
- Serif: Su nombre se debe a que contienen «serifas», que son los trazos que se encuentran en los extremos de las letras. Se utilizan para textos de lectura amplios sobre papel, ya que sus terminaciones permiten a la vista enlazarlas unas con otras de manera fácil.
- Sans serif o palo seco: Al contrario que las anteriores, no presentan trazos en sus extremos. Su uso es recomendado para pantalla, en titulares y textos de extensión breve/media.
- Manuscrita: Recuerdan a la escritura convencional caligráfica. Son tipografías complejas de utilizar, pero pueden aportar un toque diferencial de mucha personalidad. Debes restringirte de utilizarlas en textos de lectura.
- Decorativa: Sus formas pueden ser muy variadas. También aportan originalidad y personalidad a tu web. Al igual que las manuscritas, debes utilizarlas con cuidado y siempre, evitando textos de lectura.
¿Qué tipografías puedo utilizar para mi web?
Puedes seleccionar un catálogo de una a tres tipografías para tu web. No es recomendable utilizar más de tres diferentes, ya que puedes perjudicar la jerarquía y comprensión de los textos en tu página.
Como te he recomendado anteriormente, las que mejor se adaptan a los dispositivos móviles son las «sans serif». Al no disponer de los remates en sus extremos, la legibilidad en pantalla (que es menos nítida que en papel) es mayor.
Existe una gran variedad de fuentes sans serif de calidad. A continuación, te dejo un listado con mis favoritas para que puedas aplicarlas a tu web:
- Open sans
- Roboto
- Lato
- Helvetica neue
- Montserrat
- Proxima Nova
Para generar mayor riqueza y diferenciación en tus textos, utilizar diversas familias de una fuente te dará muchísimo juego. También puedes combinarlo con el uso de de alguna tipografía manuscrita o decorativa en los titulares (¡ojo! cuidado de no afectar la legibilidad y con lo que quieres transmitir). El uso de tipografías condensed, también está muy extendido en web. Te puede ser de mucha utilidad para comprender más texto en menos espacio.
¿Cómo puedo utilizar de forma correcta la tipografía seleccionada?
Que hayas seleccionado una buena tipografía, no te garantiza un resultado óptimo. Has de tener en cuenta algunos factores para garantizar su funcionalidad mediante un uso correcto. Toma nota de los siguientes consejos:
- Tamaño: Cada fuente posee unos rasgos diferentes. Esto da lugar, a que dos tipografías con un mismo tamaño en pixeles, puedan tener unas dimensiones diferentes. Aún así, te puedo recomendar una medida desde 14 a 16 px
- Contraste: Una regla básica para la legibilidad. Intenta utilizar colores lo más contrastados posibles entre fondo y texto. Los fondos oscuros absorben mucho la visión, deberás tener cuidado con ellos. Para textos más extensos, la tradicional opción de negro sobre blanco siempre te dará buen resultado. Mi pequeño truco, es enriquecer los blancos y negros convirtiéndolos en grises. Puedes utilizar gris oscuros con un ligero tono hacia tu color corporativo, y un color crema suave para el fondo.
- Jerarquía: Utiliza la variedad de tamaños y familia (bold, medium, regular, light, italic…) para organizar los elementos según importancia y diferenciar secciones. Por esta razón, un factor importante a la hora de elegir una tipografía, es fijarse en sus variedades familiares de peso.
- Espacios: Olvida el horror vacui y da rienda suelta a los espacios en blanco en tu web. Son un factor importante para que la página respire y tu lector no se agobie. Cuida que tus párrafos estén debidamente separados. También es importante que otorgues algo más de espacio al final de un párrafo y antes de empezar una sección o subtitulo diferente. Esto te va a ayudar a indicar que estás acabando un contenido y empezando con otro.
- Interlineado: Cuida el line-height (espacio entre frase y frase). Una medida orientativa sería: 4px de interlineado más por cada 10px de texto.
¿Dónde puedo encontrarlas?
Existen multitud de plataformas para conseguir tipografías, aunque muchas de ellas de dudosa calidad. Además, si te descuidas, puedes encontrarte alguna protegida por licencias. Si quieres asegurarte de hacer una elección de calidad y 100% gratuita, ficha las siguientes fuentes: Google fonts y Font Squirrel. En las mismas, se incluyen los códigos para que puedas insertarlas de manera fácil y rápida en tu web, ¡así de fácil!
Con esto finalizamos la lección de hoy. Ahora como siempre, te toca a ti poner en práctica los conceptos aprendidos. Cuéntame tu experiencia y tus resultados en los comentarios, ¡estaré encantada de darte feedback!
