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.

Sign up for GitHub

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

Jump to bottom

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
73e5e89
Switch to native font stack
mdo Feb 6, 2016
cd3af1f
Update to drop Open Sans, add Fira and Droid Sans
mdo Feb 6, 2016
d8e82e2
document
mdo Feb 6, 2016
447fc28
linting grid css
mdo Feb 6, 2016
9c69f6f
Merge branch 'v4-dev' into v4-font-stack
mdo Feb 6, 2016
8291562
unrelated linting bs
mdo Feb 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// scss-lint:disable QualifyingElement

//
// Grid examples
//
Expand Down
24 changes: 24 additions & 0 deletions docs/content/reboot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,30 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `<body>` 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 `<body>` 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., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
Expand Down
7 changes: 4 additions & 3 deletions docs/content/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<body>` (`#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 `<body>`.
- 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 `<body>` (`#fff` by default).

These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`.

Expand Down
6 changes: 3 additions & 3 deletions scss/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@
@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; }
}
}

// Alignment for every column in row

@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; }
}
Expand All @@ -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; }
}
Expand Down
4 changes: 2 additions & 2 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", "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;
$font-family-base: $font-family-sans-serif !default;

// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default;
Expand Down