v4: Native system font stack for sans-serif #19098

Merged
merged 6 commits into from Feb 6, 2016

Projects

None yet
@mdo
Member
mdo commented Feb 6, 2016

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.

screen shot 2016-02-05 at 10 45 42 pm

screen shot 2016-02-05 at 10 49 58 pm

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:

@mdo mdo added css v4 labels Feb 6, 2016
@mdo mdo Switch to native font stack
73e5e89
@andresgutgon

I like the idea 👍

@redpencil

This improves performance as well.

@maxvoltar

👏🏻👏🏻👏🏻

@yask123
yask123 commented Feb 6, 2016

👍

@Studio384

This. I like this.

@cvrebert cvrebert changed the title from v4: Native system font stack to v4: Native system font stack for sans-serif Feb 6, 2016
@cvrebert
Member
cvrebert commented Feb 6, 2016

Whence Open Sans?

@patrickhlauke
Member

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
Member

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
Member
mdo commented Feb 6, 2016

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.

mdo added some commits Feb 6, 2016
@mdo mdo Update to drop Open Sans, add Fira and Droid Sans cd3af1f
@mdo mdo document
d8e82e2
@mdo mdo added this to the v4.0.0-alpha.3 milestone Feb 6, 2016
@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
Contributor

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 mdo linting grid css
447fc28
@mdo
Member
mdo commented Feb 6, 2016

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
Ruffio commented Feb 6, 2016
mdo added some commits Feb 6, 2016
@mdo mdo Merge branch 'v4-dev' into v4-font-stack
9c69f6f
@mdo mdo unrelated linting bs
8291562
@mdo mdo merged commit c344ff5 into v4-dev Feb 6, 2016

0 of 3 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details
hound Hound is busy reviewing changes...
@mdo mdo deleted the v4-font-stack branch Feb 6, 2016
@mdo mdo referenced this pull request Feb 6, 2016
Closed

v4 alpha 3 ship list #18480

@jwkicklighter

Love this! 👍

@vladimirmartsul

Great!

@zalog
Contributor
zalog commented Feb 7, 2016

Great! 👍

@athahersirnaik

Great Idea!

@erickacevedor

Great idea buddy.

@gseregni

Good default. Still easily customizable. +1

@fk
fk commented Feb 10, 2016

+1

@danger89

haha lol +1 for the website

@rubengommers

Great!

@dbbk
dbbk commented Jul 27, 2016

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
Member

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

@DoronBrayer
DoronBrayer commented Jul 28, 2016 edited

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
Member

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

@DoronBrayer
DoronBrayer commented Jul 28, 2016 edited

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
Member
mdo commented Jul 28, 2016

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.

@jlduran jlduran added a commit to jlduran/pfsense that referenced this pull request Jul 31, 2016
@jlduran jlduran Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.  Obtained from the Bootstrap
project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
a50c808
@jlduran jlduran referenced this pull request in pfsense/pfsense Jul 31, 2016
Merged

Experiment using the OS' native font stack #3084

@jlduran jlduran added a commit to jlduran/pfsense that referenced this pull request Jul 31, 2016
@jlduran jlduran Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.  Obtained from the Bootstrap
project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
53f068f
@AlecRust AlecRust added a commit to AlecRust/cv that referenced this pull request Jul 31, 2016
@AlecRust AlecRust Switch to system font for main font family 61aa318
@mihokovic

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.

@jlduran jlduran added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016
@jlduran jlduran Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
d77371a
@jlduran jlduran added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016
@jlduran jlduran Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
18cdc54
@jlduran jlduran added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016
@jlduran jlduran Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
d30b2cc
@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.

@jlduran jlduran added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016
@jlduran jlduran Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
f720117
@pfSense-git-updates pfSense-git-updates pushed a commit to pfsense/pfsense that referenced this pull request Aug 4, 2016
@jlduran @jdillard jlduran + jdillard Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
4310baa
@pfSense-git-updates pfSense-git-updates pushed a commit to pfsense/pfsense that referenced this pull request Aug 4, 2016
@jlduran @jdillard jlduran + jdillard Experiment using the OS' native font stack
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
98ea394
@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment