Blog

Google Font: ¿Qué es y cómo utilizarlo en proyectos de diseño web?

Diseño Web

Google Font: ¿Qué es y cómo utilizarlo en proyectos de diseño web?

Aunque no lo creas, la tipografía es una parte muy importante en cualquier tipo de diseño. La tipografía que elijamos va a tener una gran importancia para transmitir ideas, información y valores. Si hablamos de diseño web, la fuente que utilicemos para los textos determinará la usabilidad de la aplicación o de la web. Existen muchas herramientas que pueden ayudarnos: Google Font es una de ellas. Descubrí cómo utilizar Google Font es tus proyectos de diseño web. ¡Seguí leyendo!

¿Qué es Google Font?

Google Font es una web interactiva en la que podemos encontrar más de 923 familias de fuentes tipográficas de uso libre y completamente gratuito. Además, estas fuentes pueden ser utilizadas en cualquier proyecto web.

Ya sea desde una página de aplicaciones móviles, o en cualquier tipo de diseño en donde lo precisemos (posters, folletos, tarjetas, presentaciones). Además, es open source; es decir, de uso libre.

Google Font tiene incluido un buscador. Este dispone de muchas opciones, para que encuentres la fuente que más se ajuste a la idea que queremos transmitir, así como a los valores de la empresa.

Además, las fuentes las podemos encontrar ya instaladas en plataformas como Shopify o Canva. Por lo tanto, independientemente de si se trata de diseño o de ecommerce, tus tipografías serán las mismas. Es el tipo de ventaja que te puede ofrecer una plataforma tan integrada como Google.

Por último, es posible descargar las fuentes web a un almacenamiento local para uso personal, e incluirlas en nuestros proyectos personales.

<< Lee también Crecé como emprendedor: Conocé más sobre las herramientas UX >>

qué es google font

¿Cómo elijo la mejor fuente para mi proyecto?

Si estás pensando en elegir tipografías que sean perfectas para tu proyecto, llegaste al lugar indicado. Existen diferentes criterios para elegir la mejor fuente posible para un proyecto. Si bien al final del día será cuestión de escuchar el gusto personal. A grandes rasgos hay algunos consejos que podemos seguir.

  1. En primer lugar, es importante que la fuente sea lo más legible posible. Por ejemplo, en el caso de un gran texto (un párrafo, por ejemplo) las fuentes que tienen «serifa» son las más recomendables, ya que las letras estarán en cierta medida más unidas. Las serifas son detalles en los extremos o los bordes de las letras.
  2. Siguiendo el punto anterior, la idea es que elijas siempre una fuente que sea apropiada para el diseño, el contexto y el sector para el que se utilice.
  3. Si vas a utilizar más de una fuente, lo mejor es analizar y elegir aquellas que combinen bien.
  4. Utilizar fuentes populares. Siempre, las cosas son populares por algo. Por eso, te recomendamos el uso de Google Font: Google ya sabe lo que más atrae a los usuarios.

Cómo utilizar Google Font en mi proyecto web

Ahora bien, utilizar Google Font es muy sencillo. Por las dudas, te dejamos un micro tutorial para que incorpores Google Font a tu proyecto.

Paso a paso

El primer paso es buscar la tipografía correcta. Por lo tanto, en el buscador, introducimos las opciones que deseamos para la fuente. Pueden ser según la categoría (Serif, Sans Serif, Display, Handwritting, Monospace), el lenguaje (es decir, el tipo de alfabeto), o las propiedades de las fuentes (número de estilos, el grosor del trazo, etcétera).

Una vez que elegimos la tipografía correcta, hay que descargarla. Hay que hacer clic en Download Family.

Además, tenemos que elegir el método para incrustar la tipografía en la web. Existen dos maneras de hacerlo: el método HTML estándar y el @import de CSS. Si ya estás pensando en diseño web, sabrás de que te estamos hablando.

En el caso de elegir la primera opción, tenemos que copiar y pegar el código que aparece según la selección del punto anterior y lo pegamos en la etiqueta <head> de nuestro archivo HTML.

Por último, si elegimos la opción CSS, solamente debemos rellenar la fuente. En caso de utilizar la fuente Roboto, la línea de CSS sería «font-family: ‘Roboto’, sans-serif;».

<< Quizás te interese Cómo elegir las redes sociales adecuadas para mi negocio >>

Hasta acá llegamos con la información sobre Google Font. Esperamos que te haya sido útil. Desde Academia Crandi, queremos acercarte todas las herramientas que tengamos a mano para que crezcas en el mundo digital. No solamente a través de tu web, sino también dentro del mundo de las redes sociales.

¿Sabías que LinkedIn es la red social clave para generar una red de contacto de calidad y potenciar tus ventas B2B? Generá un perfil ganador, potenciá tu networking y descubrí los secretos para sacarle todo el provecho a esta red, con nuestro Curso ‘Reinventando la forma de hacer Negocios B2B con LinkedIn’

Curso LinkedIn B2B

ÚLTIMOS ARTÍCULOS

¿Tenés alguna duda? ¡Dejanos tu comentario!

Tu dirección de correo electrónico no será publicada.

lineas shape 01
circulo gris

¡Suscribite a nuestro Newsletter!

Y recibí en tu casilla de correo todas las novedades sobre Marketing y Venta Digital de la Academia.