aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/content/typography.md30
1 files changed, 30 insertions, 0 deletions
diff --git a/docs/content/typography.md b/docs/content/typography.md
index 082a87ec9..3145209ee 100644
--- 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 %}