diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index d55230e59b4037fa2b4c8579b0d208018460f840..2c65e6e21908b8971cbf4002104e4b4de5859817 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.
diff --git a/docs/content/typography.md b/docs/content/typography.md
index 82f80a8a8713455d1090b59f9c96967eba21395c..0456205840aa57c6db8dc49243145d286f9c8ac7 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 `<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`.
diff --git a/scss/_variables.scss b/scss/_variables.scss
index af783465e210f5810b6443516c3a113eb7f6aaaa..1439d42f98fea873373e2635701cfe440418ab93 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -137,10 +137,10 @@ $grid-gutter-width: 15px !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;