7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Typography

Letras a mano para un diseño web responsivo

Scroll to top
Read Time: 6 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

El resurgimiento de la tipografía manual o rotulación se ha apoderado de Instagram y la ha convertido en una habilidad muy solicitada. La amplia gama de distintos estilos existentes permiten que la técnica sea tan increíblemente versátil que merece la pena considerarla a la hora de diseñar. Apareciendo en una enorme cantidad de logotipos (Pinterest, Montage) y titulares de página (The Boxtrolls, World Baking Day) las tipografías manuales han demostrado su relevancia para los medios digitales.

http://worldbakingday.com

Aunque a menudo parecen simples, las tipografías manuales pueden suponer una labor compleja, más aún cuando se aplica al diseño web responsivo. Con esto en mente, he reunido algunas consideraciones para ayudarte a decidir cuándo es apropiado el uso de las tipografías manuales, y cómo usarlas para aprovechar su potencial al máximo.

Busca el término "hand-lettering" en Pinterest para encontrar amplia inspiración

Consideraciones para el hand lettering

Las buenas tipografías de estilo manual o "hand lettering" tienen un aspecto fluido y divertido, pero antes de comprometerte a incluirlas en tu proyecto web hazte estas preguntas: ¿Se ajusta a la marca? ¿Cambiará la escala de las letras o la orientación? ¿Se mantendrá la legibilidad? ¿Hay suficiente contraste entre los espacios claros/oscuros, positivos/negativos para que los caracteres sean distinguibles a pequeñas escalas? Debes tener en cuenta cada una de estas cuestiones a lo largo de tu proceso de diseño.

¿Se ajusta a la marca?

Antes de empezar un proyecto, me gusta enumerar las palabras clave que representan la marca y los mensajes que estoy tratando de transmitir. Podemos hacer lo mismo con las tipografías manuales para ver si la técnica concuerda con la marca. Aquí tienes mi lista de palabras clave para la tipografía manual:

  • Única
  • Genuina
  • Personal
  • En tendencia
  • Vintage
  • Lúdica
  • Elegante
  • Natural

Dado que hay muchos estilos distintos de tipografías manuales, todos estos términos no serán aplicables conjuntamente, pero algunos de ellos sí describen tu marca, entonces puedes pasar a la siguiente etapa en tu proceso.

Recess Ice CreamRecess Ice CreamRecess Ice Cream
Recess Ice Cream utiliza letras manuales que concuerdan con su logotipo

¿Se escalará o cambiará de orientación?

Suponiendo que desees que el texto sea responsivo, tendrás que elegir entre hacer que el texto sea escalable o cambiar la orientación para adaptarse a diferentes tamaños de pantalla. La escalabilidad puede crear transiciones suaves entre diferentes tamaños de pantalla, pero dependiendo de la complejidad y el peso de tus letras, un cambio de orientación podría beneficiar mejor a una pantalla más pequeña en aras de la legibilidad.

The Girl The Bull responsive hand letteringThe Girl The Bull responsive hand letteringThe Girl The Bull responsive hand lettering
The Girl + The Bull utiliza letras a mano en su sitio web responsivo

¿Es legible?

A menos que estés usando la ilegibilidad como un recurso, debes asegurarte siempre de que tu audiencia pueda leer tus letras a mano o fuentes decorativas. Una palabra que tarda más de tres segundos en leerse probablemente debería ser ajustada para que sea vea con mayor claridad. Aléjate un paso de tu trabajo y entrecierra los ojos. ¿Puedes leerlo todavía? Uno de los elementos más fáciles de valorar es el contraste. ¿Hay contraste suficiente en el tono de los colores utilizados? ¿Debería haberla? Y lo que es más importante, ¿hay contraste entre las letras y dentro de sus propias formas? Una forma rápida de mejorar la legibilidad consiste en ajustar el peso y el kerning entre las letras.

Vintage Hope hand letteringVintage Hope hand letteringVintage Hope hand lettering
Los titulares de Vintage Hope son pesados y grandes, con un fuerte contraste con el fondo

