Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Feb 6, 2016
Merged

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

merged 6 commits into from
Feb 6, 2016

Conversation

mdo
Copy link
Member

@mdo 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:

@andresgutgon
Copy link

I like the idea 👍

@redpencil
Copy link

This improves performance as well.

@maxvoltar
Copy link

👏🏻👏🏻👏🏻

@yask123
Copy link

yask123 commented Feb 6, 2016

👍

@Studio384
Copy link

This. I like this.

@cvrebert cvrebert changed the title v4: Native system font stack v4: Native system font stack for sans-serif Feb 6, 2016
@cvrebert
Copy link
Collaborator

cvrebert commented Feb 6, 2016

Whence Open Sans?

@patrickhlauke
Copy link
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
Copy link

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
Copy link

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
Copy link
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
Copy link

👍 sounds good

@mdo
Copy link
Member Author

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 mdo added this to the v4.0.0-alpha.3 milestone Feb 6, 2016
@SteveDesmond-ca
Copy link

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
Copy link
Contributor

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

@robertandrews
Copy link

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
Copy link
Member Author

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
Copy link

Ruffio commented Feb 6, 2016 via email

mdo added a commit that referenced this pull request Feb 6, 2016
v4: Native system font stack for sans-serif
@mdo mdo merged commit c344ff5 into v4-dev Feb 6, 2016
@benkingcode
Copy link

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
Copy link
Collaborator

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

@DoronBrayer
Copy link

DoronBrayer commented Jul 28, 2016

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
Copy link
Collaborator

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

@DoronBrayer
Copy link

DoronBrayer 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?! It will only enhance the UX, trust me.

@mdo
Copy link
Member Author

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 added a commit to jlduran/pfsense that referenced this pull request Jul 31, 2016
Following the steps of bfbfa4d,
experiment using the OS' native font stack.  Obtained from the Bootstrap
project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
jlduran added a commit to jlduran/pfsense that referenced this pull request Jul 31, 2016
Following the steps of bfbfa4d,
experiment using the OS' native font stack.  Obtained from the Bootstrap
project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
AlecRust added a commit to AlecRust/cv that referenced this pull request Jul 31, 2016
@seakrebel
Copy link

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 added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

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

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

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
@Studio384
Copy link

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 added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016
Following the steps of bfbfa4d,
experiment using the OS' native font stack.

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

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

Obtained from the Bootstrap project (twbs/bootstrap#19098,
twbs/bootstrap@0a31dac)
@Tklaversma
Copy link

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
Copy link

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

@Tklaversma
Copy link

@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
Copy link

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

@grvsooryen
Copy link

@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

Calinou added a commit to Calinou/syncthing that referenced this pull request Dec 26, 2018
calmh pushed a commit to syncthing/syncthing that referenced this pull request Dec 26, 2018
Calinou added a commit to Calinou/godot-asset-library that referenced this pull request Dec 30, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.