v4: Native system font stack for sans-serif

[mdo]

To date, we've used a singular font stack for all browsers and OSes. Across the board, none of the fonts currently in use are the (preferred and well designed) system fonts. This PR drops the old font stack for a new native system-based one. Essentially, every OS will have it's own font-family with this new stack.

As an example, on OS X (Safari, Chrome, and Firefox) and iOS, the font will now be Apple's San Francisco. On the latest versions of Windows, it'll be Segoe UI. On Linux, well, you get whatever flavor of Linux you get 😆.

I took a quick look at our buttons as an example (as they tend to give us the most trouble) on Win7 IE9 and Win8 IE11 and things look a tad out of alignment in IE9. IE11 looks just dandy.

For full details on what font is shown where, please head to https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-b.

Overall, I'm pretty stoked about this. Would love to hear what others are thinking.

Sources:

• http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
• https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a

[andresgutgon]

I like the idea 👍

[redpencil]

This improves performance as well.

[maxvoltar]

👏🏻👏🏻👏🏻

[yask123]

👍

[Studio384]

This. I like this.

[cvrebert]

Whence Open Sans?

[patrickhlauke]

on the one hand, i like it for web apps that try to look "at home" in different OS environments. on the other hand, the designer in me wonders if that doesn't create strange visual inconsistency across platforms. i guess as long as this is properly documented (and perhaps a boxout made that explains how fussy designer souls can override/complement this with a singular font choice across all platforms) i'm cool with it :)

[elixirgraphics]

I have to agree with patrickhlauke. Striving for consistency across platforms is pretty important for me. Having a different font family depending on platform would never be my preference. I can see the benefits for web app creation but for normal web design I feel it is a bad fit.

[Studio384]

I have to agree with patrickhlauke. Striving for consistency across platforms is pretty important for me. Having a different font family depending on platform would never be my preference. I can see the benefits for web app creation but for normal web design I feel it is a bad fit.

For normal webdesign, I think most people would already include their own line of font families instead of going with what is currently Bootstrap's default. And that is changed as easily now as it will be with this change.

[patrickhlauke]

And that is changed as easily now as it will be with this change.

sure, not saying this change makes it any more difficult. as long as it's clearly documented though that the stack results in a different look across different devices, it's all good.

[bogdansoare]

👍 sounds good

[mdo]

Regarding the inconsistencies across browsers and OSes:

• We already have inconsistencies with the current stack. Helvetica Neue and Helvetica don't show up for Windows or Linux. Arial is the only Windows friendly option and it's not great. Linux users are shit out of luck right now and get either a bad Arial or their generic sans-serif.
• Each OS has had a specific font design not only for their OS, but for improved readability and rendering. Arial on Windows 11 works, but it's a horrible thing to force on folks when Segoe is available and was specifically designed to present content on screens well.
• No one on Linux cares what your site looks like on Mac or Windows because they don't have those computers. They only care about using your site. :)

Regarding documentation, yup, working on that shortly.

[SteveDesmond-ca]

I like it. Great as a default, easy to override if desired.

We're at the point now where we can trust our platforms enough to give us good stuff out of the box.

If you're concerned about things looking slightly different across platforms, chances are you're looking for pixel-perfect and will be specifying your own fonts anyway.

[martinbean]

Makes Bootstrap look great on the main OS flavours, and can be easily overridden. I’m all for it—merge it already!

[robertandrews]

Does this mean the default Bootstrap font is the default system font?
Don't like that idea.
The web is an operating system, and the current font a lovely one. Why make the site look different depending on a user's system?
Sounds like it introduces divergence.

[mdo]

Does this mean the default Bootstrap font is the default system font?

Yup!

The web is an operating system, and the current font a lovely one.

I mean, metaphorically, maybe, but no, it's not an OS. And the current primary font stack is heavily skewed to Mac over Windows, which is kind of outright crazy given the actual distribution of those devices/OSes in the real world.

Why make the site look different depending on a user's system?

Sites already look different with the current font stack—see some of my previous comments.

[Ruffio]

Bootstrap is 'mobile first front-end' framework and a lot of people is saving websites directly to homescreen. Why not use native system font stack as default if it is easy to change to something differently?

[benkingcode]

Out of interest, does anyone know why the default browser font is still Times New Roman? Shouldn't macOS Safari and Chrome be applying -apple-system by now?

[cvrebert]

@dbbk Backward compatibility. Existing webpages expect the default font to be serifed, not sans-serif.

[DoronBrayer]

This is a nice step forward for creating a better UX.
I strongly recommend to add 'Myriad Pro' to the stack, since this is the main font of Adobe softwares (Photoshop, Illustrator, Premiere, etc.) for the past 15 years, which makes it very common - Many people/companies uses Adobe.

[cvrebert]

Adobe is neither an OS vendor nor a device vendor nor a browser vendor...

[DoronBrayer]

And yet their main/default font is way more common than many of the fonts above, for sure.
Why not add one of the most common fonts in the world?! It will only enhance the UX, trust me.

[mdo]

And yet their main/default font is way more common than many of the fonts above, for sure. Why not add one of the most common fonts in the world?!

Not likely. Adobe's customer base is minuscule compared to that of the combined totals of Windows, OS X/iOS, and Android operating systems. Sorry, but there's no chance of us adding Myriad Pro to the font stack.

[seakrebel]

I strongly advise switching back to Helvetica Neue so Bootstrap can be pixel perfect again.
Using system fonts makes text vertically misaligned - not pixel perfect.

[Studio384]

I strongly advise switching back to Helvetica Neue so Bootstrap can be pixel perfect again.
Using system fonts makes text vertically misaligned - not pixel perfect.

Then you should set that font in your custom CSS. Working pixel perfect isn't a good idea anyway as not even fonts are rendered by all browsers the same way.

[Tklaversma]

Then you should set that font in your custom CSS. Working pixel perfect isn't a good idea anyway as not even fonts are rendered by all browsers the same way.

Beside the reasons of @Studio384 and @mihokovic.. there are a lot more problems with using different fonts. The one that bugs me the most is that not all fonts support the same font-weights.

Just making something bold is not seen as "normal" anymore. People like to adjust the weights just right.

When I use the current font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; and make a paragraph font-weight: 500;, it does not work on iOS for example. The paragraph just applies font-weight: normal; which is usually 400.

[ArmorDarks]

@Tklaversma It's just time to use relative font-weight. font-weight: lighter and font-weight: bolder to the rescue.

[Tklaversma]

@Tklaversma It's just time to use relative font-weight. font-weight: lighter and font-weight: bolder to the rescue.

@ArmorDarks I seriously didn't know that xD. Thanks!

Although this fixes one of the issues I have with using different fonts...I still see some more benefits in just using one font.

[Tklaversma]

@ArmorDarks So I did some more digging and you are not entirely right. See here... so my initial problem remains.

[grvsooryen]

@mdo Good Idea though. But I feel, it might face inconsistency for developers if they place a new font on the top of bootstrap CSS