Cuando desarrollamos un proyecto web, una de las decisiones que hemos de tomar es la de la tipografía que vamos a utilizar en cada una de sus diferentes partes o secciones. Esto es importante, porque la fuente que utilicemos para los textos determinará, en buena medida, la usabilidad de la aplicación o de la web.
La tipografía que elijamos va a tener una gran importancia para transmitir ideas, información y valores. Con la tipografía podemos definir la identidad corporativa de la empresa, reforzando el mensaje que queremos transmitir. Google Fonts es uno de los recursos más interesantes en cuestiones de tipografía.
¿Qué es Google Fonts?
Google Fonts es un directorio interactivo en el que puedes encontrar 923 familias de fuentes tipográficas de uso libre y completamente gratuito. Estas fuentes pueden ser utilizadas en cualquier proyecto web, desde una página hasta aplicaciones móviles, o en cualquier diseño que necesitemos (folletos, cartelería, presentaciones…). Se trata de un catálogo de fuentes open source de gran calidad. Puedes utilizar un buscador que dispone de muchas opciones para encontrar la fuente que más se ajuste a la idea que quieras transmitir, a los valores de la empresa…
Estas fuentes las podemos encontrar ya instaladas en plataformas muy conocidas como Shopify o Canva. De esta manera se simplifica el diseño para cualquier usuario, independientemente de sus habilidades. Además, es posible descargar las fuentes web a un almacenamiento local para uso personal, y para incluirlas en nuestros proyectos.
¿Cómo elijo una fuente para mi proyecto?
Existen diferentes criterios para elegir la mejor fuente posible para un proyecto. Al final de todo, estos criterios se cotejarán con nuestro gusto personal, pero no debemos quitar importancia a estos aspectos que os comentamos a continuación:
- Si estás desarrollando un proyecto en el que habrá mucho texto, lo mejor es que la fuente sea lo más legible posible. Piensa en un libro, por ejemplo. En esos casos, las fuentes que tienen «serifa» son las más recomendables, pues las letras estarán en cierta medida más unidas. Las serifas son detalles en los extremos o los bordes de las letras.
- ¿Para qué la vamos a utilizar? Se puede utilizar una fuente manuscrita para documentos o secciones informales; una fuente formal y tradicional para un currículum, etcétera. Elegiremos siempre una fuente que sea apropiada para el diseño, el contexto y el sector para el que se utilice.
- Combinaciones de fuentes. Si vamos a utilizar más de una fuente, lo mejor es analizar y elegir aquellas que combinen bien.
- Utiliza fuentes populares. La mayoría de los diseñadores suelen recurrir al mismo número reducido de fuentes que funcionan bien para la mayoría de los diseños. Por tanto, está bien utilizar las mismas fuentes de Google con frecuencia porque, si funciona, ¿por qué cambiar?
- Sigue tu instinto. Al final de todo, si te gusta la fuente y cómo queda en el diseño, esa será la más indicada.
Cómo utilizar las Google Fonts en nuestros proyectos
Este es un pequeño tutorial muy sencillo para incorporar Google Fonts a un proyecto:
- Busca la tipografía perfecta. En el buscador, introducimos las opciones que deseamos para la fuente, ya sea según la categoría (Serif, Sans Serif, Display, Handwritting, Monospace), el lenguaje (Arabic, Chinese, etc., se refiere al tipo de alfabeto), y las propiedades de las fuentes (número de estilos, el grosor del trazo, etcétera).
- Descarga la tipografía. Una vez elegida solo hace falta hacer clic sobre ella para acceder a información y opciones adicionales. Hecho esto pinchamos en el botón de «Download family».
- Selecciona el método para incrustar la tipografía en la web. Podremos seleccionar entre dos métodos para incrustar la tipografía en nuestra web: el método HTML estándar y el método @import de CSS.
- Copia y pega el código que aparece según la selección del punto anterior y lo pegamos en la etiqueta <head> de nuestro archivo html.
- En caso de utilizar la opción CSS, tan solo hemos de llamar a la fuente. En caso de utilizar la fuente Roboto, la línea de CSS sería «font-family: ‘Roboto’, sans-serif;»
Si quieres desarrollar tu proyecto web en un entorno seguro y flexible, en Arsys ponemos a tu disposición el servicio para crear web con tres opciones: Essential, Unlimited y Marketing Pro. Con él tendrás todo a tu alcance para crear tu web de la manera más fácil.
Además, aprende como monitorizar tu pagina con Arsys Backup Web.