Tipografías en diseño web: 6 ejemplos para inspirarte

Ya que la semana pasada abrimos la veda de la tipografía… ya no hay quien nos pare! Normalmente hablamos de la tipografía en sus usos en el diseño gráfico: en láminas tipográficas, logotipos… Pero hoy toca hacerlo en el diseño web.

Como no, la tipografía es uno de los elementos más importantes y que más hay que cuidar a la hora de realizar un diseño web. Nosotros siempre la tenemos presente en el diseño de cada una de nuestras plantillas para WordPress. No es lo mismo diseñar un blog personal como Jennifer o Carmela o una web corporativa como Neilmink. La tipografía dependerá del enfoque que queramos darle y de la función de la web.

A veces podemos conseguir la diferenciación de nuestra web con otra que ha usado la misma plantilla con el solo cambio de la tipografía. Si modificamos sus tamaños y grosores, puede resultar algo muy distinto de lo que teníamos.

Por eso hoy os traemos una selección de webs en las que la tipografía es una de las partes fundamentales de la misma. Como tenía muchas donde elegir y poca decisión de con cuales quedarme, las he dividido en dos: plantillas para WordPress que podéis descargar y webs para tomar inspiración.

Además ya que hoy hablamos de tipografía, en web, pero tipografía, podréis encontrar enlaces para descargar las tipografías representativas de cada uno de los mismos. Si os fijais vereis que todas cumplen nuestros 10 consejos tipográficos, y que al igual que en el diseño gráfico el contraste es la clave 😉

Plantillas WordPress con tipografías muy cuidadas

En un principio, en el articulo solo iban a aparecer webs para tomar inspiración, pero luego pensé, que si podía encontrar algunas plantillas para WordPress de las que partir, seguro que era más sencillo 😉

Notio

La sencillez es una de las características principales de esta plantilla. Se cuida el mínimo detalle y todo ocupa un lugar concreto por alguna razón.

plantilla-wordpress-tipografia-creativa

+ InfoVer Demo

Las tipografías escogidas, contrastan entre sí, con una tipografía con muchas fuerza como «Monserrat» y la escogida para el texto de párrafo «Source Code Pro» que nos recuerda a una máquina de escribir. Ambas son Google font y por lo tanto de descarga gratuita.

TIPOGRAFÍA SOURCE CODE PRO TIPOGRAFÍA MONSERRAT

Clear

Su título lo dice todo. Es una plantilla en la que la importancia de la tipografía deja de lado a cualquier elemento que pudiera distraernos.

plantilla-wordpress-tipografia-original

+ InfoVer Demo

Encontramos dos tipografías que nos resultan familiares, para párrafos usamos PTSans mientras que para los textos tenemos «Monserrat»

TIPOGRAFÍA PT SANS TIPOGRAFÍA MONSERRAT

Jennifer

Ya os hemos hablado en numerosas ocasiones sobre nuestra plantilla para WordPress. En ella, la tipografía es el pilar sobre el que se basa el diseño. Es un blog, en el que lo primordial es su lectura.

plantilla-wordpress-jennifer

+ InfoVer Demo

Las tipografías escogidas son dos Google Font, conocidas por todos 😉 , para párrafos Source Sans Pro y para títulos Playfair display.

TIPOGRAFÍA SOURCE SANS TIPOGRAFÍA PLAYFAIR DISPLAY

Webs tipográficas para inspirarnos

Con mucho trabajo y esfuerzo, al final he decidido quedarme con tres (no os preocupes que la criba me la guardo para otro artículo 😉 ) En ellas, el uso de la tipografía se hace de una manera creativa e impactante, siendo el núcleo principal de donde parte la web.

Holyheck

La tipografía es el centro de la web. En ella vemos imágenes también de los trabajos, pero nuestros ojos van hacia la tipografía. Esta está perfectamente enmarcada dentro de cada una de las páginas.

we-tipografia-original-creativa

IR A WEB

En este caso, las tipografías usadas por el autor son de pago, y podéis descargarlas en los siguientes enlaces:

TIPOGRAFÍA COPERNICUS TIPOGRAFÍA NIMBUS TIPOGRAFÍA HARRIET

Kyle Peen

La página de inicio es la mejor representación del uso de tipografías. Tenemos una con fuerza para títulos que contrasta con el texto de párrafo en la que introduce la misma tipografía que para los títulos pero en una versión más ligera como subtítulos, y una que contrasta con ambas para texto de párrafo.

web-tipografica

IR A WEB

En este caso las tipografías son también de pago.

TIPOGRAFÍA WIGRUM TIPOGRAFÍA ATLAS

Vintage hope

Queda claro, que la tipografía es el hilo vertebrador de la web. Tenemos una tipografía llamativa e impactante, que nos cuenta la parte principal del mensaje, mientras que para descripciones en las que la lectura sea algo mayor, se usa la tipografía conocida por todas, helvetica.

web-tipografia-a-mano

IR A WEB

Las tipografías usadas en la web, Belta y Helvetica son de pago para uso comercial aunque Belta podamos utilizarla de manera gratuita en su uso personal

TIPOGRAFÍA BELTA TIPOGRAFÍA HELVETICA

Comentarios (1)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *