In the early days of web design, choosing fonts wasn’t much of an issue. It basically came down to size and colour. For the PC, fonts consisted of Arial, Verdana, Tahoma, or Times New Roman. The MAC also had its own fonts sets, which were for the most part not Windows compatible. Slowly more fonts emerged with Adobe True-Type fonts, that were cross compatible with everyone, but the selection was still limited.
If you wanted to create fancy font titles and headers, and you wanted it to render correctly on everyone’s screen, whether they were using PC or MAC, that meant using graphics. The problem was graphics ate both bandwidth and memory, and of course they weren’t SEO friendly. You had to either choose between looks or SEO.
In 2010, Google introduced Google Fonts, formerly known as Google Web Fonts, which was a big game changer! Designers and developers could now choose from hundreds of fonts. By using the Google Font library, designers knew that fonts would be cross-compatible, and render correctly on everyone’s screen. It also meant that titles and headers could remain as text, a critical benefit for search engine optimization (SEO).
Like colour, mixing fonts is not easy. Certain fonts work well together and some don’t mix at all. For the general website owner or WordPress user, this created more options. What fonts should I use? What fonts look good together? It also created the potential for poor font and style combinations.
The creative folks on the Creative Marketing blog by FastPrint.co.uk, have created a handy infographic. It easily shows you which of the 400 commonly used Google fonts work well together and which don’t:
You can learn more from their post, http://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html. They also have a handy PDF download as well. Be sure to check it out!
Readers, what’s your take? What Google Fonts do you like to work with? What font combinations do you like best?
Copyright ©2014 by Avrom Digance, All Rights Reserved.