Cómo elegir estilos de tipografía para un diseño web profesional

Nuestra página web está llena de texto, títulos, subtítulos…Y no nos paramos a pensar en qué tipo de letra estamos usando, ¡muy mal! Ya lo sé, no todos somos diseñadoras y diseñadores gráficos, pero cuidar la imagen corporativa de tu empresa es muy importante.

En este post os voy a enseñar por qué es tan importante saber elegir una tipografía que vaya bien con vuestra marca y además, os daré unos consejos para aprender a elegirlas.

¿Ready? ¡Pues vamos a poner a trabajar la creatividad!

 

imagen-corporativa-de-empresa

Fuente: Giphy

Tipos de tipografía para el diseño web

Lo primero que tenéis que saber es que hay muchas tipografías diferentes y cada una da una sensación. Las tipografías son como los colores, pueden transmitir muchas cosas. Para que nos entendamos mejor, os voy a explicar un poco las diferentes tipografías que hay:

  • Tipografía serif: Son tipografías fáciles que se ven todos los días, no tienen muchas florituras ni tramos especiales. Las utilizan marcas de alta gama porque transmiten seriedad, formalidad y son muy elegantes. ¿Os suena Times new roman? Seguro que sí, pues está dentro de este grupo. Pero esto no quiere decir que sean cutres, dentro de las tipo Serif hay diferentes modelos y no todas son tan clásicas.

tipografías-serifFuente: Dafont

  • Tipografía San Serif: Estas son tipografías actuales. Transmiten mucho dinamismo y mucha fuerza. Son tipografías elegantes y modernas. Dentro del grupo hay mucha variedad: rounded para las más redonditas, display para las tipografías divertidas y muy originales, o tipos de letra manuscrita que dan mucho glamour.

tipografías-elegantes-y-modernas

Fuente: Dafont

Ninguna es mejor que otra, simplemente se usan de forma diferente. No te agobies,  es normal que te sientas abrumado con tantas tipografías diferentes y tantas decisiones que tomar. Pero para eso estamos aquí, así que, sigue leyendo.  

donde estudiar marketing digital - master de marketing digital graduate

¿Cómo elegir la mejor tipografía para el diseño web?

Me alegra que me hagas esa pregunta, porque este debería ser el primero de los muchos pasos para elaborar una web y, por suerte, yo te voy a decir todos los factores que tienes que tener en cuenta para elegir la tipografía correcta.

  • El equipo A: La letra “a” es la más característica de cada familia de tipografías. Si tienes dudas sobre cual elegir, compara las “a” y te será mucho más fácil que estar comparando todo el abecedario, ¿no crees?

tipografías-actuales

  • El contraste: Las tipografías que tienen un alto contraste se ven muy bien a corta distancia y gran tamaño, mientras que las de bajo contraste funcionan mejor en tamaños pequeños. ¿Chino? Esto significa básicamente que si usas una tipo de bajo contraste en un cartel de autovía la sensación no va a ser muy buena.

tipografías-divertidas

  • La apertura: Cuanto más abierta sea una tipografía, mejor se va a leer en situaciones difíciles como un espacio muy pequeño o una larga distancia.

como-elegir-la-tipografía-correcta

  • Tamaño y altura: Si las letras de una tipografía son más bajas (o más cortitas para que nos entendamos) dará la sensación de que la palabra es más pequeña.  

tipografía-diseo-web

  • El foco de atención: Si nuestra tipografía tiene un foco de atención horizontal, se leerá más fácil. Traducción: que las letras formen una línea imaginaria horizontal como aquí abajo.

pasos-para-elaborar-una-página-web

  • Números: Los números, los marginados de la tipografía. Nadie repara en ellos porque no son letras, pero son muy importantes y más en el diseño web, donde es muy usual utilizarlos para impactar con nuestras cifras de éxito, ¿no? Van a variar según el estilo de tipografía pero hay dos grandes diferencias que ya cambiarán mucho la estética de tu página: los números de caja alta que están alineados a la misma altura o los de caja baja, donde algunos de ellos sobrepasan a los demás por debajo. Estos últimos dan una sensación como de antigüedad, ¿no crees?

