Commercial fonts or free fonts?, this is a big dilemma that afflicts many designers as they find difficult to decide between beautiful but expensive fonts such as Helvetica or Futura and free fonts like the ones featured on Google Web Fonts, which also have a really nice design but will never be like the originals.
This post more than being an extensive article where we discuss the benefits of free and commercial fonts wants to offer you a pleasant time through an amusing game where you must choose between different options and find out which option is the correct, just like the old Pepsi vs Coke commercials that we saw many years ago. Let’s see how much you know about typefaces!. After the game, you will find a great list featuring some of the nicest web fonts available nowadays for your inspiration. Also if you like these fonts you will find pretty useful our last project Best web fonts, a handpicked selection of the best fonts from Google web fonts.
The exercise goes like this: In every point you’re going to find two typefaces, one commercial and one from the Google Web Fonts library, you must try to guess which option corresponds to the original commercial font, let’s see how much do you know about typefaces.
Neue Helvetica® Std 25 vs Raleway
So, what’s the commercial one?
Neue Helvetica® Std 25: 29 USD
Raleway:
[css]
<link href="http://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Raleway’, serif;
font-size: 134px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.032em;
word-spacing: 0em;
line-height: 1.22;
}
</style>
[/css]
Correct answer: Right
Futura PT Book vs Didact Gothic
So, what’s the commercial one?
Futura PT Book: 30 USD
Didact Gothic:
[css]
<link href="http://fonts.googleapis.com/css?family=Didact+Gothic:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Didact Gothic’, serif;
font-size: 128px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Right
Myriad Pro vs Cabin
So, what’s the commercial one?
Myriad Pro: 969 USD (available with the entire Myriad Pro pack)
Cabin:
[css]
<link href="http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Cabin’, serif;
font-size: 128px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
Avant Garde Gothic Std Book vs Didact Gothic
So, what’s the commercial one?
Avant Garde Gothic Std Book: 29 USD
Didact Gothic:
[css]
<link href="http://fonts.googleapis.com/css?family=Didact+Gothic:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Didact Gothic’, serif;
font-size: 149px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
FF Milo Offc Medium vs Molengo
So, what’s the commercial one?
FF Milo Offc Medium: 109 USD (available with the entire FF Milo Offc Medium Set pack)
Molengo:
[css]
<link href="http://fonts.googleapis.com/css?family=Molengo:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Molengo’, serif;
font-size: 103px;
font-style: normal;
font-weight: 700;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
Helvetica® Neue 65 Medium vs Cabin
So, what’s the commercial one?
Helvetica® Neue 65 Medium: 35 USD
Cabin:
[css]
<link href="http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Cabin’, serif;
font-size: 98px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Right
Frutiger Pro 55 Roman vs DroidSans
So, what’s the commercial one?
Frutiger Pro 55 Roman: 35 USD
DroidSans:
[css]
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Droid Sans’, serif;
font-size: 98px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
Gill Sans Pro Medium vs Cabin
So, what’s the commercial one?
Gill Sans Pro Medium: 35 USD
Cabin:
[css]
<link href="http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Cabin’, serif;
font-size: 77px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Right
Eurostile Regular OT STD vs Play
So, what’s the commercial one?
Eurostile Regular OT STD: 29 USD
Play:
[css]
<link href="http://fonts.googleapis.com/css?family=Play:regular,bold" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Play’, serif;
font-size: 124px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Right
Minion Pro Subhead vs Freehand
So, what’s the commercial one?
Minion Pro Subhead: 35 USD
Freehand:
[css]
<link href="http://fonts.googleapis.com/css?family=Freehand:regular&subset=khmer" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Freehand’, serif;
font-size: 129px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: -0.154em;
line-height: 0.6;
}
</style>
[/css]
Correct answer: Left
FF Meta Serif Offc vs Radley
So, what’s the commercial one?
FF Meta Serif Offc: 109 USD (available with the entire FF Meta Serif Offc Book Set pack)
Radley:
[css]
<link href="http://fonts.googleapis.com/css?family=Radley:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Radley’, serif;
font-size: 134px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
ITC Franklin Gothic Std Book vs Quattrocento
So, what’s the commercial one?
ITC Franklin Gothic Std Book: 29 USD
Quattrocento:
[css]
<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Quattrocento Sans’, serif;
font-size: 127px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.02em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Right
Museo Slab 500 Regular OT vs Arvo
So, what’s the commercial one?
Museo Slab 500 Regular OT: Free for registered users
Arvo:
[css]
<link href="http://fonts.googleapis.com/css?family=Arvo:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Arvo’, serif;
font-size: 110px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.02em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
Times New Roman STD vs Taprom
So, what’s the commercial one?
Times New Roman STD: 29 USD
Taprom:
[css]
<link href="http://fonts.googleapis.com/css?family=Taprom:regular&subset=khmer" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Taprom’, serif;
font-size: 110px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.002em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Right
Rockwell Extra Bold vs Bevan
So, what’s the commercial one?
Rockwell Extra Bold: 26 USD
Bevan:
[css]
<link href="http://fonts.googleapis.com/css?family=Bevan:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Bevan’, serif;
font-size: 73px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.085em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
[/css]
Correct answer: Left
Awesome web fonts
Web fonts are definitely some of the greatest things that have happened for web designers in the recent time, as they are no longer limited to the small list of the so-called ‘system fonts’, all they have to do is leverage the @font-face property and implement any web font they want with the certainty that people will see them properly.
There are different methods for embedding typefaces on the web and on this next section we want to show you the most relevant methods as well as some of the nicest fonts that you can find on the official sites of these methods for further implementation within your web projects, so let’s take a look at them:
Cufón
These method is an effective and easy to use system for inserting non-web fonts into any webpage without relying on plugins or tricky scripts. Cufón works its magic through JavaScript and HTML5 canvas for fonts’ rendering. On the official site you can find a tool for converting any font you choose into SVG, and from then it creates a JavaScript file to work with the HTML.
Cufón is one of the most popular web-font systems around thanks to its simplicity and compatibility with all popular browsers (IE included), the system also integrates with CSS3 features, making it even nicer and powerful. The main problem with Cufón is JavaScript, because many people tend to block it on their web browsers. Now let’s take a look at some of the most attractive fonts that you can find Cufón-ready.
Titillium
Bebas Neue
Caviar Dreams
Coolvetica
ChunkFive
Capsuula
Quicksand
Circula
Eurofurence
Qlassik
League Gothic
Greyscale
Droid
Dustismo
Enigmatic
Folks Light
Forque
Hamburger Heaven
Inconsolata
Lane
@Font-face in Font Squirrel
@font-face is a CSS rule that lets people download any font from their servers and then render it inside a webpage if the user doesn’t have that font installed. Therefore, as we said previously, web designers will no longer have to adhere to a particular set of ‘web safe’ fonts that come pre-installed in every PC.
There are different online services that take advantage of the @font-face technology to provide tons of web-ready fonts. One of the most popular services to find free web fonts and all the information about them is Font Squirrel, now let’s take a glance at some of the nicest fonts that you can find there.
St Marie
Nobile
Aller
Cantarell
Sansation
Matchbook
Ostrich Sans
Lekton
Louisianne
Afta Sans
Cicle
Folks Light
Metrophobic
OSP Din
Tex Gyre Adventor
Tiresias
Walkway
Winterthurcondensed
Rokkitt
Typoslabserif
Google Web Fonts
Of course that the guys of Google must have their own font library. Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers, now let’s take a glance into some of the most attractive fonts of this collection.
Muli
Maven
Wire One
Shanti
Ultra
Francois One
Didactic Gothic
News Cycle
Amaranth
Oswald
Open Sans Condensed
Anton
Puritan
Yanone Kaffeesatz
Crushed
Bevan
Lobster
Smythe
Coda
Copse
Fonts.com Web Fonts
For many years Fonts.com has been one of the top places to find quality fonts at reasonable prices. You can find a web fonts section featuring more than 8.000 fonts to be implemented on your web projects. In order to start using these fonts you’ll have to signup, but even so, this is a great font service in case you’re constantly working with fonts and developing for the web.
DIN Next
Trade Gothic®
Alternate Gothic No 1
Angro™ Light
Badloc™ Regular
Bell Centennial Sub Caption
Burin Sans™ Regular
Corinthian Condensed Bold
Digi Grotesk™ S Light
Eurostile® Next Light
Flyer™ Black Condensed
Neue Frutiger® Regular
Gill Sans® Book SC
ITC Goudy Sans® Black Italic
Neue Helvetica® 33 Extended Thin
Helvetica® Condensed
Kabel® Heavy
Morris Sans® Light Condensed
Plak® Black
Sackers™ Gothic Light
Typekit
One of the most popular paid services around, Typekit provides font licensing to its users to the humongous store of fonts that the page possesses. You can submit your own fonts in exchange for unique offers and promotions. The site offers a complete support to @font-face, giving you the chance of embedding any web font within your web projects.
Adelle Web
Fertigo Pro Script
Anisette STD Petite SC
Le Havre
Colaborate
Hydrophilia Liquid
Tenby Six
Moby
Ligurino Condensed
Share TechMono
Magion Web
Calluna Sans
Poplar Std
saxMono
Faricy New
Alwyn New
Tandelle
Liberation Sans
Ubuntu
Ostrich Sans Dashed
Depot New
Font Deck
The renowned web design company Clear Left decided to join forces with OmniTI to release Font Deck, a paid service where you will only be charged for the fonts you use, which makes it perfect for the persons that want to utilize just one or two fonts in their blogs. The problem with this service is that you cannot download the fonts and therefore you can purchase a free package to display them online.
The Shire Types Cheshire
Proxima Nova Regular
Bliss Bold
Sommet Slab Black
Reader Regular
Montefiore Regular
Malamondo Regular
Calypso E Bold
Oblik Regular
Futura Book
Avalon Medium
Urbano Condensed Regular
FS Lola Web Medium
Bree Regular
Square Serif Book
Ronnia Condensed Regular
NeoGram Condensed Bold
Grotesk Condensed URW Light
Mostra Nuova Regular
Passage Regular
Font Spring
Instead of offering yearly / monthly subscriptions, this site decided to stick with the classic system of single font purchasing. You can download the font and then host them on your own server, as more than 99 % of the fonts on the site can be implemented through the @font-face property. Now let’s take a look at some of the nicest fonts that you can find on this site:
Calluna Sans
Banda
Expressway
Familiar Pro
Springsteel
Steelfish
Anivers
Mentone
Galette
Kenyan Coffee
Florin Sans
Circula
Deftone Stylus
Dezen Pro
Dream Orphanage
Fabryka 4F
Fenwick
FuturaClassic
Gnuolane
Jesaya
So friend, how many points did you make?, don’t feel bad if you missed more than one because that was the whole idea of this exercise, to demonstrate how the most famous commercial fonts can be emulated using the Google Fonts library, though we cannot deny the awesomeness of all the original typefaces featured on this exercise. If you liked this test and the web fonts that we showed you, please help us share it with your friends, let’s see who is the master of typefaces!!, don’t forget to check all our articles and updates to find more useful web design posts.
Leave a comment
94 comments for Web fonts vs Commercial fonts + 150 great web typefaces