Cómo elegir las tipografías para tu web.

Cómo elegir y combinar las tipografías de tu web

Lo confieso. Me encantan las letras bonitas: la tipografía, el lettering y la caligrafía.

Me pierdo en Pinterest. Me pierdo en las herramientas online para crear combinaciones tipográficas. Me pierdo entre las webs con tipos de letra bonitos. Y me pierdo por las calles mirando carteles y letreros. Me encantan los letreros antiguos de las tiendas de toda la vida. Y es que las tipografías hablan por sí mismas y combinarlas es un arte como otro cualquiera.

Y aquí aparco mi predilección por las letras bonitas porque el objetivo de este artículo no es hablarte sobre mis gustos sino darte unas pautas para elegir las tipografías de tu web.

¿Cuántas?

Otra vez la famosa frase: menos es más. No hay una respuesta universal pero como recomendación una con diferentes estilos o dos son más que suficientes para crear una web con jerarquía, coherencia y personalidad.

¿Qué quieres transmitir?

Las tipografías sirven para escribir y contar mensajes pero ellas mismas con sus formas y sus trazos son capaces de comunicar sensaciones.

Por lo tanto, elegir las tipografías en función de la imagen de marca que quieres proyectar reforzará el mensaje. Dentro de cada grupo hay infinidad de tipografías diferentes y las sensaciones que transmiten pueden variar pero en general estos son los valores que se asocian con los principales tipos de letra. No es algo radical. Las tipografías se utilizan en un contexto y rodeadas de otros elementos que en conjunto son los que marcan las sensaciones transmitidas.

Tipografías y su significado. Cristina Llorente.

Serif.

Se caracterizan por tener remates en los extremos y sus trazos suelen tener diferente grosor.

Se asocian con clasicismo, elegancia, formalidad.

Se utilizan, por ejemplo, en moda.

Sans serif.

No tienen remates y sus trazos suelen tener el mismo grosor.

Se asocian con modernidad, minimalismo, dinamismo, neutralidad.

Se adaptan a casi todos los proyectos. Se utilizan en negocios online.

Slab serif.

Similar a las serif pero con los remates más rectos.

Transmiten fuerza y robustez.

Se utilizan en proyectos online.

Caligráficas.

Imitan la escritura manual. Sus trazos son regulares. 

Se asocian con elegancia, exclusividad.

Se utilizan, por ejemplo, en sectores relacionados con el lujo.

Manuscritas.

Imitan también la escritura manual pero son más variadas y sus trazos más irregulares que los de las caligráficas. 

Dentro de esta familia hay fuentes tan diferentes que se pueden asociarse con cercanía, delicadeza, feminidad, creatividad.

Se utilizan en negocios de lo más variado, restaurantes, marcas handmade, negocios digitales.

Display.

Son tipografías decorativas y diferentes unas de otras.

Tienen una personalidad muy definida.

Se utilizan para títulos, carteles o logotipos. No son apropiadas para textos porque su legibilidad es complicada en textos largos.

Y estas son las sensaciones que se asocian con los diferentes estilos tipográficos:

Negrita o bold.

Fuerza, importancia, robustez.

Light.

Ligereza, minimalismo, delicadeza.

Cursiva.

Elegancia.

¿En qué tipo de textos las vas a utilizar?

—> Bloques de texto. En este caso es imprescindible elegir una tipografía con buena legibilidad. Si elegimos, por ejemplo, una tipografía decorativa para un texto largo no se leerá bien. Las más indicadas por su buena legibilidad en pantalla son las tipografías sin serif o de palo seco. No obstante, hay excepciones y algunas tipografías con serif también tienen buena legibilidad.

—> Títulos y textos cortos. Los textos cortos y destacados dejan mayor libertad a la hora de elegir tipografía. También es necesario que sean legibles, sin embargo, no es necesario mantener la atención de forma continuada para leerlos por lo que se pueden utilizar tipografías en función de la estética y de la sensación que se quiera transmitir. 

Tanto las serif como las sin serif van bien para títulos y textos cortos destacados.

—> Palabras destacadas y detalles. A veces es interesante destacar alguna palabra por encima del resto, una sección del menú, el texto de un botón, el nombre de un apartado. Y aquí la libertad es aún mayor que en los títulos. Según la imagen que se quiera dar se pueden utilizar tipografías caligráficas o manuscritas. Las manuscritas son tipografías con mucha personalidad, suelen ser más difíciles de leer y si se abusa de ellas pueden recargar y cansar demasiado pero pueden quedar bien como detalle. 

¿Cómo combinarlas?

Una sola tipografía:

Combinando grosores y estilos.

Dos tipografías:

Que sean diferentes entre ellas para que haya contraste y se note.

