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
Domine / Sacramento
Gran hotel / AbeeZee
Rouge script / Old Standard TT
Sansita one / Bree serif
Moderno y Actual
Andika / Cabin
Imprima / Lora
Open sans / Inconsolata
Quicksand / Hind
Ubuntu / Quattrocento
Elegante y distinguido
Francois One / Philosopher
Oswald / Imprima
Six Caps / Cormorant Garamond
Yeseva One / Ovo
Clásico y seguro
Cardo / Quando
Droid Serif / Old standar TT
Fauna One / Amaranth
Dómine / Fira Mono
Playfair Display / Fira Sans
Vollkorn / Imprima
