Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Helvetica free download… with Google Web Fonts

Comments and suggestions in here

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:


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

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:


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

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:


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

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:


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

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:


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

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:


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

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:


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

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:


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

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:


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

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:


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

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.


75 Responses to “Helvetica free download… with Google Web Fonts”

  1. Very beautiful Fonts…
    Thank you for sharing them :)

    • WebDesignShock
      April 18th

      You’re welcome Vladimir, glad you liked it :)…

  2. Tomisaki
    April 18th

    Hahaha this is amazing!, I can believe that you actually took the time to explore all Google Fonts to emulate the mighty Helvetica, really nice job guys.

    • WebDesignShock
      April 18th

      We did it for all of you :) and to remind designers that Google Web Fonts is out there…

      P.S: Helvetica will always be one of our favorite typefaces…

  3. “free helveticas” doesnt have full glyphs so theyre kind of useless

    • WebDesignShock
      April 18th

      Indeed that’s true PixA, but if you want to recreate simple texts or use the typeface as design elements, then Google Web Fonts are OK…

  4. Great post! thanks you.

    • WebDesignShock
      April 19th

      Hey, great you liked it!…

  5. by the way, you know that the font in your first image of the post is ‘Coolvetica’ a horrible recreation of the actual Helvetica that makes you wanna grab a fork and then penetrate your eyeballs while spining the fork clock and anti-clockwise?
    Nice post though

    • jeje, yes ale, is coolvetica, but is not a recreation of the helvetica, the “vetica”part is the only recreation. and actually we really like that font, but i think you don’t ;) isn’t it ?

  6. Cybaba
    April 20th

    Guys – Are you serious? I don’t think any of these fonts come even close(other than Anton Regular). The personality of Helvetica is really sophisticated and deep for any of these to come close.

    • Cybaba, please check the disclaimer, this is an experiment, actually we recommend all our readers in the initial lines to BUY Helvetica, due to is a professional font that every deisgner should LOVE and Respect. What we want to demonstrate is the power behind the web fonts and all these amazing font artists behind them.

  7. Indeed that’s true PixA, but if you want to recreate simple texts or use the typeface as design elements, then Google Web Fonts are OK…

  8. looks like you guys don’t understand the font structure. But i liked some fonts even more than the original helvetica face

    • WebDesignShock
      April 25th

      Hi Volkov, we’ve seen a lot of controversy surrounding this post, all we have to say is that we based the comparision between Helvetica and these Google fonts in design only, so people can have a free alternative to this popular font that despite of not having the same structure and complexity, it certainly presents a nice option for everyone…

    • Craeted the greatest articles, you have.

  9. Stephanedesign
    May 2nd

    As there are designers in this world this kind of polemics won’t cease any time soon. as for me in this item I’ll stick to the legibility/functionality plus aesthetic sobriety balance.

    • WebDesignShock
      May 2nd

      Yeah, this has been one of our most controversial posts of the past months, so we’re probably doing a great job in shaking things a little bit…

  10. I have never heard about this helvetica.. This blog through we can get about it.. Such fantastic post sharing with us.. Thanks a lot..

  11. Thomas
    May 11th

    Good controversies lead to good ideas generation. Keep up the good work guys!

    • WebDesignShock
      May 11th

      Thanks Thomas, so which side will you take?, Helvetica’s or Google Fonts?…

    • Trenton
      August 6th

      I agree, this is a great controversy. I am all for Helvetica, but can’t always use it so I am glad to see these great alternatives because I am looking for other ways that are quick easy and cheap. 

  12. I found this when Googling

    Download Helvetica Font Pack For Free

    http://helveticafontpackfree.blogspot.com

  13. KaterineRed
    May 18th

     Besides, Helvetica is almost in every design now. Is always nice to have other options and with this you gave us similar fonts. I liked it… after all, you’re not forcing anyone to used these instead of helvetica! 

    • WebDesignShock
      May 18th

      That’s such an encouraging comment!, thanks Katerine, we’re really happy of seeing someone like you enjoying our article :D…

  14. Awesome. Thank you so much for sharing these wonderful fonts!!

  15. Oh, really nice idea, alternate fonts are also ok :)
    thanks!

  16. Hi,

    nice article

    http://www.webdesignshock.com

    thank you

  17. This is a very very very useful thing. I mean I have come back to refer to this a lot of times. 

    Good Work

  18. Awesome post – thank you. I find my designers use Helvetica Neue for almost every thing. This will save me some work from now on.

  19. I just looked at Anonymous Pro Regular on Google fonts and it looks nothing like the preview you are showing above?

    • Chris Jamero
      October 29th

      Agree.

    • James
      November 4th

      Also agree. Looks like Google Web Fonts updated to remove the strong similarities! Anonymous Pro Regular (in the screenshot of this post) looks amazingly close to Helvetica… but the preview on GWF shows a slab serif font!

    • James, actually you have to ply with its settings to get a closer look. but yes, they might be dealing copyright issues, maybe ??

  20. Giannis
    October 14th

    Nice i should try it in my web form although you should described it as alternative helvetica in the title.Very Nice!

  21. Chris Jamero
    October 29th

    For the past days I’ve been looking for alternatives for this undeniably well thought made typeface, and here they are.

    Thanks for this guys!

    Someday I’ll get this Typeface for sure.

  22. Helvetica fonts is very nice…:)

  23. Very useful article on webfonts; it’s definitely time to ditch Cufon, siFR, etc. Thanks for posting!

  24. web hosting in india
    January 4th

    I get it clear idea about your topic.Thanks for your sharing, I like your article, looking forward to your next to share.

  25. Well great information you have shared here and i get it clear about it.

  26. From all given fonts only “Arimo” has something similar with Helvetica (Arial).
    I don’t know how you can compare Helvetica with Anonymous Pro which is fixed width font

  27. Thank you sooo much. I was looking for a good substitute for Helvetica Neu Bold — can’t believe you went to the extent that you did with all the various fonts. More!

    • Blog1
      May 31st

      No problem Chris. If you’d like, you can subscribe to our newsletter and get fresh tutorials and freebies in your inbox, Best wishes!

  28. Woderful write-up. I learned a lot from it.

  29. The blog is absolutely fantastic. Lots of great information and inspiration, both of which we all need. Thanks.

  30. "Like Helvetica" free download… with Google Web Fonts http://t.co/5I1X2Q8

  31. Helvetica free download… with Google Web Fonts http://t.co/DArUwrL via @webdesignshock

  32. Helvetica Alternatives on Google Fonts #web #fonts http://t.co/NEUsQZd

  33. Needing to do web font to work with a helvetica print scheme led to http://t.co/gjlcVCAb – useful resource. #helvetica #webfonts #webgeek

  34. Looking for the closest match Helvetica webfont? Try this http://t.co/A89l042t via @webdesignshock

  35. Helvetica free download… with Google Web Fonts http://t.co/iRA3DMQS via @webdesignshock

  36. @sc00zy says:

    Helvetica free download… with Google Web Fonts http://t.co/fvbfNd1n via @webdesignshock

  37. “@WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/e5qRRUcP ” Uffff… NooosLomismoNienpintura

  38. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  39. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  40. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  41. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  42. Helvetica free download… with Google Web Fonts http://t.co/UPjEGIVn vía @webdesignshock

  43. “@WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/04EnnIOF #design #useful” Now thats what I am talking about !

  44. Misleading title @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/euTRggyc
    #design #useful

  45. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  46. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  47. RT @WebDesignShock: Helvetica free download… with Google Web Fonts http://t.co/L7WDg6Sv #design #useful

  48. Helvetica… with Google Web Fonts http://t.co/8L6ld8We via @webdesignshock

  49. free helvetica neue substitutes http://t.co/dKD0aTg9 all free on google fonts #fonts #free #helvetica #google

  50. #Typo #Helvetica : les ersatz sur Google Web Fonts http://t.co/T05KNTDv

Leave a Reply

Comments

*