diff options
| author | Mark Otto <[email protected]> | 2016-02-06 15:09:32 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-06 15:09:32 -0800 |
| commit | fffaaed0fdb6203dceaeff0cdd663b79bb7f81eb (patch) | |
| tree | b5f7672e99d1a969a3072d5b9c6535474c0f6cd5 /docs/content/reboot.md | |
| parent | 844a180fae817b8db027404cd76af9fe6c77382f (diff) | |
| parent | c344ff5b17101bec9840a5439b4b79684606c4ba (diff) | |
| download | bootstrap-fffaaed0fdb6203dceaeff0cdd663b79bb7f81eb.tar.xz bootstrap-fffaaed0fdb6203dceaeff0cdd663b79bb7f81eb.zip | |
Merge branch 'v4-dev' into v4-grid-redux
Diffstat (limited to 'docs/content/reboot.md')
| -rw-r--r-- | docs/content/reboot.md | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/docs/content/reboot.md b/docs/content/reboot.md index d55230e59..2c65e6e21 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -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. |