Web fonts vs Commercial fonts + 150 great web typefaces

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.

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:

<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>

Correct answer: Right

Futura PT Book vs Didact Gothic

So, what’s the commercial one?

Futura PT Book: 30 USD

Didact Gothic:

<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>

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:

<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>

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:

<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>

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:

<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>

Correct answer: Left

Helvetica® Neue 65 Medium vs Cabin

So, what’s the commercial one?

Helvetica® Neue 65 Medium: 35 USD

Cabin:

<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>

Correct answer: Right

Frutiger Pro 55 Roman vs DroidSans

So, what’s the commercial one?

Frutiger Pro 55 Roman: 35 USD

DroidSans:

<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>

Correct answer: Left

Gill Sans Pro Medium vs Cabin

So, what’s the commercial one?

Gill Sans Pro Medium: 35 USD

Cabin:

<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>

Correct answer: Right

Eurostile Regular OT STD vs Play

So, what’s the commercial one?

Eurostile Regular OT STD: 29 USD

Play:

<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>

Correct answer: Right

Minion Pro Subhead vs Freehand

So, what’s the commercial one?

Minion Pro Subhead: 35 USD

Freehand:

<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>

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:

<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>

Correct answer: Left

ITC Franklin Gothic Std Book vs Quattrocento

So, what’s the commercial one?

ITC Franklin Gothic Std Book: 29 USD

Quattrocento:

<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>

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:

<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>

Correct answer: Left

Times New Roman STD vs Taprom

So, what’s the commercial one?

Times New Roman STD: 29 USD

Taprom:

<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>

Correct answer: Right

Rockwell Extra Bold vs Bevan

So, what’s the commercial one?

Rockwell Extra Bold: 26 USD

Bevan:

<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>

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.