Cómo elegir las tipografías para mi web
Menú

Tipografías para web

Diseño Gráfico, Tipografía

Cómo elegir tipografías para web

Para tener una web que cumpla su función, ya sea vender, atraer tráfico o informar, debes tener en cuenta dos factores; la funcionalidad o usabilidad y la estética.

Centrándonos en la parte estética, en mi opinión hay varios factores que determinan que una página web tenga un resultado profesional y atractivo.

  • Las fotografías
  • Los tipos de letra
  • Los colores
  • Y por supuesto que los tres estén en perfecta armonía

En este post nos vamos a centrar únicamente en una de estas partes, cómo combinar las tipografías.

En primer lugar me gustaría darte unos consejos para la elección de las tipografías para tu web, y posteriormente te daré algunas combinaciones de tipografías para web que me parecen interesantes.

Pues aquí te dejo cuatro puntos que debes tener en cuenta para que los textos de tu web queden perfectos.

Utiliza una tipografía o dos, tres en casos muy cuidados.

Si cuidas mucho los detalles y sabes cómo combinarlas puedes utilizar hasta 3 tipografías, pero cuidado, porque si les sumamos las tipos de tu logo, las de algún banner que tengas con otra tipo y alguna otra que se cuele, puedes acabar con 4 o 5 tipos de letra en tu web y puede ser un autentico despropósito.

Para la web de FRESHFISH he utilizado 3 tipos de letra,

Montserrat, la tipografía utilizada para nuestro logo, muy adecuada para títulos y que cuenta con una extensa familia.

Istok Web, para textos de cuerpo, una tipografía creada para soporte digital que acompaña perfectamente a montserrat.

Y por último utilizo lekton, un tipo de letra monoespacio (cada letra ocupa el mismo espacio horizontal) basada en las tipos de las máquinas de escribir de Olliveti, que rompe con la línea de las anteriores, para etiquetas y pequeños detalles.

Cada tipografía tiene su función.

En la actualidad puedes encontrar millones de tipos de letras y no todas se deben utilizar de la misma forma, cada tipo de letra tiene su utilidad. Seguramente te hayas fijado que en la mayoría de, por no decir todas las novelas, llevan una tipografía con serifa, se debe, a que es un tipo de letra de fácil lectura, gracias a sus adornos, que ayudan a reconocer de forma más rápida cada una de las letras que componen las palabras. O quizás te has dado cuenta de que la tipografía de las señales de tráfico es siempre una San Serif básica, muy similares en todos los lugares del planeta. Esto es debido a que la claridad y simplicidad de cada letra de este tipo, evita confusión en un mensaje tan importante como es el de una señal de tráfico.

De la misma forma tú debes tener esto en cuenta a la hora de crear los textos de tu web, si tienes un blog y escribes textos muy extensos, deberías elegir un tipo de letra de fácil lectura y que no canse al lector, en este caso nunca deberías elegir, por poner un ejemplo, una tipografía manuscrita.

Al igual que para los títulos no vale cualquier tipo de letra, en este caso buscarás una letra que destaque sobre el cuerpo y que se identifique con la estética y la personalidad que quieres transmitir en tu web.

Si quieres aprender más sobre las tipografías echa un vistazo a mi post “Conceptos básicos sobre los tipos de letra”.

Usa los estilos.

Has decidido trabajar únicamente con dos tipografías, pero al componer los textos de tu web, te da la sensación de que le falta algo, el texto se te hace monótono y aburrido.

Para crear dinamismo puedes apoyarte en los distintos estilos de una familia tipográfica, aunque algunas familias tienen únicamente un estilo, generalmente los editores de texto proporcionan la itálica y la negrita de cualquier tipografía.

Utiliza un estilo u otro dependiendo de la necesidad del texto, puedes utilizar el estilo bold o negrita de una familia para dar énfasis a una palabra o párrafo o utiliza la itálica para nombrar marcas comerciales, títulos de libros u obras de arte.

En el caso de los títulos de cabecera de la web de FRESHFISH (por ejemplo en la página de inicio) puedes observar las variaciones de peso de Montserrat. Todo está escrito con la misma tipografía  pero he utilizado distintos pesos y tamaños.

El tamaño si importa.

Este punto es de sentido común, pero es de obligatoria mención.

El tamaño de los distintos elementos de texto debe tener coherencia, h1 debe tener el mayor tamaño, le seguirá h2 y así sucesivamente.

Utiliza los encabezados, título y subtitulo.

Las plantillas de WordPress que es el CMS con el que yo trabajo, suelen venir con algunas variaciones en cuanto al tamaño de los distintos elementos. Pero una medida bastante común suele ser H1 a 36 pixeles, H2 a 30px, H3 a 24px y el cuerpo a 16px.

No obstante debes tener en cuenta que cada tipografía tiene una altura y peso distinto y algunas tipos en 16px se pueden ver pequeñas y otras muy grandes.

Conclusión:

Utiliza dos tipografías que combinen bien, que cada una cumpla su función (la elegida para cuerpo no se debe utilizar en los títulos), enriquece los textos utilizando los estilos y usando correctamente los tamaños y encabezados.

Para terminar un último consejo, como dije antes podéis encontrar en internet miles de tipos, pero a la hora de elegir fuentes gratis para tu web yo recomiendo recurrir a Google Fonts, no solo por que son fáciles de encontrar, sino por su extenso catálogo y porque garantiza tipografías de calidad en todos los aspectos.

Aquí te dejo algunas combinaciones que me gustan y que podrían ir bien para tu web.

Si te interesa el mundo de los tipos de letra y te gusta el diseño,  puedes encontrar algunas letras chulas en mi post “10 tipografías para tus carteles”.

Divertido y atrevido

Amatic sc / Roboto Condense

amatic-sc-freshfish

Domine / Sacramento

domine-freshfish

Gran hotel / AbeeZee

grand-hotel-freshfish

Rouge script / Old Standard TT

rouge-script-freshfish

Sansita one / Bree serif

sansita-sans-freshfish

Moderno y Actual

Andika / Cabin

andika-freshfish

Imprima /  Lora

imprima-freshfish

Open sans / Inconsolata

open-sans-freshfish

Quicksand / Hind

quicksand-freshfish

Ubuntu / Quattrocento

ubuntu-freshfish

Elegante y distinguido

Francois One / Philosopher

francois-one-philosopher-freshfish

Oswald / Imprima

oswald-imprima-freshfish

Six Caps / Cormorant Garamond

six-caps-cormorant-garamond-freshfish

Yeseva One / Ovo

yeseva-one-ovo-freshfish

Clásico y seguro

Cardo / Quando

cardo-freshfish

Droid Serif / Old standar TT

droid-sans-freshfish

Fauna One / Amaranth

fauna-one-freshfish

Dómine / Fira Mono

fira-mono-freshfish

Playfair Display / Fira Sans

playfair-display-freshfish

Vollkorn / Imprima

vollkorn-freshfish

4 Comentarios Dejar un Comentario

  1. Luis

    Buenísimo tutorial para elegir las tipos adecuadas. Me lo guardo para cuando le dé un cambio a mi web. Gracias!

    Responder
  2. Alejandro

    Gracias! Excelente ayuda!

    Responder

Deja un comentario

  Acepto la política de privacidad

Tu comentario(haga click en el botón para enviar)

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

Comparte

This is a unique website which will require a more modern browser to work!

Please upgrade today!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies