Se lee en 3 minutos

Logotipo Responsive es un tutorial de cómo adaptar un logotipo a distintos tipos de dispositivos. En ocasiones no basta con ajustar la anchura del logotipo al tamaño disponible, ya que en algunos casos podría mostrarse muy pequeño e ilegible.

En los manuales de estilos de cualquier identidad corporativa se muestran entre otras cosas las adaptaciones del logotipo a distintos contextos, tamaños, materiales, etc. Lo que buscamos en este caso es ajustar nuestro logotipo a un mismo medio (digital) teniendo en cuenta la diversidad de tamaños de pantalla que existen.

Antes de nada recomiendo ver el ejemplo de este post en un ordenador de sobremesa e ir reduciendo el tamaño del navegador para ver el efecto completo.

En este ejemplo se han contemplado los casos más comunes:

1. Pantallas grandes como la de un iMac u otro monitor para equipo de sobremesa.
2. Pantallas de portátiles medianos y pequeños.
3. Tabletas.
4. Smartphones.

Actualmente se utilizan cada vez más gráficos SVG o incluso tipos de letra cuyos caracteres son en realidad distintas versiones del logotipo. Lo que se busca en definitiva es que el logotipo se ajuste correctamente a la pantalla en la que es mostrado y para ello el formato vectorial es casi siempre una ventaja.

En nuestro caso vamos a intentar ir un poco más allá utlizando texto puro para, entre otras cosas, contribuir positivamente al SEO.

Como puedes ver al inspeccionar el código del ejemplo, utilizo una Google Font (Damion) que es la misma del logotipo real de esta web. Al importar esta fuente he aprovechado para traerme también de la API de Google Fonts el efecto “3d-float”. Si quieres saber cómo utilizar efectos en las Google Fonts, lo explico en este post.

Ya tenemos el tipo de letra con el efecto final que queremos. Ahora lo que nos falta es definir cómo va a alterarse el logotipo en función de la resolución a la que lo veamos.

Mediante etiquetas span he “partido” el logotipo en tres partes. La primera es el texto “tona“, la segunda es “lidad” y por último “.es“. Lo he dividido para poder tratar dichas partes por separado dependiendo de los casos:

1. A tamaños grandes muestro las tres partes unidas, con lo que el logotipo queda como “tonalidad.es”.

2. Para tamaños medianos elimino el “.es”, quedando el texto como “tonalidad”, que al fin y al cabo es lo fundamental del nombre de marca.

3. A tamaños algo más pequeños la solución que he aplicado es mostrar el texto “tonalidad” en dos líneas, “tona” en la primera línea y “lidad” en la segunda. Para este caso es muy importante controlar por CSS el “line-height” que separa a ambas partes (revisar el ejemplo).

4. Finalmente he utilizado los pseudo-elementos “:before” y “:after” para usar como texto sólo la “t”. La idea en este caso es obtener un elemento gráfico como los que solemos usar al crear un “favicon” o el icono para una app, etc.

Usando media queries, definimos todo lo anterior en el contexto de los distintos tamaños para los distintos dispositivos.

Esta solución para generar un Logotipo Responsive utiliza técnicas quizá un poco avanzadas, pero totalmente limpias. Recomiendo de nuevo revisar el código de la página que he creado como ejemplo para este post.

Lo que más me gusta de esta técnica es que el logotipo lo mantenemos como texto para no perjudicar al SEO. A su vez, sería sencillo añadir mediante este sistema un isotipo como imagen, SVG, etc.

Espero que este tutorial te resulte útil en tus proyectos 🙂

Ver el ejemplo.

Suscríbete a tonalidad.es