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鈥檒l 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

Conversation

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

@andresgutgon

This comment has been minimized.

Show comment
Hide comment
@andresgutgon

andresgutgon Feb 6, 2016

I like the idea 馃憤

I like the idea 馃憤

@redpencil

This comment has been minimized.

Show comment
Hide comment
@redpencil

redpencil Feb 6, 2016

This improves performance as well.

This improves performance as well.

@maxvoltar

This comment has been minimized.

Show comment
Hide comment
@maxvoltar

maxvoltar Feb 6, 2016

馃憦馃徎馃憦馃徎馃憦馃徎

馃憦馃徎馃憦馃徎馃憦馃徎

@yask123

This comment has been minimized.

Show comment
Hide comment

yask123 commented Feb 6, 2016

馃憤

@Studio384

This comment has been minimized.

Show comment
Hide comment
@Studio384

Studio384 Feb 6, 2016

This. I like this.

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Feb 6, 2016

Member

Whence Open Sans?

Member

cvrebert commented Feb 6, 2016

Whence Open Sans?

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Feb 6, 2016

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 :)

Member

patrickhlauke commented Feb 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@elixirgraphics

elixirgraphics Feb 6, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@Studio384

Studio384 Feb 6, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Feb 6, 2016

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.

Member

patrickhlauke commented Feb 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@bogdansoare

bogdansoare Feb 6, 2016

馃憤 sounds good

馃憤 sounds good

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Feb 6, 2016

Member

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.

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

@stevedesmond-ca

This comment has been minimized.

Show comment
Hide comment
@stevedesmond-ca

stevedesmond-ca Feb 6, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Feb 6, 2016

Contributor

Makes Bootstrap look great on the main OS flavours, and can be easily overridden. I鈥檓 all for it鈥攎erge it already!

Contributor

martinbean commented Feb 6, 2016

Makes Bootstrap look great on the main OS flavours, and can be easily overridden. I鈥檓 all for it鈥攎erge it already!

@robertandrews

This comment has been minimized.

Show comment
Hide comment
@robertandrews

robertandrews Feb 6, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Feb 6, 2016

Member

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鈥攕ee some of my previous comments.

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鈥攕ee some of my previous comments.

@Ruffio

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Feb 6, 2016

Ruffio commented Feb 6, 2016

mdo added some commits Feb 6, 2016

mdo added a commit that referenced this pull request Feb 6, 2016

Merge pull request #19098 from twbs/v4-font-stack
v4: Native system font stack for sans-serif

@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

This comment has been minimized.

Show comment
Hide comment
@jwkicklighter

jwkicklighter Feb 7, 2016

Love this! 馃憤

Love this! 馃憤

@vladimirmartsul

This comment has been minimized.

Show comment
Hide comment

Great!

@zalog

This comment has been minimized.

Show comment
Hide comment
@zalog

zalog Feb 7, 2016

Contributor

Great! 馃憤

Contributor

zalog commented Feb 7, 2016

Great! 馃憤

@athahersirnaik

This comment has been minimized.

Show comment
Hide comment

Great Idea!

@erickacevedor

This comment has been minimized.

Show comment
Hide comment
@erickacevedor

erickacevedor Feb 8, 2016

Great idea buddy.

Great idea buddy.

@gseregni

This comment has been minimized.

Show comment
Hide comment
@gseregni

gseregni Feb 10, 2016

Good default. Still easily customizable. +1

Good default. Still easily customizable. +1

@fk

This comment has been minimized.

Show comment
Hide comment

fk commented Feb 10, 2016

+1

@danger89

This comment has been minimized.

Show comment
Hide comment
@danger89

danger89 May 20, 2016

haha lol +1 for the website

haha lol +1 for the website

@rubengommers

This comment has been minimized.

Show comment
Hide comment

Great!

@dbbk

This comment has been minimized.

Show comment
Hide comment
@dbbk

dbbk 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?

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 27, 2016

Member

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

Member

cvrebert commented Jul 27, 2016

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

@DoronBrayer

This comment has been minimized.

Show comment
Hide comment
@DoronBrayer

DoronBrayer 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.

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 28, 2016

Member

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

Member

cvrebert commented Jul 28, 2016

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

@DoronBrayer

This comment has been minimized.

Show comment
Hide comment
@DoronBrayer

DoronBrayer 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.

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 28, 2016

Member

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.

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 added a commit to jlduran/pfsense that referenced this pull request Jul 31, 2016

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)

jlduran added a commit to jlduran/pfsense that referenced this pull request Jul 31, 2016

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)

AlecRust added a commit to AlecRust/cv that referenced this pull request Jul 31, 2016

@vmihokovic

This comment has been minimized.

Show comment
Hide comment
@vmihokovic

vmihokovic Aug 1, 2016

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.

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

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)

jlduran added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016

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)

jlduran added a commit to jlduran/pfsense that referenced this pull request Aug 1, 2016

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)
@Studio384

This comment has been minimized.

Show comment
Hide comment
@Studio384

Studio384 Aug 1, 2016

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.

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

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)

pfSense-git-updates pushed a commit to pfsense/pfsense that referenced this pull request Aug 4, 2016

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)

pfSense-git-updates pushed a commit to pfsense/pfsense that referenced this pull request Aug 4, 2016

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)
@Tklaversma

This comment has been minimized.

Show comment
Hide comment
@Tklaversma

Tklaversma Aug 5, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@ArmorDarks

ArmorDarks Aug 9, 2016

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

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

@Tklaversma

This comment has been minimized.

Show comment
Hide comment
@Tklaversma

Tklaversma Aug 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Tklaversma

Tklaversma Aug 9, 2016

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

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

@grvsooryen

This comment has been minimized.

Show comment
Hide comment
@grvsooryen

grvsooryen Jan 10, 2017

@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

@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