close ✖
bypeople

Helvetica free download… with Google Web Fonts

0
Created by Admin on Nov 19 2014

We can’t deny the quality work and support that you acquire by purchasing commercial items, like commercial fonts like the lovely Helvetica.

However, Now that we have amazing tools like Google Web Fonts, by the way if you want to have the best fonts from Google web fonts in a single place, then you should go to Best web fonts; it’s not totally necessary to use commercial fonts unless you need the premium support or your application license demands it. But what happens if you want to make a flyer for your best friend and you consider that Helvetica is the best choice?, you know that your friend is not going to pay you for purchasing that font and he will expect you to do something. We know about this problem and that’s why we decided to drive a fun experiment where by using Google Fonts we will try to recreate some of the popular (commercial) Helvetica variations in the most similar way possible. 

Disclaimer

This exercise wants to show how to leverage Google Web Fonts to achieve an Helvetica-like look. We don’t have ownership over the fonts that were utilized on this article, this is only an experiment where we show the best way to use web fonts for emulating some of variations of the popular Helvetica font.

Nobody can’t deny the importance of Helvetica in graphic design history, it’s a typeface that every designer worships and considers as the epitome of type design. We sincerely encourage you to purchase this font with all its variations just for thanking Max Miedinger and Eduard Hoffmann, the masters who created it.

Purchase Helvetica: http://www.identifont.com/show?MR

Helvetica® Light vs Anonymous Pro Regular

Considering the uniqueness of Helvetica, finding a similar font that is not only free but useable as a web font is not an easy job. After trying several fonts we found Anonymous Pro, the closest font to Helvetica, both fonts have a similar structure though Anonymous Pro is a little more bolded than Helvetica.

Helvetica® Light

FontsMatch13

Anonymous Pro Regular
Font by: Mark Simonson
Available at Google Web Fonts

FontsMatch14

In our case we did not change the CSS to obtain the previous screenshot, though you can experiment a little bit with the leading and spacing, the font itself already provides a very similar look to Helvetica. In any case here’s the CSS for Anonymous Pro:

[css]

<link href="http://fonts.googleapis.com/css?family=Anonymous+Pro:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Anonymous Pro’, serif;
font-size: 136px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.011em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Helvetica® NarrowRoman vs Puritan Regular

This variation of Helvetica is ideal for designs where you need to place a lot of information inside a small area and you don’t want to sacrifice legibility, it’s a beautiful font that always works great in graphic design. But if you want a similar font to Helvetica® NarrowRoman that is free and web compatible then you may want to go with Puritan Regular.

Helvetica® NarrowRoman

FontsMatch15

Puritan Regular
Font by: Ben Weiner
Available at Google Web Fonts

FontsMatch16

Although Puritan Regular is less stretched than Helvetica® NarrowRoman, it can still be a very helpful font to use in small spaces while assuring a great readability. A good method to make Puritan Regular look more like Helvetica is reduce its leading to make the characters look more contracted. On this case the CSS that we obtained after doing this was the following:

[css]

<link href="http://fonts.googleapis.com/css?family=Puritan:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Puritan’, serif;
font-size: 126px;
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]

Helvetica® Std 77 Bold vs Cabin Bold

Helvetica Bold is one of the most popular Helvetica variations, utilized primarily for headings and highlight texts. We knew that there should be a Google Font that could match this typeface and indeed, we found Cabin Bold. Both fonts have similar calibers and the differences rely basically on the shape, with Helvetica Bold being more structured than Cabin.

Helvetica® Std 77 Bold

FontsMatch09

Cabin Bold
Font by: Pablo Impallari
Available at Google Web Fonts

FontsMatch10

If you adjust Cabin Bold properties (leading, tracking, spacing) you will be able to emulate Helvetica Bold in a very effective way. The differences can be noticed at big sizes but if your intention is to use Cabin Bold at let’s say 24 pt, you will be fine, by the way, this is the CSS that gave us the previous screenshot:

[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: 145px;
font-style: normal;
font-weight: 700;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.004em;
word-spacing: -0.041em;
line-height: 1.09;
}
</style>

[/css]

Helvetica® Black Condensed vs Anton Regular

Often used in advertising, this heavy variation of Helvetica has a strong structure that facilitates its reading from larger distances, making it suitable for outdoor campaigns and large publications. In Google Fonts you can find Anton Regular, a lovely typeface that not only looks like Black Condensed but is also free to use and can be implemented in your website easily.

Helvetica® Black Condensed

FontsMatch11

Anton Regular
Font by: Vernon Adams
Available at Google Web Fonts

FontsMatch12

If you want to create uppercase titles or designs, there’s no doubt that Anton Regular makes a great job emulating Black Condensed. Now let’s take a look at the CSS provided by the Google Font Preview when we took the previous screenshot:

[css]

<link href="http://fonts.googleapis.com/css?family=Anton:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Anton’, serif;
font-size: 128px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.029em;
word-spacing: -0.041em;
line-height: 1.09;
}
</style>

[/css]

Neue Helvetica® Std 25 Ultra Light vs Raleway Regular

Now we like to ask the first two contenders to enter the ring. On the left side, with more than 406 positive votes and hundreds of sells, ladies and gentleman, the Neue Helvetica® Std 25 Ultra Light. On the right side, with more than 13 million views on the last month, Matt McInerney give us Raleway Regular.

