3

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. Helvetica 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 Bootstrap 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 Bootstrap?
1
  • I also have the same question. Our website - Saathi Re is dealing with the same issue. Helvetica Neue falling back to Ariel on Windows and making it look quite different. There is a long thread on this with the Bootstrap founder here but is now locked it seems
    – Anupam
    Sep 22, 2019 at 12:58

1 Answer 1

2

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.

2
  • 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 Nov 27, 2015 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, 2015 at 2:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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