Why does Bootstrap 3 use Helvetica Neue?


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?
11/12/2019 7:04:00 PM

Accepted Answer

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.

11/27/2015 1:39:00 AM