4 combinaciones de fuentes tipográficas perfectas para web

Publicado el · ·

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.

Haz clic en el '+' para seleccionar la tipo de tu interés.
Haz clic en el ‘+’ para seleccionar la tipo de tu interés.

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.

Desde aquí podrás descargar la fuente seleccionada u obtener el código CSS.
Desde aquí podrás descargar la fuente seleccionada u obtener el código CSS.

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!

¿Te ha gustado esta entrada de blog? Dale 5 estrellas. ¡Gracias!

4 combinaciones de fuentes tipográficas perfectas para web
Votar es valorar :-)

¡Hola! Soy quien ha escrito este post con cariño

Carolina López

Carolina López

Me encanta asociar la publicidad y el diseño web: creo webs que atraen a los usuarios y que son capaces de vender una estufa en el desierto. Todo ello sin olvidar una estética cuidada, cálida y bastante personal.

Déjame un comentario si te apetece y lo responderé personalmente :)

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Información básica sobre protección de datos:
Responsable: Estudio Momo Comunicación, S.L. (SrMomo).
Finalidad: Moderar y responder comentarios de usuarios.
Legitimación: Consentimiento del interesado.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: info@srmomo.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

El curso "Los 6 primeros pasos para que triunfes con tu web" consta de:

  • 6 super lecciones enviadas directamente a tu bandeja de entrada.
  • 4 ebooks descargables con los aspectos esenciales de todo proyecto de éxito en Internet.
  • 1 hoja de trabajo que te ayudará a organizarte y a plantearte todos los aspectos clave para tu éxito.

Información básica sobre protección de datos:
Responsable: Estudio Momo Comunicación, S.L. (SrMomo).
Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico.
Legitimación: Consentimiento del interesado.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: info@srmomo.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

No enviamos spam y puedes darte de baja cuando quieras.

Únete a la comunidad de SrMomo

Y recibirás nuestro curso gratuito de WordPress

Compartir5
Twittear
Compartir