In the past, before options like Google Fonts, web developers were stuck using a limited list of web-safe fonts. Going outside the scope of these “safe” fonts sometimes resulted in pixilation and other issues. However, technological advances in recent years mean computer screens are a higher definition, and even some fonts that used to be on the no-no list for designers are now usable.
However, for the best results possible, it’s essential to still choose web-safe fonts that work across multiple types of devices and screen sizes. There are many advantages to using Google Fonts, including that they’re free and look good across different kinds of platforms thanks to Google’s content delivery network (CDN) and the fact that Google Fonts supports all the major internet browsers and mobile device types.
The number of people using a mobile screen to access the internet has grown by about 70 percent in the last decade, with around 82 percent of people using mobile devices at least some of the time. Google Fonts ensure your website is accessible to everyone, so we looked at the top Google Fonts based on views and came up with 15 Google Fonts you should be using.
Roboto is a sans-serif font created by Google designer Christian Robertson. He also created Ubuntu-Title and Dear Sarah — a handwritten font. Roboto is meant for Android devices but works well on any device. Roboto has a distinct geometric look but also features curving, open lines that give it an informal feel. It also allows letters to be as wide as needed on the X-axis.
This font is a modern looking one, so it’s perfect for fresh, rising technology companies or products aimed at younger generations. The font offers a different set of weights, depending on your needs.
2. Open Sans
Open Sans is another sans-serif font and falls into the humanist category, which Steve Matteson created. Matteson also created corporate typefaces for Android, Microsoft and Xbox. Open Sans is used by Google on a number of their pages. The font has an 897-character set with Latin and Greek character sets. It has an open, friendly look but is extremely legible in different font sizes.
Lato is from the sans-serif family of typefaces and was created by Lukasz Dziedzic in 2010 in Warsaw, Poland. The font was part of a project for a large client but was eventually released to the public. The typeface was created to appear transparent but show unique traits when used in headlines. It’s sleek, elegant and ideally suited for more serious and formal tasks.
These letters are curvy, but they still have the straight lines of a traditional sans-serif. Lukasz worked at balancing classical elements, which you can see in the uppercase lettering. Note how the letter “L” has a wide base and the letter “A” is very angular.
Although limited in number of styles (only two), Charm is an excellent handwritten font choice from Google Fonts. Created by the Thai communication design firm Cadson Demak, the font is handwritten and features letters in Thai and Latin. Cadson Demak originally created the letters on paper with a flat tip pen and later adapted the look for online use. The font looks good on religious sites as part of a header or in a logo. The look is traditional, so it would also work well for historical subjects.
One issue with some handwritten fonts is that they aren’t easy to read on smaller screens or in smaller text. Charm, on the other hand, is subtle enough that it translates well across all screen sizes.
Oswald is reminiscent of Alternat Gothic sans-serif typefaces. Designer Vernon Adams redrew the traditional typeface to work better with modern screens. He also created Oxygen Mono, Monda and Bowlby One. The original font launched in 2011 but was updated through 2014, as the designer added light, bold weights and additional support for Latin. He also tightened the spacing and kerning over the years.
This font has a sharp, crisp look that works well for online magazines and blogs.
Montserrat is an alternate font created by Julieta Ulanovsky. She gained inspiration from old signs in Buenos Aires located in the Montserrat neighborhood, thus the name of the font. The urban typography on the signs was from the early 1900s and has a slightly slanted look almost as though the letters are titled just a bit.
The typeface has a tall Y-axis and a fairly wide X-axis. Montserrat works best as a headline, as it creates a wide footprint for body text.
Raleway is a huge font family with 18 different styles, including a sister dotted style for use in headlines or to create worksheets for students. While the font was initially designed by Matt McInerney, multiple other designers have expanded on it to include different weights and styles.
This font works particularly well for big headlines because it’s a rather option. In tiny sizes, it’s somewhat faint because of the narrow lines. More than 4,600,000 websites utilize Raleway.
Merriweather was explicitly designed as a serif typeface for screen reading. The X-height is tall, and the letterforms are condensed. The letters are slightly slanted, with heavy serifs and open letters. The U.S.-based type design foundry Sorkin Type led the project creating Merriweather. Note the wide letters and serifs at the edges, creating a crisp look that’s somewhat traditional in nature.
Want to Become a Design Expert?
Join over 790 subscribers!
Sign up for weekly design news sent right to your inbox!
9. Libre Franklin
Morris Fuller Benton was an American typeface designer in the early 20th century. He created a number of vintage fonts. Libre Franklin found inspiration from Benton’s ATF design, but modernized it to look good on screens and all device sizes. The font is a very simple sans-serif without any added embellishments. It works well for invitations and headlines.
10. Crimson Text
Crimson Text offers small caps, figure styles and fleurons. Created by Sebastion Kosch, the font grabs inspiration from designers such as Jan Tschichold, Jonathan Hoefler and Robert Slimbach. It has a heavy weight and partial serifs.
11. Playfair Display
Playfair Display appears in more than 2 million websites. It’s considered a transitional design and was created by Claus Eggers Sorensen as a nod to the European Enlightenment of the 18th century. The font features thin, soft hairlines and heavy curves. The serifs are readily apparent, and the font is best used for larger text such as headlines.
Google suggests using Georgia for the body text because it meshes well with the style of Playfair Display. The two fonts were made for displaying together.
Poppins is the invention of the Indian Type Foundry (ITF) and is a multilingual font for both print and digital. Some of the types of companies using this font style include Apple, Sony and Google. Google classifies Poppins as a geometric sans-serif typeface. You’ll notice the style in the designs of the Latin glyphs, such as the ampersand with strong, even strokes that give the font a fluid look. This font has an informal feel that works well for just about any type of website.
13. Indie Flower
Indie Flower handwritten font is the brainchild of Kimberly Geswein. It’s reminiscent of the writing on pottery by well-known artist Rae Dunn, making it a highly popular style right now. The font is young, fresh, carefree and works well for crafting and artist websites.
Indie Flower offers a casual look to any heading and also works well for signs and logos.
14. Source Sans Pro
Source Sans Pro was initially Adobe’s open source typeface and one of the first introduced by designer Paul D. Hunt. The font is sans-serif and created for an online environment. Source Sans Pro appears in over 3 million websites and is featured billions of times. The font features straight lines and extra curves on letters such as the lowercase “g.”
Aleo is a serif font created by Alessio Laiso and Keven Conroy as a companion to the Lato font listed above. Details on the letters are sleek and semi-rounded, keeping it bold but readable even on smaller screens. Serifs on verticals are wide and bold, while serifs on horizontals are lighter and thinner. The curves on letters such as “C” and “G” are reminiscent of cursive writing.
Although a mere 1,000 websites feature Aleo, the API served Aleo font over 200,000 times in the last week alone. The font works well for user interface in apps, for example.
These are just a few of the more popular Google Fonts available for designers. There are more than 915 font families listed on Google Fonts, providing a nice selection of nearly any type of font you might need. Each font has its own personality, so get to know each one on a personal level, and decide which is best for your particular needs.
The Font Series Guide
Chapter 1: 15 Google Fonts You Should Be Using
Chapter 2: Times New Roman
Chapter 3: Roboto
Chapter 4: Georgia
Chapter 5: Verdana
Chapter 6: Helvetica
Chapter 7: Comic Sans
Chapter 8: Didot
Chapter 9: Arial
Chapter 10: Tahoma
Chapter 11: Garamond
Chapter 12: Century Gothic
Chapter 13: Brody
Chapter 14: Bromello
Chapter 15: Savoy
Chapter 16: Athene
Chapter 17: Calibri
Chapter 18: Proxima Nova
Chapter 19: Anders