My understanding currently is: "Helvetica Neue" is Linotype font. That means it needs to be paid for and is not free to use. It is also a font that is not for web, it is for print. It will not render well on a range of devices, for example, PC users browsing with Chrome or IE. Helevtica Neue is particularly poor at rendering in small sizes.

And yet right in Bootstrap v3.3.5 we see

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  ...
}

And if I look for the "common" cross browser font declaration of the likes of:

 @font-face {
    font-family: 'Helvetica Neue';
    src: url('Helvetica-Neue-webfont.eot');
    src: url('Helvetica-Neue-webfont.eot?#iefix') format('embedded-opentype'),
    url('Helvetica-Neue-webfont.woff') format('woff'),
    url('Helvetica-Neue-webfont.ttf') format('truetype'),
    url('Helvetica-Neue-webfont.svg#Helvetica Neue') format('svg');

  }

It is no where in any Bootstrap file, nor does Boostrap provide .eot,.woff,.ttf or.svg files for Helvetica Neue via CDN or download.

  1. Why does Twitter choose to use Helvetica Neue when it is not a Web Friendly font?
  2. How is Twitter delivering Helvetica Neue to browsers if there is no .eot, .woff, .ttf or .svg files being requested to a CDN or included when downloading Boostrap?
up vote 1 down vote accepted

That Helvetica Neue doesn't render well on screen is mostly a matter of opinion. A valid opinion, but less so today than in the past now with the onslaught of high density screens. Apple had been using it on iOS for quite a while, for example.

Also note that these are not 'web fonts' in that they are being served from the server. Bootstrap is merely using standard CSS font-stacks. It uses Helvetica Neue if it's on the end-user's system, but if not, it goes on to the next font on the list.

So, to answer the questions:

Why does Twitter choose to use Helvetica Neue when it is not a Web Friendly font?

Many would argue it's web friendly. As to why it was chosen for bootstrap, it's likely because twitter uses it on their own site. It's their framework, so that makes sense from a purely branding standpoint.

How is Twitter delivering Helvetica Neue to browsers

It's not. It's merely a CSS declaration. As noted above, it only uses it if it's installed on the end-user's machine.

Finally, keep in mind that this is a framework. The idea is that it's a great place to start, but by no means should dictate your visual design entirely.

  • I appreciate your answer and think it is the answer to mark correct, except I have one issue, I just am thinking, I am not assuming I am correct. What I am thinking is that you are a Mac, Apple device user, and that you have a slant that Helvetica Neue renders well and its a matter of opinion when someone thinks it does not render well. I mostly use a PC and I can tell you that I am having a many issues with Helvetica Neue not even being readable, particularly in small font sizes on web pages in Chrome – Brian Ogden Nov 27 '15 at 1:56
  • @BrianOgden it's not so much a Mac v. PC issue. It's really a screen density issue. High density screens are able to render fonts much better than the 'standard' density screens of the past couple of decades. On standard density screens, I think a lot of people would agree that small Helvetica or Arial aren't ideal and that there are better fonts to consider for that purpose. – DA01 Nov 27 '15 at 2:06

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.