From 73e5e89e0efb938072ba3b1da5d06d0d0e659db9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 5 Feb 2016 23:01:59 -0800 Subject: [PATCH 1/5] Switch to native font stack --- scss/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 11a4f4751fcb..5791d141ed5c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -137,10 +137,10 @@ $grid-gutter-width: 1.875rem !default; // 30px // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; +$font-family-base: $font-family-sans-serif !default; // Pixel value used to responsively scale all typography. Applied to the `` element. $font-size-root: 16px !default; From cd3af1fa1ae71529e377c68f7a29d37c5d5bd051 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:23:00 -0800 Subject: [PATCH 2/5] Update to drop Open Sans, add Fira and Droid Sans --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 5791d141ed5c..6650a3bbc680 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -137,7 +137,7 @@ $grid-gutter-width: 1.875rem !default; // 30px // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; From d8e82e2e8fd1ac421177107f4619db8f676813e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:32:53 -0800 Subject: [PATCH 3/5] document --- docs/content/reboot.md | 24 ++++++++++++++++++++++++ docs/content/typography.md | 7 ++++--- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/docs/content/reboot.md b/docs/content/reboot.md index d55230e59b40..2c65e6e21908 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -32,6 +32,30 @@ The `` and `` elements are updated to provide better page-wide defau - The `` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. - For safety, the `` has a declared `background-color`, defaulting to `#fff`. +## Native font stack + +The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). + +{% highlight sass %} +$font-family-sans-serif: + // Safari for OS X and iOS (San Francisco) + -apple-system, + // Chrome for OS X (San Francisco) and Windows (Segoe UI) + BlinkMacSystemFont, + // Windows + "Segoe UI", + // Android + "Roboto", + // Linux distros + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + // Older Android + "Droid Sans", + // Basic web fallback + "Helvetica Neue", Arial, sans-serif !default; +{% endhighlight %} + +This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. + ## Headings and paragraphs All heading elements—e.g., `

`—and `

` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. diff --git a/docs/content/typography.md b/docs/content/typography.md index 82f80a8a8713..0456205840aa 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -15,9 +15,10 @@ Bootstrap includes simple and easily customized typography for headings, body te Bootstrap sets basic global display, typography, and link styles. Specifically, we: -- Use `$body-bg` to set a `background-color` on the `` (`#fff` by default) -- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base -- Set the global link color via `$link-color` and apply link underlines only on `:hover` +- Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. +- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. +- Set the global link color via `$link-color` and apply link underlines only on `:hover`. +- Use `$body-bg` to set a `background-color` on the `` (`#fff` by default). These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. From 447fc28f8d1ad0df1800eb41d6edbb76a8f13f15 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 14:54:13 -0800 Subject: [PATCH 4/5] linting grid css --- scss/_grid.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index d846f098c4da..8adcb77162a6 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -51,7 +51,7 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { .col-#{$breakpoint}-first { order: -1; } - .col-#{$breakpoint}-last { order: 1; } + .col-#{$breakpoint}-last { order: 1; } } } @@ -59,7 +59,7 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .row-#{$breakpoint}-top { align-items: flex-start; } + .row-#{$breakpoint}-top { align-items: flex-start; } .row-#{$breakpoint}-center { align-items: center; } .row-#{$breakpoint}-bottom { align-items: flex-end; } } @@ -69,7 +69,7 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .col-#{$breakpoint}-top { align-self: flex-start; } + .col-#{$breakpoint}-top { align-self: flex-start; } .col-#{$breakpoint}-center { align-self: center; } .col-#{$breakpoint}-bottom { align-self: flex-end; } } From 82915622587f316825627f0679406c2d81a5e583 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 15:07:25 -0800 Subject: [PATCH 5/5] unrelated linting bs --- docs/assets/scss/_component-examples.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index c3feb6073063..2db8f8a2a11e 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -1,3 +1,5 @@ +// scss-lint:disable QualifyingElement + // // Grid examples //