From 0c03b70bcb81ebb83eb41bf3b561a3b2106ec76f Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 2 Oct 2017 18:59:07 -0700 Subject: [PATCH] adds a note on typography docs about rem units on font-size-base (#23988) --- docs/4.0/content/typography.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md index 74ecbe6147..d76070889a 100644 --- a/docs/4.0/content/typography.md +++ b/docs/4.0/content/typography.md @@ -16,7 +16,7 @@ Bootstrap sets basic global display, typography, and link styles. When more cont - 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`. +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. ## Headings @@ -297,24 +297,24 @@ Here's an example of it in practice. Choose whatever `font-size`s and media quer {% highlight scss %} html { - font-size: 14px; + font-size: 1rem; } @include media-breakpoint-up(sm) { html { - font-size: 16px; + font-size: 1.2rem; } } @include media-breakpoint-up(md) { html { - font-size: 20px; + font-size: 1.4rem; } } @include media-breakpoint-up(lg) { html { - font-size: 28px; + font-size: 1.6rem; } } {% endhighlight %}