From 818e1243cf0948634df1faa37216432e2daff070 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 22 Aug 2015 18:56:28 -0700
Subject: add responsive typography note /cc #17095

---
 docs/content/typography.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'docs/content/typography.md')

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 %}
-- 
cgit v1.2.3


From 2dddf997a93c3bda874acb663a0da496f1525f52 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 23 Aug 2015 23:03:58 -0700
Subject: my bad, fix those values

/cc @cvrebert
---
 docs/content/typography.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/content/typography.md')

diff --git a/docs/content/typography.md b/docs/content/typography.md
index 3145209ee..264686b05 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -255,13 +255,13 @@ html {
 
 @include media-breakpoint-up(md) {
   html {
-    font-size: 28px;
+    font-size: 20px;
   }
 }
 
 @include media-breakpoint-up(lg) {
   html {
-    font-size: 20px;
+    font-size: 28px;
   }
 }
 {% endhighlight %}
-- 
cgit v1.2.3


From 29c3eddaeb323299cd37796d893ed475ac1a29bd Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 1 Sep 2015 21:11:53 -0700
Subject: fixes #17412: reverse display heading classes to match h1-h6 headings

---
 docs/content/typography.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'docs/content/typography.md')

diff --git a/docs/content/typography.md b/docs/content/typography.md
index 264686b05..e97593e2e 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -85,26 +85,26 @@ Traditional heading elements are designed to work best in the meat of your page
   <table class="table">
     <tbody>
       <tr>
-        <td><h1 class="display-4">Display 4</h1></td>
+        <td><h1 class="display-1">Display 1</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-3">Display 3</h1></td>
+      <td><h1 class="display-2">Display 2</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-2">Display 2</h1></td>
+      <td><h1 class="display-3">Display 3</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-1">Display 1</h1></td>
+      <td><h1 class="display-4">Display 4</h1></td>
       </tr>
     </tbody>
   </table>
 </div>
 
 {% highlight html %}
-<h1 class="display-4">Display 4</h1>
-<h1 class="display-3">Display 3</h1>
-<h1 class="display-2">Display 2</h1>
 <h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
 {% endhighlight %}
 
 ## Lead
-- 
cgit v1.2.3