Que una tenga más personalidad que la otra. Una sencilla y con buena legibilidad para los textos y otra con más personalidad para los títulos y destacados.

Por ejemplo, una con y otra sin serif.

¿Quieres jugar a combinar tipografías?

Aquí te dejo dos herramientas que te encantarán.

typ.io. Muestra ejemplos reales de combinaciones tipográficas a partir de la que elijas.

https://www.canva.com/font-combinations/. Sugiere combinaciones a partir de una tipografía.

Estos son algunos criterios para elegir y combinar las tipografías. Pero como siempre, cada proyecto es único, tiene unas necesidades y un estilo que se tiene que ver reflejado tanto en el tono de voz como en el diseño. No sé si te pasa, pero a mí cuando llego a la tipografía adecuada algo me hace click y me dice que he llegado a la que buscaba.

Y tú, ¿qué criterio sigues para combinar tipografías? Te leo en los comentarios.

Etiquetas:
16 Comentarios
  • ADELA EMILIA GOMEZ AYALA
    Publicado en 17:02h, 04 abril Responder

    Hola Cristina.

    Muy interesante tu post. El tema de las tipografías para mí es una perdición.

    Cuando he tenido o tengo que escribir textos que luego se van a imprimir unas veces cojo unas, otras otra totalmente diferente. Según me pille.

    Soy consciente, de que cada tipo de letra transmite una idea diferente, pero yo (cuando renueve la web, algún día), sinceramente sería incapaz de elegir el tipo de letra.

    Tendría que acudir a un profesional, que me asesorase, pues ya te digo, soy un desastre.

    Y en efecto, el impacto que te da la letra de la web es importante, pues te predispone o no, a entrar.

    Muy interesante; en las herramientas, no me meto, porque como me ponga a hacer combinaciones, me puedo pasar un día entero para hacer una infografía (tengo esa habilidad para perder el tiempo).

    Gracias por tu post.

    (Ah, una pequeña confesión, yo también me pierdo por las letras de las calles, nunca se en qué calle estoy, o en qué calle dejé el coche aparcado!!!!!!!)

    Un afectuoso saludo

    • Cristina Llorente
      Publicado en 09:35h, 05 abril Responder

      Hola Adela,

      ¿Cómo que una tipografía distinta para cada contenido que creas? Cuando he hablado de las tipografías para la web debería haber hablado en realidad de las tipografías para la marca. Lo ideal es elegir la o las dos tipografías que representen tu marca y utilizarlas en todos tus contenidos no solo en la web.
      Eso tiene bastantes ventajas Adela, por una parte das coherencia a tus contenidos y facilitas que tu público reconozca tus contenidos tengan el formato que tengan. Y por otra parte, te olvidas de estar seleccionando siempre las tipografías que quieres usar porque ya sabes que siempre van a ser esas.
      Esas herramientas te sugieren combinaciones y también lo hace Google Fonts. Puede que también te sirva de ayuda. Ante todo, cuando tengas que elegir piensa que tienen que cumplir un requisito indispensable: se tienen que leer bien.
      Un abrazo.

      • Adela Emilia Gómez Ayala
        Publicado en 21:11h, 06 abril Responder

        Gracias Cristina. Para la Web, uso sólo 2 tipografías creo recordar.

        Me refería a colaboraciones con grupos editoriales, donde tú elaboras el tema, y luego ellos ya maquetan y demás.

        • Cristina Llorente
          Publicado en 07:41h, 07 abril Responder

          Ah, vale, Adela. Eso es otra cosa porque ahí aunque tú crees el contenido es para otras marcas. En los contenidos propios y publicados bajo tu marca sí es recomendable que mantengas siempre las mismas. De ese modo ganas en coherencia y comodidad.

          Un abrazo.

  • Raquel Aldana @ Apuesta por ti
    Publicado en 18:42h, 04 abril Responder

    Hola Cristina! Gracias por tu post.

    Cuando se inicia un proyecto online creo que la búsqueda de la tipografía es una de las más entretenidas.

    Cuesta bastante decidir así que pienso que consultar con alguien que sepa es buena idea.

    Gracias por la información que compartes porque explicas bien cómo se pueden combinar, que es otro tema que también es algo difícil.

    • Cristina Llorente
      Publicado en 09:37h, 05 abril Responder

      Hola Raquel,

      Elegir las tipografías es entretenido, nos podemos pasar horas (al menos yo) probando combinaciones pero es importante porque es un elemento que acompaña a las marcas a lo largo del tiempo. Como le comento también a Adela, para mí un criterio fundamental a la hora de seleccionar es que tengan buena legibilidad.

      Un abrazo.

  • Conchi S.
    Publicado en 17:30h, 06 abril Responder

    Hola Cristina,

    Yo he de reconocer que, cuando empecé, era una completa ignorante en este tema. Ni idea tenía de que cada estilo de tipografía transmite un mensaje distinto y que no son lo mismo unas que otras. Al principio, opté por algo muy básico, sin pensar mucho más allá de que se leyeran bien.

    Con el tiempo, y después de trabajar sobre mi nueva imagen de marca, ahora me es mucho más sencillo, ya que tengo definida mis tipografías y eso me ayuda a saber cuándo, dónde y cómo utilizarlas, sin experimentos raros, ni complicaciones extrañas.

    Creo que hay dos cosas sumamente importantes en lo que dices en el artículo: que menos es más (yo soy gran defensora de esta corriente) y que la tipografía que elijamos se ha de poder leer bien. He visto muchas tipografías que hacen flaco favor a aquellos que escriben y quieren que su público lea su contenido.

    Un saludo enorme.

    • Cristina Llorente
      Publicado en 07:44h, 07 abril Responder

      Hola Conchi,

      La legibilidad es requisito indispensable, sobre todo, para textos largos. Y al principio, si no sabes muy bien cuál elegir decantarte por la más sencilla y que se lea bien no es mala decisión. Uno de los errores frecuentes al principio suele ser el contrario, apostar por las florituras y eso dificulta la comunicación del mensaje.
      Tener las tipografías definidas y el uso que se les da en cada formato es lo ideal.

      Un abrazo.

  • Alexandra Dacier
    Publicado en 21:41h, 12 abril Responder

    La tipografía a mí me enamora desde pequeña. Amo ver letreros en la calle y en las redes como tú. Me encanta hacer juegos de colores en mi post creo que eso ayuda a especificar palabras claves o importantes en el texto.
    Saludos.

    • Cristina Llorente
      Publicado en 06:37h, 17 abril Responder

      Hola Alexandra,

      Ya somos dos entonces. En efecto, el uso de la tipografía en la web permite destacar las ideas más importantes y a romper la monotonía del textos plano.

      Un abrazo.

  • Pilar Santisteban
    Publicado en 13:33h, 13 abril Responder

    Hola Cristina,

    yo confieso que soy una auténtica enamorada de la tipografía.

    Mil gracias por las herramientas para combinarlas. No conocía typ.io y voy a probarla ahora mismo 🙂

    Un abrazo grande.

    • Cristina Llorente
      Publicado en 06:38h, 17 abril Responder

      Hola Pilar,

      typ.io está genial, ya verás, porque muestra ejemplos reales no solo las dos tipografías en un texto. Espero que te resulte útil.

      Un abrazo.

  • Amaya
    Publicado en 20:12h, 17 abril Responder

    ¡Hola Cristina!

    Estoy de acuerdo, las tipografías transmiten sensaciones. Parece mentira que sea así con un “simple” (que no lo es tanto) trazo.

    ¡Qué consejos más útiles sobre como utilizarlas y combinarlas!

    Un abrazo

    • Cristina Llorente
      Publicado en 05:56h, 24 abril Responder

      Hola Amaya,

      Así es, y a mí me encantan. Además ayudan a reforzar la imagen de la marca. Cuando se utiliza siempre la misma tipografía se acaba asociando con esa marca.

      Un abrazo.

  • Marta Viera
    Publicado en 19:15h, 18 abril Responder

    Hola Cristina.
    Absolutamente. Unas tipografías bien elegidas en un proyecto, ya sea online u offline marcan la diferencia. Te introducen en el contenido amablemente, sin darte cuenta y generan muchas veces que el lector se quede o no. Y nunto con las tipos, la elección de un interlineado correcto. Hay momentos en que la sensación de «agobio visual» hace tener ganas de marcharse, en algunos casos o no entender muy bien las jerarquías, en otros.

    La verdad es que es una suerte que en estos momentos podamos contar con una amplia gama de tipografías optimizadas para utilizar en web, para que de esta forma puedan seguir aportando valor a los proyectos online.

    Saludos

    • Cristina Llorente
      Publicado en 05:58h, 24 abril Responder

      Hola Marta,

      Desde luego, aunque el principal requisito que deben cumplir es ser legibles su misión va más allá y establecer jerarquías es uno de sus cometidos. Como dices la elección del interlineado es importante, y más en internet donde la lectura se hace más difícil que en papel.

      Un abrazo.

¿Quieres comentar algo? Adelante, estás en tu casa.

Uso de cookies

En esta web utilizo cookies propias y de terceros para mejorar tu experiencia de usuario, saber cómo te mueves por aquí y poder crear el contenido y los servicios que te interesan. Si continúas navegando considero que aceptas el uso de las cookies. Puedes leer toda mi política de cookies aquí. Pero la verdad, como lectura te recomiendo el blog. ACEPTAR

Aviso de cookies