Seleccionar tipografías para proyectos de diseño no es una tarea sencilla. El proceso puede ser largo y engorroso, especialmente cuando no cuentas con una guía o no sabes cómo empezar o simplemente el estilo del sitio web es tan peculiar que no sabes qué tipo de fuente podría ser la ideal para tu proyecto.
Suele suceder, también, que eliges una fuente que te agrada, pero al incluirla en el proyecto realmente esa fuente no capta la esencia del sitio web. Es mucho más sencillo, después de todo, realizar pruebas y verificar en vivo cómo luce la fuente en el diseño y si realmente va acorde con el estilo.
En este artículo te damos un par de consejos para trabajar con tipografías en proyectos digitales, ya sea web o aplicaciones.
Tipografías para diferentes pantallas
Elegir tipografías para un sitio web es un proceso largo pues cuentas con diferentes opciones. En la mayoría de los casos ya contarás con una librería que has formado a lo largo del tiempo y tienes diversas fuentes de las que puedes elegir, en otros casos ninguna de tus fuentes se adapta al diseño y necesitarás actualizar tu librería de fuentes. En ambos casos toma tiempo, pues debes realizar pruebas. A menudo notarás que es de ayuda verificar sitios que emplean un diseño similar al tuyo y analizar sus elecciones tipográficas. Este simple proceso te podría dar alguna pista de dónde empezar.
Otra cuestión a tener en cuenta el elegir tipografías para proyectos web es la variedad de dispositivos, tu tipografía se debe adaptar a diferentes pantallas sin arriesgar al legibilidad.
Recuerda que el número máximo de tipografías a usar es 3 ó 4. En la medida de lo posible intenta usar menos fuentes, en sitios de estilo minimalista es probable que necesites una sola familia de fuentes para todo el diseño de la página. El número de fuentes dependerá del proyecto en el que estés trabajando, pero evita usar demasiadas fuentes pues podrías poner en riesgo el diseño de marca perteneciente al sitio web.
Usar fuentes secundarias
Importante considerar también la disponibilidad de las fuentes que elijas, en diversos navegadores podrían no renderizarse de manera correcta o muchos usuarios podrían no tener instalada la fuente que has elegido para tus sitios web. En estos casos es mejor contar con algunas otras fuentes como una especie de “plan de contingencia”.
Ya que la tipografía es tan importante en el diseño web, es fundamental que tu diseño se vea con la tipografía que has elegido o en todo caso con una segunda opción que se vea igual de bien. De lo contrario tendrás que lidiar con las limitaciones de las fuentes instaladas en cada sistema de modo predeterminado pues, a menos que tus usuarios sean diseñadores, es probable que su librería de fuentes no sea muy variada.
La mejor herramienta para crear una lista de fuentes de respaldo es CSS Font Stack pues te permite organizar tus fuentes de manera sencilla. Si una fuente no puede ser renderizada pasará a la siguiente de la lista y así sucesivamente. La ventaja es que todas las fuentes son elegidas por ti y por ello sabes que con cualquiera de ellas el diseño cumple su función.
Generar fuentes web
Aparte de usar fuentes secundarias también puedes recurrir a la sintaxis de @font-face para incluir tus propias fuentes dentro de la programación web. Esta maravilla de CSS permite guardar las fuentes en el servidor, de modo que existen menos probabilidades de que la tipografía que has elegido no renderice de manera correcta. Sin embargo, para poder lograr una compatibilidad con todos los navegadores necesitas muchos formatos de fuentes aparte de los usuales TTF y OTF.
Si quieres asegurar una mejor compatibilidad con todos los sistemas operativos y dispositivos se deberán incluir los archivos EOT, TTF, OTF, WOFF y SVG. Esta situación puede presentar un problema ya que la mayoría de fuentes que descargas sólo se encuentran formato OTF y TTF. Por suerte, existen herramientas como Font2Web que te permiten convertir una fuente en los 5 archivos que hemos mencionado anteriormente. Web Font Generator también cumple esta misma función e incluso incluye el código CSS necesario para añadir las fuentes dentro de tu servidor.
Antes de convertir fuentes y usarlas en proyectos comerciales asegúrate que esté permitido. Gran mayoría de las fuentes que te puedes descargar de manera gratuita permite licencias comerciales, sin embargo nunca está de más revisar los lineamientos de uso.
Realizar pruebas con las fuentes seleccionadas
Es probable que al seleccionar fuentes tengas unas 3 ó 4 pre-seleccionadas antes de llegar a una decisión final. Tus opciones deberán ser implementadas al diseño de modo que puedas ver en vivo cómo funciona cada fuente con el diseño en general.
Puedes trabajar desde la nube renderizando páginas y verificando el aspecto y comportamiento de las tipografías que has seleccionado. CodePen es una herramienta perfecta para este tipo de pruebas pues se actualiza en tiempo real cada vez que manipulas el código CSS. Incluso puedes guardar tus pruebas si quieres que otra persona o algún compañero revise o te ayude en el proceso.
Si quieres comparar varias fuentes sin la necesidad de crear una layout completa puedes usar Typetester. Esta simple herramienta te permite elegir diversas fuentes y poder verlas lado a lado, de modo que puedes comparar todos los estilos ya sea negritas, cursivas, minúsculas, etc.
