Escoger una tipografía puede ser difícil: cada vez hay más disponibles y, para postre, nos enamoramos de todas.
Pero no desesperes. Aunque no hay reglas fijas de cómo escoger una tipografía, sí hay principios básicos probados que te permitirán elegir la tipografía adecuada.
Si trabajas sistemáticamente en el paso a paso que te enseña esta guía, tendrás una “tipografía” ganadora en un momento. ¡Empecemos!
Primero el contenido. Ni desktop ni mobile.
Escoger una tipografía no trata de ver cuántas hay disponibles o la de veces que hemos utilizado una u otra en nuestros proyectos. O la que está más de moda.
Se trata de escoger la adecuada para el proyecto, teniendo en cuenta quién lo va a leer, los objetivos y, principalmente, la tipografía escogida debe invitar a la lectura del texto.
Antes de empezar a escoger tipografías…
Es importante que tengas en cuenta estos 3 puntos para no cometer errores:
Objetivos y público
¿Cuál es el objetivo del texto en tu diseño? ¿Se trata de artículos largos? ¿Contenido que será “escaneado” y el usuario solo leerá porciones?
Y, todavía más importante, ¿a qué está acostumbrado el público del proyecto? ¿Estilos modernos? ¿Clásicos? ¿Futuristas?
Usa el texto real… y léelo
Ignora, por favor, “Lorem Ipsum”. ¿Cómo vas a poder escoger bien la tipografía si no te lees el texto? Puede quedar bien, sí, pero realmente facilita la lectura? ¿Transmite lo que el autor quiere?
Te pondré un ejemplo: puedes escoger una tipografía sans-serif porque queda bien pero… ¿qué pasa si el texto es un clásico de la literatura? ¿o se trata de un proyecto que debe dar apariencia de seriedad y no modernidad? No lo sabrás si no lo lees.
Peso y OpenType
Una página que carga lento afectará al posicionamiento. Por ello, es importante escoger tipografías que no pesan demasiados kilobytes.
Las tipografías OpenType (.otf) son 100% compatibles con Windows, Mac y Linux, contienen más caracteres y soportan más idiomas. Ah, y están optimizadas 🙂
5 pasos para escoger una tipografía
Para que veas el proceso real, en lugar de enumerarte 5 puntos sin ton ni son como el resto de blogs, lo haré sobre un pequeño brief sobre el que trabajar.
1. Contenido de ejemplo y temática
En este caso hay que diseñar una web para un blog sobre tecnología, que contendrá mayoritariamente artículos largos.
Como te he dicho antes, hay que encontrar contenido de ejemplo y leerlo, si no tenemos el que se publicará. Por ejemplo, alguno de Hackernoon, The Verge o blogs similares.
2. Define qué debe tener la tipografía
Se trata de tecnología y, por definición, se trata de contenidos ‘modernos’. Así que:
- Preferencia por el serif: facilitan la lectura y en este caso, al tratarse de artículos largos (como hemos visto en el punto anterior), es lo adecuado.
- Necesitamos un toque “moderno”, de manera que el eje de las X será alto.
- Debe ser fácil de leer, así que buscamos un contraste bajo o medio. Si tiene demasiado contraste dificultaremos la lectura al usuario.
- Estará en castellano, así que la tipografía escogida debe tener acentos y caracteres propios del idioma, como la ñ.
- Por último: debe tener también negritas y cursivas (y una mezcla de ambas).
3. Busca las tipografías candidatas
Con los puntos anteriores ya podemos hacer una búsqueda en Google Fonts (o Adobe Typekit, si tienes la licencia).
4. Empieza a probarlas… ¡en código!
Sí, con código. No te asustes (y sigue leyendo).
Photoshop es famoso por hacer un renderizado de las tipografías muy extraño y Sketch, aunque es vectorial y está pensado para diseño de productos digitales, tampoco es lo ideal.
Tanto si sabes un poco de CSS y HTML como si no, este paso es muy importante: si pruebas con código podrás comprobar como es de verdad esa tipografía.
Tendrás la oportunidad de probarla en distintas pantallas y resoluciones, sistemas operativos (que hacen un renderizado distinto), etc.
Para ello, te dejo con un pequeño CodePen con el que solo tendrás que cambiar la URL de la tipografía (te lo da Google Fonts cuando la escoges) y la familia en el CSS.
5. Una tipografía… ¿o dos?
A veces nos interesa separar mejor el contenido de los titulares para dar más dinamismo y personalidad al diseño.
Cuando escojas la tipografía para las cabeceras, escoge una que mantenga las características mencionadas en el punto 2, pero asegúrate de que sea suficientemente diferente como para marcar la diferencia.
Eso sí, ¡jamás utilices más de dos tipografías en un diseño!
Por último: prueba y observa
Aprender a escoger tipografías no es fácil, pero poco a poco te sentirás más seguro/a con ello si sigues los pasos anteriores y observas otros proyectos.
Utiliza el plugin FontFace Ninja (gratuito) para Chrome. Canela fina: con solo situar el cursor encima podrás ver qué tipografía es y qué colores, márgenes, tamaños y demás características tiene.
Si quieres dominar a fondo la tipografía te recomiendo este libro, ‘Better web typography for a better web‘. En él, Matej Latin te explica sus trucos, cómo escoge tipografías y cómo compone los distintos diseños teniendo en cuenta cualquier resolución. Ah, ¡también incluye archivos de Sketch y código!
