Using Sans-serif typefaces is the most common way to represent textual information on computers. In plain English, Sans-serif means without serif. Another popular name of such typefaces is Gothic, which can still be seen in popular fonts like Century Gothic.
In print media, Sans-serif fonts are generally used in headlines, technical documents, and photo captions. On web, the typefaces can be seen in the copy text too, as we have a great variety of web fonts now.
This article showcases some best Sans-serif fonts picked from the awesome Google Fonts Library that allows you to use them as web fonts as well as for your design purposes.
-
Open Sans
The most popular Sans-serif on the library and the web as well. Its a humanist sans-serif, and many popular websites including Google make use of it. It is available in 10 styles, created by Steve Matteson.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" /> <h2>Testing "Open Sans" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Open Sans', serif; color: #333; }
-
Roboto
Roboto has the rhythm of both the humanist sans and the serif fonts. It would serve the best if used in the headlines, but can also work fine in the body. Created by Christian Robertson and carries 12 different font styles.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto" /> <h2>Testing "Roboto" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Roboto', serif; color: #333; }
-
Oswald
A widely used font, basically meant for headlines and look perfect on tech and internet related websites. Designed by Vernon Adams and available in 3 styles.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald" /> <h2>Testing "Oswald" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Oswald', serif; color: #333; }
-
Lato
Another awesome sans that has rounded letter shapes, that can be a good alternative to Open Sans, or your first preference over it perhaps. Created by Ćukasz Dziedzic in 10 different styles.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato" /> <h2>Testing "Lato" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Lato', serif; color: #333; }
-
Droid Sans
An font that looks similar to Open Sans. One more by the creator of Open Sans.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" /> <h2>Testing "Droid Sans" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Droid Sans', serif; color: #333; }
-
PT Sans
A font based on 20th century Russian sans-serif typefaces, but also has the traits of contemporary humanistic fonts. Available in 4 different styles, created by ParaType.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans" /> <h2>Testing "PT Sans" font</h2>
CSS
h2 { font: 400 3.5em/125% 'PT Sans', serif; color: #333; }
-
Source Sans Pro
I noticed this great looking font on TNW. Its the first open source font family by the famous software company Adobe. It comes with 12 font styles. Created by Paul D. Hunt.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" /> <h2>Testing "Source Sans Pro" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Source Sans Pro', serif; color: #333; }
-
Ubuntu
Created by Dalton Maag, the font was specifically designed for the Ubuntu project. Later it was launched as an Open font. Available in 8 styles.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu" /> <h2>Testing "Ubuntu" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Ubuntu', serif; color: #333; }
-
Oxygen
Created by Vernon Adams as a part of KDE Projects, Oxygen is now available as an Open source font in 3 styles.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oxygen" /> <h2>Testing "Oxygen" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Oxygen', serif; color: #333; }
-
Noto Sans
A typeface created by Google to remove ‘tofu‘ from the web. As of now, it covers over 30 scripts, and will cover the whole Unicode in future. It comes in 4 different styles.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Noto+Sans" /> <h2>Testing "Noto Sans" font</h2>
CSS
h2 { font: 400 3.5em/125% 'Noto Sans', serif; color: #333; }
Let us know your favorite Sans-serif fonts. Thanks for reading.