Google Fonts Refresh Becomes a Graphics Trend

In 2011 Google launched something they called Google Web Fonts. They redesigned the site last year; added filters and a fun, interactive UX (user experience), simplified the name to Google Fonts; the resulting refresh had all the right ingredients and now the free fonts are a graphics trend.

Are they really free? Yes, totally free! All of the typefaces listed in the typeface directory are open source, meaning you can use them on any web page or even download and edit them yourself. As an added bonus, the giant engine of Google’s powerful servers ensures that your web visitors will have a good experience.

GoogleFonts
Some Popular Google Fonts

What are web fonts?

When the modern Internet was born, back in 1996, the only typefaces a web designer could sensibly use were the ones that they could be sure every personal computer owner already had installed locally on their PC. If a visitor didn’t have the typeface you used on your website, they would have to download it on the spot.

Back then, Microsoft helped us all out by distributing a bunch of fonts for free, including Arial, Times New Roman and Verdana. Because most of the web users had these fonts local to their PCs, websites looked better. However, you see these fonts over and over.

In 2009 advances in web design introduced the ability for the first time for website visitors to download fonts in real time without a noticeably long download time. The fonts using this new software are called web fonts.

How do I use Google Fonts?

For web designers, an online guide on the Google Fonts API (Application Programming Interface) page explains how to use the Google Fonts API to add fonts to your web pages. “You don’t need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.” (We’ll plug our VibeNet Webstore Designer tool here: dealers can easily add Google Fonts to their B2B e-commerce sites without needing a web designer.)

PromiseGroup
Google Fonts: Josefin Sans, Short Stack, Calligraffitti

As of the writing of this blog post there are 821 free Google Fonts. It’s fun to browse fonts.google.com where you can type in text or change background colors to immediately see how a font would look with your content or page. The site suggests fonts that complement each other and you can use the filter to show the most popular styles, Roboto is number one right now.

Are you thinking about changing your B2B e-commerce site? Adding performance and design through the technology offered by Google Fonts could be the answer.

Cinemagraphs, today’s moving pictures

Cinemagraphs are mesmerizing. A new web trend in 2017, the subtle movement draws your attention, bringing life and surprise to an otherwise still photo. Your eyes are drawn to the looping movement.

Can you smell the coffee?

static1.squarespace.com
(Image source: Cinemagraphs)

Different from traditional gifs, a cinemagraph doesn’t look choppy as it plays. You can select a specific element for your movement and the remaining image looks like a still photograph. The good news is there isn’t anything particularly technical about this new web trend; cinemagraphs are easy to make and look cool!

CarReflection
(Image source: Cinemagraphs: Still images that move)

The simple movement can make your website stand out in a unique and fresh way. Cinemagraphs can conjure up visual storytelling, bring life to a flat website, or awaken your senses. And because they don’t require anything fancy to make, you are immediately an artist.

It makes sense to use the camera on your smartphone to make your cinemagraph because the video will be available right away.

If you search in the Apple Store, there are lots of free, easy-to-use apps:

  • Cinemagraph Pro
  • Motion Moving Gif Pictures
  • Werble
  • Cinemagraph Clips Maker
  • MaskArtDraw Motion
  • Draw Motion

Flixel is the most popular cinemagraph editor on Mac. It’s powerful; we all know Mac handles graphics very well.

There are several free apps for Android in the Play store, too. I downloaded one called fotodanz and quickly created my first cinemagraph!

HandMove

It was so easy to make. First you record either a three or five second video. Then you circle the part you want to have movement. Ta-Da, you’re finished! The app does require that you login to share to social media but you can email the image to use on your website without creating an account.

How will you use a cinemagraph on your website or ecommerce site?

Feeling refreshed and ready to go?

SparklingDrink
(Image source: Cinemagraphs)