Uno de los elementos más importantes del diseño web es la tipografía. En este artículo te presento 4 combinaciones que encajan en todo tipo de negocio y que además son gratis y están disponibles en Google Fonts. ¡Qué más quieres!
Siempre me ha parecido curioso la cantidad de cosas que dice una tipografía de una web. Y también me sorprende el hecho de que poca gente se plantee este dilema y deje la tipografía que viene por defecto en la plantilla. Sin prestarle demasiada atención.
La fuente de tu web puede darle una personalidad única y su elección depende de algunos factores que a continuación te explico.
Vale, quizás no eres un apasionado de la tipografía y si lo eres seguramente todo lo que diga en este artículo ya te lo sepas de carrerilla. Pero vamos a repasar 3 aspectos clave del mundo tipográfico web.
#1 · Diferencias entre tipografías Serif y Sans Serif
Dicho de forma rápida, las tipografías Serif son aquellas que tienen ‘adornos’ en las puntas de las letras (serifas) y las Sans Serif son las que no (sin serifas). Las Sans Serif son las tipo ‘palo’.
¿Cual es mejor para web? Bueno, se suele decir que las mejores tipografías para una web son las Sans Serif, ya que son más fáciles de leer en pantalla.
Pero apasionados de la tipografía a lo largo y ancho del planeta opinan que en la era digital hemos renunciado a legibilidad precisamente por haber prescindido de las serifas.
En definitiva, que existe un debate interesante al respecto en el que no creo que ahora mismo convenga meterse.
Por ejemplo, Playfair Display es una bonita tipografía tipo Serif (mira sus aristas graciosamente rematadas) y Roboto es una de las tipografías Sans Serif más utilizadas en web.
Para mi, a la hora de escoger una tipografía es más importante tener en cuenta el sector de la web que se va a diseñar y lo que se pretende transmitir con ella.
- Creo que las serifas otorgan cierta exclusividad. Me parecen elegantes y muy estéticas. Por eso las veo perfectas para webs de lujo o donde el visitante deba asociar diseño al producto o al servicio.
- En cambio las Sans Serif las veo más para webs que hablan sobre tecnología, productos de compra compulsiva, mundo low-cost, etc. Allí donde los que se quiera expresar es una relación cercana con cualquier perfil de visitante o donde el usuario tenga que pasarse largos ratos leyendo.
Hay otros tipos de tipografías para web como la Handwriting (escrita a mano) o la Monospace (en la que todos los caracteres ocupan el mismo espacio). Pero las reinas del cotarro son las que te he comentado en este punto.
¡Bien! Con esto ya tienes resuelta la primera duda que te va a surgir en cuanto entres en Google Fonts. Pero… ¿qué es eso de Google Fonts? Si te estás preguntando esto necesitas leer el siguiente punto.
#2 · Qué es Google Fonts y cómo se usa
Google Fonts es un servicio del Gigante que ha hecho la vida más fácil a muchos diseñadores pues permite que las webs carguen las tipografías más rápidamente. Digamos que es una especie de catálogo de tipografías en la nube al cual tú puedes acceder de forma gratuita.
Cuando diseñes tu web no tienes que tener el archivo de la tipografía ni subirlo a tu servidor (como antiguamente) sino que llamarás a Google Fonts desde un enlace. Esto te permite ahorrar algo de espacio en el servidor y ganar velocidad.
Lo mejor de Google Fonts es que sus fuentes son de calidad y esto implica que suelen tener todos los caracteres necesarios para nuestro idioma (‘dichoso’ español/castellano, con sus acentos y sus símbolos extraños). Y además es gratis: ¡yupi!
Para utilizar Google Fonts primero accede a su web. Verás mogollón de tipografías cargadas. Puedes aplicar filtros, seleccionar el tipo de tipografía que deseas o buscar por nombre. Te invito a que juegues con esta genial herramienta.
Selecciona las tipografías que te gusten con el símbolo . Te aparecerán en un recuadro en la parte inferior de la pantalla. En ese cuadradito verás que puedes decargarlas en tu ordenador para ver cómo quedan o usarlas en tus documentos.
También verás instrucciones para importarlas en tu web a través de CSS. Si tu plantilla de WordPress no tiene una opción para customizar la fuente desde el propio panel de administrador, ésta es la información que te interesa.
Pero sinceramente, si tu plantilla no te permite cambiar de fuente desde el panel de administrador y no tienes conocimientos de HTML y CSS3, lo que te recomiendo es cambiar de plantilla a otra que te permita escoger las tipografías de tu web mediante Google Fonts.
#3 · Cuántas tipografías poner en una web.
Dos. En una web y en cualquier documento que represente a un negocio o una marca. Generalmente una se usa como titulares y texto de acento (para botones, llamadas a la acción, etc) y otra para el cuerpo de texto (los párrafos de texto normales, vamos).
Sabiendo esto puedes generar combinaciones geniales de tipografías que transmitan lo que quieres. Eso sí, asegúrate de que son dos tipografías limpias, sin demasiadas florituras y super legibles para personas con algún problema de visión.
¡Ah! Y asegúrate también de que tienes disponibles las versiones en negrita y cursiva. Importante sobretodo para la tipografía de cuerpo de texto.
A la hora de escoger tipografías para web no se trata de ser super original. Una tipografía buena es aquella que no destaca pero hace brillar tu contenido.
Ejemplos de combinaciones de tipografías bonitas para web
Vale, después de la teoría viene la práctica. Estas son 4 combinaciones de fuentes disponibles en Google Fonts que me encantan y que están listas para copiar. Te digo además qué me inspiran y para qué tipo de negocio las usaría.
Esta combinación tiene tanto una bonita Serif con una Sans Serif, lo que la hace apta para casi cualquier tipo de negocio. Si tuviera que escoger un perfil, yo la veo para un negocio que lleva tiempo en el sector y realiza un servicio o producto de calidad y para el que Internet es un fuerte medio de venta para este negocio. Hablaríamos por ejemplo de un fotógrafo con experiencia, de una imprenta o un negocio local con años de antigüedad.
Esta combinación es sorprendente porque utiliza la tipografía Serif en el cuerpo y no en el titular. Lo que la hace idónea para si buscas sorprender con tu servicio. Que sea algo premium pero que a la vez seas cercano con tu audiencia. Por ejemplo un hotel, una empresa de servicios financieros o una academia.
Esta combinación son dos tipografías tipo Sans Serif. Esto transmite mucha cercanía al visitante y da un toque muy moderno a la web en general. Si tuviera que escoger un tipo de negocio, elegiría una tienda online de productos tecnológicos, una empresa de software o un estudio creativo o de diseño.
He querido incluir una tipografía tipo Handwriting aunque admito que es difícil encontrar una combinación que no quede demasiado recargada. Esta combinación la veo muy femenina, cercana y artesanal. Por eso la utilizaría en una web de venta de productos hechos a mano o ecológicos, una pastelería, un hostal/restaurante con encanto o una tienda online de productos infantiles.
Conclusiones: escoger una tipografía no es fácil
Mira, te lo confieso: me apasionan las tipografías. Me alucina que con el poco espacio que ocupa una letra se pueda expresar tanto. Por eso para mí nunca ha sido fácil escoger combinaciones tipográficas cuando me enfrento a una nueva web. Te aseguro que me paso un buen rato analizando el tipo de negocio y el tipo de visitante.
Eso sí, tengo mis 10-15 fuentes de confianza seleccionadas y rara vez escojo otras. Simplemente me dedico a combinarlas entre ellas. ¿Porqué? Me evito problemas y dolores de cabeza. Existen tantas tipografías que es muy difícil escoger una buena sin volverte loco/a.
Espero que este blogpost te haya servido para arrojar un poco de luz sobre los temas tipográficos y que escojas una buena combinación de dos tipografías para tu web.
¡Y si la tienes me encantaría que la compartieras conmigo! Déjame un comentario para darme el chivatazo o si tienes alguna duda.
Por cierto, si tras tanta tipografía te apetece leer algo sobre píxeles, en esta entrada te cuento los secretos para que sepas escoger las imágenes para tu web.
¡Gracias por leer!
