Google Web Fonts and How to Use
As a web designer, you’re probably well aware of the importance of
typeface. With the growing amount of businesses engaging in content
marketing, font selection is becoming all the more crucial.
There’s nothing worse than coming across a website with awesome
content and horrible typeface. One of your main goals as a designer is
ensuring a positive experience for the end-user.
After the release of Google Web Fonts, it’s become a lot easier to
incorporate beautiful typography into your websites. The only difficulty
is sorting through the 600+ styles that are offered.
For this reason, we’ve put together our top 20 Google web fonts that are sure to bring out the best of your design.
But first, let’s walk you through the installation process.
How to Use Google Web Fonts
Step 1
Step 2
1
2
3
|
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
|
Step 3
1
2
3
|
body {
font-family: 'Open Sans', sans-serif;
}
|
Recommended Google Web Fonts
Open Sans
Droid Sans
PT Sans
Lato
Oswald
Droid Serif
Roboto
Lora
Libre Baskerville
Josefin Slab
Arvo
Ubuntu
Raleway
Source Sans Pro
Lobster
PT Serif
Old Standard TT
Volkorn
Gravitas One
Merriweather
Google Web Fonts is a free, open-source and hosted service. The fonts
are compatible with a wide variety of devices, browsers and operating
systems. You don’t need to create an account and you’re not restricted
to using them in any way. It’s definitely one of the best solutions for
adding nice typeface to your site.
Head over to Google Fonts
and pick out a font. Don’t worry, we’ll provide you with a bunch of
suggestions down below. Once you have one picked out, click the quick
use button shown below.
You’ll then be brought to a screen where you can choose the style you
want (ie. light, bold, extra-bold, etc…) as well as the character sets.
After that, you will be given a piece of code that you will add into
the <head> of your website. For this example, I chose Open Sans.
Google API will generate the necessary CSS code to add to your stylesheet. Simply add the generated code to your CSS file.
Now that you know how to install them, let’s go ahead with the recommendations.
Open sans is a sans serif typeface designed by Steve Matteson and it’s the most popular Google Web font available.
Open Sans is an upright stressed font with open forms and a neutral
but friendly appearance. It was optimized for print, web and mobile
interface and has gained extreme popularity over the excellent
legibility of the typeface.
Recommended pairings: Roboto, Oswlad & Lato.
Similar to its open sans counterpart, this font was also designed
with an upright stress, open forms and a neutral but friendly
appearance.
Droid was heavily optimized for user interfaces and to be comfortable
for reading on a mobile handset in menus, web browser and other screen
text.
Recommended pairings: Droid Serif, Lobster, Open Sans.
PT Sans is based on Russian sans serif types of the second part of
the 20th century, but at the same time has distinctive features of
contemporary humanistic designs.
Recommended pairings: PT Serif, Lato, Ubuntu
Lato is another sans serif typeface designed by Warsaw-based designer
Łukasz Dziedzic. Lato gets its name from the Polish word meaning
“summer.”
The font is based off classical proportions which are particularly
visible in the uppercase in order to give the letterforms a familiar
sense of harmony and elegance. The semi-rounded details of the letters
give off a feeling of warmth, while the strong structure provides a
sense of stability and seriousness.
Recommended pairings: Open Sans, Source Sans Pro, Roboto.
Oswald is a reworking of the classic style historically represented
by the ‘Alternate Gothic’ sans serif typefaces. The characters of Oswald
have been re-drawn and reformed to better fit the pixel grid of
standard digital screens.
Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.
Recommended pairings: Open Sans, Droid Sans, Roboto
The Droid Serif font family features a contemporary appearance and
was designed for comfortable reading on screen. The font features
slightly condensed letterforms to maximize the amount of text displayed
on small screens. Vertical stress, sturdy serifs and open forms
contribute to the readability of Droid Serif while its proportion and
overall design complement its companion Droid Sans.
Recommended pairings: Droid Sans, Open Sans, Raleway.
Roboto is the font we’re using for our blog which features friendly
and open curves. The goal of the this font was not to allow distorted
letterforms to force a rigid rhythm. In contrast, Roboto doesn’t
compromise by allowing letter to be settled into their natural width.
This makes for a more natural reading rhythm more commonly found in
humanist and serif types.
Recommended pairings: Open Sans, Lato, Droid Sans.
Lora is a well-balanced contemporary serif with roots in calligraphy.
It is a text typeface with moderate contrast well suited for body text.
Lora is optimized for screen appearance but works equally well in print.
Recommended pairings: Open Sans, Lato, Ubuntu.
Libre Baskerville is a web font optimized for body text (typically
16px.) It is based on the American Type Founder’s Baskerville from 1941,
but it has a taller x-height, wider counters and a little less
contrast, that allow it to work well for reading on-screen.
Josefin Slab is a Scandinavian style font with typewriter style
attributes. It was developed by Santiago Orozco who wanted to stick to
the idea of Scandinavian style, so he put a lot of attention to the
diacritics.
Recommended pairings: Open Sans, Pacifico, Oswald
Arvo is a geometric slab-serif typeface family suited for screen and
print. The flavour of the font is rather mixed. Its monolinearish, but
has tiny bit of contrast (which increases the legibility a little in Mac
OS X.).
Recommended pairings: Droid Sans, PT Sans, Ubuntu.
The new Ubuntu Font Family was started to enable the personality of
Ubuntu to be seen and felt in every menu, button and dialog. The
typeface is sans-serif, uses OpenType features and is manually hinted
for clarity on desktop and mobile computing screens.
Recommended pairings: Open Sans, Droid Sans, Roboto.
Raleway is an elegant sans-serif typeface family. It was initially
designed as a single thin weight and later expanded into a 9 weight
family.
Recommended pairings: Droid Sans, Lobster, Droid Serif.
Source Sans Pro, Adobe’s first open source typeface family, was
designed by Paul D. Hunt as a sans serif typeface intended to work well
in user interfaces.
One of the important design considerations was to create a typeface that reads well over extended periods of time.
Recommended pairings: Lato, Open Sans, Roboto.
The font draws many versions of each letter and a lot of different
letter-pairs (aka “ligatures”) so it always uses the best possible
variation of each letter depending of the context of the letter inside
each word. All this happens automatically in any browser that supports
ligatures.
We recommend Lobster for headings and titles but not so much for large paragraphs of text.
Recommended pairings: Droid sans, Raleway, Open Sans.
PT Serif is a transitional serif typeface with humanistic terminals.
It is designed for use together with PT Sans, and is harmonized across
metrics, proportions, weights and design.
Recommended pairings: PT Sans, Open Sans, Droid Sans.
Old Standard TT uses a classical style of serif typefaces commonly
used in various editions of the late 19th and early 20th century
It’s considered a good choice for typesetting scientific papers,
especially on social and humanitarian sciences, as its specific features
are closely associated in people’s eyes with old books they learned on.
Recommended pairings: Droid Sans, Lobster, Vollkorn
It intends to be a quiet, modest and well working text face for bread
and butter use. Unlike its examples in the book faces from the
renaissance until today, it has dark and meaty serifs and a bouncing and
healthy look. It might be used as body type as well as for headlines or
titles.
Recommended parings: Droid Sans, Lobster, Open Sans.
Gravitas One is modeled on the “UK fat face” which is a kind of very
heavy advertising type created during the industrial revolution in
England.
The letter forms are characterized by an attention getting and strong
contrast between the very heavy vertical shapes and the thin horizontal
ones. The contrast of the design means that it will be most useful when
set from medium to large sizes.
Recommended pairings: Paytone one, Open Sans, Lato
Merriweather features a very large x height, slightly condensed
letterforms, a mild diagonal stress, sturdy serifs and open forms.
Recommended pairings: Open sans, Oswald, Merriweather
COMMENTS