Foundation-sites: System Font stacks instead of current one

Created on 4 Jan 2017 · 24Comments · Source: foundation/foundation-sites

Read this article => https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
Some more Info => https://css-tricks.com/snippets/css/system-font-stack/

Some already implemented examples

Github's website
Medium's website
Bootstrap framework
Wordpress CMS
and many more

Code i would request to change

$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;

New code

$body-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

If its get decided to not use linux specific ones and firefox specific system fonts then,

$body-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

css global styles

Source

IamManchanda

👍1

Most helpful comment

First, I seen you opened a lot of issues these last days. Thank you a lot for your work, you help to make Foundation even better ! 👍

Concerning this issue, I agree we should at least make the font override for "Helvetica" optioned, and maybe disabled by default. But I don't know if updating $body-font-family would be a great idea. We are taking about a low-level reset, not a "styling option".

In any case, we also have to disable the font-family Normalize set on <html>.

ncoden on 4 Jan 2017

🎉1 👍1

All 24 comments

  // Safari for OS X and iOS (San Francisco)
  -apple-system,

  // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
  system-ui,

  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,

  // Windows
  "Segoe UI",

  // Android
  "Roboto",

  // KDE ( Unix/Linux )
  "Oxygen",

  // Ubuntu ( Unix/Linux )
  "Ubuntu",

  // GNOME ( Unix/Linux )
  "Cantarell",

  // Firefox OS
  "Fira Sans",

  // Basic web fallback
 "Helvetica Neue", Helvetica, Arial, sans-serif

Special Note: Bootstrap decided to not use these linux ones and firefox, though i dont know the reason why. So zurb's idea might be that same also.

cc / @kball .....

IamManchanda on 4 Jan 2017

First, I seen you opened a lot of issues these last days. Thank you a lot for your work, you help to make Foundation even better ! 👍

In any case, we also have to disable the font-family Normalize set on <html>.

ncoden on 4 Jan 2017

🎉1 👍1

So what do you think will be a best option for having these changes ?

and are you talking about this below code in normalize that needs to be disabled ?

$base-font-family: sans-serif !default;

If yes that is the case then how about this ?

$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

$body-font-family: $base-font-family !default;

IamManchanda on 4 Jan 2017

I am not sure. I thought about something like:

$body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$body-font-family-system: true;

...

$-zf-system-fonts: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans";

...

$font: $body-font-family;
@if $body-font-family-systems == true {
  $font: join($-zf-system-fonts, $font);
}

It allows to easily enable/disable the support for system font stacks, or to change the font family without disabled it (but this last case is not common). But maybe it is over-engineering.

Poke @kball

ncoden on 4 Jan 2017

👍1

Yup a bit of over engineering :smile_cat: but i liked it :+1:

IamManchanda on 4 Jan 2017

Curious what @andycochran and @brettsmason think

kball on 4 Jan 2017

The first thing I usually do is change the font stack to exactly whats suggested and I think it makes perfect sense. I feel like @ncoden suggestion might be a bit complex for this, but that might be just me :smile:

brettsmason on 4 Jan 2017

It is a more complex suggestion to fulfill to complex expectations 😄 .
I do not like the idea of defining a list of font families with inside _system fonts_, _default font_ and _compatibility fonts_, to use like it is or to fully redefine. We should provide a way to easily enable and disable some behaviors of fonts.

ncoden on 4 Jan 2017

@brettsmason I have to say that I like Nicolas suggestion and frankly brain but yes might be over engineering and might not make sense as there is no need to enable disable,

So my questions are

So are you up for changing on body-font-family ?
Should Firefox and Linux ones be added or not ?

IamManchanda on 5 Jan 2017

😄1

But enable disable might come handy later when people look to change fonts to web fonts like Google and Adobe typekit ?
But then, that's a bit out of core thing i guess

IamManchanda on 5 Jan 2017

@ncoden, could we simply do this?

$body-font-family: $-zf-system-fonts;

I don't think we need the @if to determine whether or not to use the system fonts variable. If you don't want to use system fonts, just use your own stack.

