add responsive typography note /cc #17095

diff --git a/docs/content/typography.md b/docs/content/typography.md
index 082a87ec92a950754f76b2d31ed5cd89b71265f6..3145209ee8f0f21bd82f3c4176e96d1bbab91ab9 100644 (file)
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -235,3 +235,33 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>
 {% endexample %}
+
+## Responsive typography
+
+*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+
+Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
+
+{% highlight scss %}
+html {
+  font-size: 14px;
+}
+
+@include media-breakpoint-up(sm) {
+  html {
+    font-size: 16px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  html {
+    font-size: 28px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  html {
+    font-size: 20px;
+  }
+}
+{% endhighlight %}