Opciones de implementación

Hay algunas maneras diferentes de implementar la tipografía manual en la web. Tendrás que decidir entre el uso de imágenes de mapa de bits, SVGs, o fuentes web, y lo que mejor se adapte tanto a tus necesidades como a las de tu cliente. Para ayudarte a elegir, echa un vistazo a continuación a los pros y los contras de cada uno.

Imágenes de mapa de bits

Si has creado letras personalizadas a mano, una imagen es una opción sencilla, especialmente si eres un principiante. Uno de los principales problemas con las imágenes es que los robots no pueden leerlas. Si vas a optar por una imagen, asegúrate de que el texto sea poco importante e innecesario para el SEO.

Pros:

  • completamente personalizada
  • fácilmente escalable
  • fácil de animar
  • fácil de implementar

Desventajas:

  • escalado limitado
  • los robots no pueden leerlas
  • tiempos de carga más lentos

Imágenes SVG

Los SVG se están convirtiendo rápidamente en estándares de la industria en la web para los gráficos vectoriales. Además de ser fantásticos para la responsividad, los SVGs se pueden personalizar aún más a través de CSS y JavaScript, tanto la apariencia como su animación. Para obtener más información, consulta Archivos SVG.

Pros:

  • completamente personalizado
  • fácil de animar
  • infinitamente escalable

Desventajas:

  • tiempos de carga lentos cuando son animados
  • los robots no pueden leerlos
  • no son soportados por IE8 y versiones inferiores

Fuentes web

Con el número cada vez mayor de fuentes web disponibles, hay una amplia selección de fuentes decorativas que proporcionan la ilusión de las letras a mano. Si estás buscando una solución rápida, o algo que sea simplemente más fácil de manejar, las fuentes web son el camino a seguir.

Pros:

  • fácil de implementar
  • se cargan rápidamente
  • los robots pueden leerlas
  • escalables

Desventajas:

  • los diseños complejos son más complicados
  • difíciles de personalizar

En la práctica

A continuación presentamos algunos sitios web que he encontrado que utilizan las tipografías a mano de forma apropiada.

Market Street Catch

En este sitio web, tanto el logotipo como la palabra ilustrativa "perfect" crean un agradable contraste con las fotos oscuras e intensas. Las fotos muestran la alta calidad de la comida que el restaurante utiliza y crea, al mismo tiempo que las tipografías de estilo manuscrito nos informan de su ambiente informal. El tamaño superior de letra de "perfect" permite que este texto se escale bien y manteniendo la legibilidad. En este ejemplo se utiliza una imagen para sus letras a mano.

Market Street Catch Handlettering ExampleMarket Street Catch Handlettering ExampleMarket Street Catch Handlettering Example

Winshape Camps

Winshape Camps imita el estilo de las letras manuscritas con una fuente (querido Joe Hannes) para presentar las declaraciones de impacto. Las imperfecciones de la fuente (¿has observado cómo cada 'f' es diferente dependiendo de la ligadura?) es lo que la hace más efectiva, humana y desordenada, igual que el campamento.

Winshape Camps Handlettering ExampleWinshape Camps Handlettering ExampleWinshape Camps Handlettering Example

Pane

Otro sitio web relacionado con la comida, puedes ver que las letras manuscritas son habitualmente utilizadas en este sector. La esencia de "hecho en casa" se captura a través de palabras que parecen haber sido escritas por un humano, en lugar de por una máquina. Recordando la ficha de una receta manuscrita, es difícil apreciar que se utilizó una fuente (Art) en lugar de letras personalizadas.

Pane Handlettering ExamplePane Handlettering ExamplePane Handlettering Example

Conclusión

A medida que estés planeando tu proyecto web, hay tres preguntas que deberías hacerte al considerar las tipografías manuscritas:

  1. ¿Combinan bien con la marca?
  2. ¿Será legible y responsiva?
  3. ¿Cómo se implementará?

Al revisar estas cuestiones antes y durante tu flujo de trabajo permitirá que tus letras sean más eficaces y eficientes.

Lecturas adicionales




Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.