The idea of this test is check how close we can make the Raleway font to look like this variation of Neue Helvetica. In order to achieve this we used the font previewers and then we played with the different values, we can say the result was really great as the following screenshot shows:

Neue Helvetica® Std 25 Ultra Light

FontsMatch01

Raleway Regular
Font by: Matt McInerney
Available at Google Web Fonts

FontsMatch02

The results show that using Raleway can give you similar results to this Neue Helvetica variation, to find out the exact parameters that we input in the Google Font Previewer, here’s the CSS:

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

Neue Helvetica® Std 55 Roman vs Arimo Regular

For this next assault we have a stronger version of Neue Helvetica competing against Arimo Regular, another Google font created by Steve Matteson. On this case the results that we obtained showed us that Arimo plays a little bit with the line caliber while Neue doesn’t, other than that both typefaces display quite similar structures.

Neue Helvetica® Std 55 Roman

FontsMatch03

Arimo Regular
Font by: Steve Matteson
Available at Google Web Fonts

FontsMatch04

As you can see, the differences are not considerable and both fonts look great. Here’s the resultant CSS that gave us this previous screenshot:

[css]

<link href="http://fonts.googleapis.com/css?family=Arimo:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Arimo’, serif;
font-size: 139px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.037em;
word-spacing: -0.041em;
line-height: 1.18;
}
</style>

[/css]

Neue Helvetica® Std 57 Condensed vs PT Sans Narrow

Two light typefaces face each other in this match, Std 57 has a stronger structure, while PT Sans Narrow presents some subtle Serif vibes. At lower sizes both fonts have a great legibility and noticing the difference is something that an average reader won’t notice.

Neue Helvetica® Std 57 Condensed

FontsMatch07

PT Sans Narrow
Font by: Multiple designers
Available at Google Web Fonts

FontsMatch08

As you can see in the two previous screenshots, the differences are minimal (maybe the most relevant is the ‘I’ letter). To achieve this look, the PT Sans Narrow was adjusted according to the following CSS:

[css]

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘PT Sans Narrow’, serif;
font-size: 128px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.029em;
word-spacing: -0.041em;
line-height: 1.09;
}
</style>

[/css]

Neue Helvetica® Std 77 Bold Condensed vs Oswald Regular

On the third stage we want to compare a condensed version of Neue Helvetica against Oswald Regular, another lovely web font. Both fonts look a lot alike with the Oswald having higher characters and thinner regions. Considering that this comparison is being made at font sizes above 72, we can assure that using these two fonts at an average reading size will provide very similar results.

Neue Helvetica® Std 77 Bold

FontsMatch05

Oswald Regular
Font by: Vernon Adams
Available at Google Web Fonts

FontsMatch06

Although Oswald Regular is a more stretched font, at lower sizes it gives a similar look to the one given by Neue Helvetica® Std 77. Now let’s take a look at the CSS behind Oswald Regular that will help us reach this nice look:

[css]

<link href="http://fonts.googleapis.com/css?family=Oswald:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Oswald’, serif;
font-size: 139px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.008em;
word-spacing: -0.041em;
line-height: 1.09;
}
</style>

[/css]

Helvetica® Rounded Black vs Corben Regular

Helvetica has a nice rounded variation for those who want something more fluid, less structured. Round Black was very popular a few years ago and still can be found in many ads and campaigns. After browsing throughout the entire Google API, we have to say that there’s currently no font that can emulate Helvetica® Rounded Black but still if you need something slightly similar, then our suggestion is to utilize Corben Regular.

Helvetica® Rounded Black

FontsMatch17

Corben Regular
Font by: Vernon Adams
Available at Google Web Fonts

FontsMatch18

The differences between both fonts are easy to notice, Corben has a more retro look while Rounded Black has simply a form change. Considering that Google Fonts is growing almost every day, we’re confident that we’ll be seeing a more similar font to Helvetica® Rounded Black in the future, in the meantime we suggest you to work with Corben to reach a similar style, regarding the CSS for this font here you have it:

[css]

<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Corben’, serif;
font-size: 115px;
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]

Helvetica® TextBook Roman vs Droid Sans Regular

Finally we have Helvetica® TextBook Roman, an elegant Sans Serif font that is difficult to make look bad in a design due its tight structure, legibility and accurate font caliber. Then we have Droid Sans Regular, a free web font that though does not look exactly like the previous font we mentioned, it certainly has a lot of similarities with this Helvetica variation.

Helvetica® TextBook Roman

FontsMatch19

Droid Sans Regular
Font by: Steve Matteson
Available at Google Web Fonts

FontsMatch20

By staring at the two previous images, we can infer that Droid Sans is less strong than TextBook Roman, but still both fonts are lovely and work really well at low sizes. We played a little bit with the CSS to see if we can make Droid Sans even better and that’s what we obtained:

[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: 133px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.011em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Final thoughts

OK people, we have reached the end of this exercise, we’ve seen some beautiful Google Fonts that have nothing to envy to the acclaimed Helvetica (we love it too). There’s no doubt in why Helvetica has stood for many decades as the number one typeface in graphic and now web design, but now that the play conditions have changed, it’s important to have alternatives that can not only offer a similar result but also are easier to use, we hope that you find this practice entertaining and well, please leave us a comment sharing your opinion regarding this and all our other articles, as always we like to thank you for reading us and we’ll see you soon.

Our Curators Become curator

Top

This a test message in global notification
Your download will start shortly.
bypeople
bypeople

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

bypeople