tipos-de-letra-manuscrita

  • ¿Puedes leer la parte superior?: es una prueba muy simple para ver si tu tipografía es bastante legible o no. Escribe una palabra y córtala por la mitad. Enseñasela a alguien (tú no vales, que ya sabes cuál es…) y si puede leer la palabra mirando solo la parte superior, ¡enhorabuena, tu tipo es totalmente legible!

tipografías-fáciles

 

Vale, ya tienes al menos una tipografía que te gustaría utilizar para tu web. Lo normal es que tengas dudas entre muchas y los factores anteriores te ayuden a decidirte por una. Muchas veces, cuando ya hemos elegido y nos ponemos manos a la obra con el diseño web, resulta que no nos gusta cómo queda y queremos cambiar… Tranquilo, no serás ni el primero ni la primera. ¡Probar es la mejor manera de visualizarlo!

Consejos y trucos para el diseño web.

Una tipografía bonita no va a hacer que tu web sea la más guay del mundo. Hay que saber utilizarlas para conseguir un diseño web profesional. Por eso te dejo unos cuantos truquitos para que lo consigas:

  • Legibilidad: ¡Atención! Por favor que el texto siempre se lea bien, parece una tontería pero te sorprendería ver la de gente que falla en esto. Que se lea bien en un word no quiere decir que se lea bien en todos los fondos y tamaños. Ante la duda, usa tipografías fáciles de leer.

trucos-para-diseño-web

Fuente: Giphy

  • Más vale lo malo conocido: A ver, es cierto que todos queremos ser super originales y elegir tipografías divertidas y modernas, pero funcionalidad ante todo. Más vale una tipografía conocida que funcione bien a una muy forzada que no aporte nada a lo que significa la marca.
  • La oscuridad nos confunde: Si vas a escribir sobre un fondo oscuro, dale más espacio a las letras y se leerá mejor.

consejos-diseño-web

Fuente: Giphy

  • Utiliza dos tipografías diferentes: Lo mejor es tener siempre en el tintero dos tipografías: una para el logotipo y otra para lo que tengas que contar de tu marca. Además, puedes probar escribir en diferentes tipos de letras para el diseño online y le darás un toque muy original a tu web. ¡La combinación de tipografías se lleva mucho!

Como último consejo te voy a contar donde puedes encontrar fuentes tipográficas gratis. Hay muchas páginas donde puedes encontrarlas pero las más famosas son google fonts y dafont. Puedes descargarlas totalmente gratis e instalarlas en tu ordenador.

Ejemplos de imagen corporativa

Para que todo quede más claro, aquí os dejo un par de ejemplos que te ayudarán a crear la imagen corporativa de tu empresa. ¡Vamos al lío!

Coca-cola:

combinación-de-tipografías

Fuente: cocacola.es

Coca-cola es un ejemplo claro de imagen de marca. Utiliza una tipografía para el logotipo y otra para las comunicaciones. No contentos con eso, juegan con los tamaños, estilos y grosores de las letras. Por esto, y muchas más cosas obviamente, es una de las empresas más potentes a nivel de marca en el mundo.

Ikea:

ejemplos-imagen-corporativa

Fuente: Ikea.es

Ikea es el claro de ejemplo de un buen uso de la tipografía. Tienen una imagen de marca tan potente que si ves simplemente una frase escrita en su tipografía, enseguida sabrás de qué empresa se trata. Además también juegan mucho con los tamaños y el peso.

Mr. Wonderful:

crear-imagen-corporativa

Fuente: Mr.Wonderful.es

Mr.Wonderful pegó un boom con la mezcla de tipografías totalmente diferentes. Fue muy transgresora y eso le ha dado mucho nombre. Mezclar tipografías tan diferentes es un arma de doble filo, pero no podemos negar que ellos lo hacen genial.

Chanel:

imagen-corporativa-de-empresa-ejemplos

Fuente: Chanel.es

No es precisamente la marca más alocada ni utiliza la tipografía más transgresora. Pero es la muestra de que menos es más. Como hemos visto casi al principio del post, una tipografía sencilla no es anticuada, simplemente se usa en casos diferentes. En este caso para transmitir elegancia y mucho estilo.

¿Demasiada información? Ahora solo falta ponerla en práctica y hacer una web espectacular. ¡Espero que te sirvan estos consejos! Y si te gusta el diseño web, aquí te dejo un post con 3 plugins esenciales para wordpress. ¡A trabajar!

 

 

 

Showing 2 comments

Leave a Comment