Should I consider the font Helvetica to be a web-safe font, i.e. is it a reliable source to set in my CSS that will be accessible on any device?

up vote 55 down vote accepted

Not only is Helvetica not safe, but it is also a copyrighted font, so you need a license to use it if you load it as webfont.

As a matter of fact, there are no 100% safe web fonts, since it will depend on the fonts the user have on his/her device, and different operative systems have different font sets. Hence, you need to do something like this:

p{font-family:Arial, Helvetica, sans-serif}

Otherwise, your site will be visualized with the default font the user has set , for example, Times New Roman.

If you want to play safe, I recommend this quite nifty resource: CSS Font Stack. There you can see "safer" fonts, percentage of usage by OS and even the code to use including fallback alternatives

  • 7
    sorry, but UX is not about randomness, but about control. You may like it better sometimes, but it is purely subjective as you say, and certainly not something to recommend – Devin May 28 '16 at 1:59
  • 2
    @Devin I agree. While mentioning the font in Css, it should be changed as p{font-family:Helvetica, Arial, sans-serif}. Primary font should come first if stakeholders prefer this font and next we need to add system fonts like Arial n sansarif – Grafix Guru May 28 '16 at 5:17
  • 15
    Why all the comments about copyrights and loading webfonts? The question asks about web-safe fonts that (by definition) are already present on the device of the end-user. The question expresses no wish to load webfonts. – Jeff May 28 '16 at 8:45
  • 3
    CSS Font Stack is nice but it only shows fonts installed on desktop Windows and OS X. – Flimm May 29 '16 at 11:15
  • 2
    Some good read about Helvetica in Windows. Link – Mr_Green May 29 '16 at 15:11

As mentioned there is no such thing as a safe web font. But there is a way to load in missing fonts from your server through the use of @font-face. @font-face was first introduced in CSS2, includes fallback file types, and is widely supported. This wouldn't be a 100% solution but it would be more promising than depending on the machine's font selection.

First you would put the file on your server as a regular static hosted file. You might have to configure your web server's mime types so it properly handles the file and doesn't attempt to make the client manual download it instead.

Then you would implement code in your stylesheet that looks like the following. Take note these are just some of the possible formats. You are not required to use all of them. But if you are not delete the reference to the file to avoid an unnecessary delay caused by the missing resource.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

After which you would assign the font to your element. If you wanted to attempt to use your version of the Helvetica use something like:

font-family: 'MyWebFont', Helvetica, sans-serif;

If the font-face cannot be loaded it will attempt to use the machine's Helvetica and if that fails it will attempt load sans-serif. Additionally you can swap your font and the machine font around. But it won't save your bandwidth because it will still load your fonts once it loads the stylesheet.

Last but most importantly Helvetica is not a free font. You will need to buy a license for its usage. Linotype will sell you the necessary web fonts and license from their website. Pricing is based on page views. But once purchased it is completely legal to embed in your webpage or web app.

be accessible on any device

Really no such thing as 'available on any device'.

If you're not using embedded fonts, then you need to use a font-stack, so you have some back up options in case the first isn't available.

Helvetica is not part of any Windows default font-set, therefore Windows users are likely to see another secondary font. If that's not a concern for you, use Helvetica.

  • 2
    The Arial font is standard on all versions of Windows (since v3.1) and has essentially the same layout characteristics; using Arial as a fallback for Helvetica will thus give substantially the same look and feel (said with due apologies to those font enthusiasts who know and care about the differences). See en.wikipedia.org/wiki/Arial – Bevan May 28 '16 at 3:38
  • 5
    Windows iss not the only OS, don't forget about everyone else. Others might not have Arial. – coteyr May 29 '16 at 7:21
  • 2
    Arial is not there by default in many linux distros, for instance. – yo' May 29 '16 at 17:07

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.