(I'm not sure that even needs to be a private -zf var.)

andycochran on 5 Jan 2017

👍1

I have to say of all the suggestions including me, i liked the @andycochran one's the best one
so i just tried it out ( _settings & _global )

$-zf-system-fonts: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans" !default;
$-zf-fallback-fonts: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;

$body-font-family: join($-zf-system-fonts, $-zf-fallback-fonts);

Generated CSS

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { 
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

But still say a bit confused about these linux and firefox ones ?

IamManchanda on 5 Jan 2017

$body-font-family: join($-zf-system-fonts, $-zf-fallback-fonts);

So folks have to manually join their font with $-zf-system-fonts if they want to change the font while keeping the support for System fonts.

I agree your propositions are _simple_ because of there is not a lot of code to add, but it is not _simple to use_.

A list of font families is not a simple list, it is a _stack_ of different _groups of fonts_, and we should provide settings that reflect this fact.

ncoden on 5 Jan 2017

👍1

So what would be your code then ? @ncoden

IamManchanda on 6 Jan 2017

// scss/_global.scss
$system-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans";
$body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

...

body {
  font-family: font-family($body-font-family);
}

// scss/typography/_base.scss
@function font-family( // or `zf-font-family`
  $font: $body-font-family,
// $compatibility-font: ...,
  $system-font: $system-font-family,
) {
  @if $system-font != null and $system-font != false {
    $font: join($system-font, $font);
  }
  @return $font;
}

// in any component
font-family: font-family(MyFont, $system-font: false);

There is two concept in this example:

Provide partitioned settings to allow to enable/disable/modify it easily.
Modularize settings processing to allow to use custom settings globally and locally.

ncoden on 6 Jan 2017

but we have to change _settings file also as all the h1 to h6 elements has been duplicated (hardcode) there with

$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;

Just a reminder

IamManchanda on 6 Jan 2017

we have to change _settings file

settings/_settings.scss is automatically generated from the global variables inside component files.

@kball Many folks did not understood that, and it's normal. We should definitely move this _generated_ file to its rightful place: in dist.

all the h1 to h6 elements has been duplicated

I do not understand.

ncoden on 6 Jan 2017

@kball Many folks did not understood that, and it's normal. We should definitely move this generated file to its rightful place: in dist.

👍

kball on 6 Jan 2017

I'm not sure I understand why we need the join(). It seems like you either want to use system fonts or not. If I'm defining my own custom font stack, I'm just gonna clobber the framework's defaults.

andycochran on 6 Jan 2017

👍1

@andycochran This is why I used at first a private $-zf- variable and a Booelan as config.

ncoden on 6 Jan 2017

I still don't understand the need for any functions. Why not simply have a public $system-font-family var and use that throughout settings?

$body-font-family: $system-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif;

And if I don't wanna use system fonts I remove it:

$body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Or if I wanna use a custom stack, I clobber the whole var:

$body-font-family: "Preferred Font", "Backup Font", fantasy;

andycochran on 6 Jan 2017

👍1

Well, I could say this is not _really_ the same thing (see http://www.sassmeister.com/gist/b094cc43fe09851c535b70163c96f1fb), but you are right, it is simpler and almost the same thing.

However, if you want to disable browser fonts, your have to redefine the entirely font list.

ncoden on 6 Jan 2017

$body-font-family: $system-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif;

@andycochran +1 from mah side

IamManchanda on 7 Jan 2017

Merged here: #9644
So closing this! Thanks.

IamManchanda on 17 Jan 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

$enable-cite-block is missing !default from scss

alexkuc · 3Comments

.menu.nested vs dropdowns while on medium/large screens

BicanMarianValeriu · 3Comments

What is the cause of difference between “Complete” version and “Custom version” with “All Foundation Components”?

Mojtaba-Reyhani · 3Comments

What happened to the 5.5.4 milestone?

barrywoolgar · 3Comments

[Visibility Classes] ISSUE NAME HERE

coachie · 4Comments