simpler type, docs callout for reproducing the v3 style headings and small text

dist/css/bootstrap.css

@@ -481,61 +481,18 @@ h1, h2, h3, h4, h5, h6,
   color: inherit;
 }
 
-h1 small,
-h1 .small, h2 small,
-h2 .small, h3 small,
-h3 .small, h4 small,
-h4 .small, h5 small,
-h5 .small, h6 small,
-h6 .small,
-.h1 small,
-.h1 .small, .h2 small,
-.h2 .small, .h3 small,
-.h3 .small, .h4 small,
-.h4 .small, .h5 small,
-.h5 .small, .h6 small,
-.h6 .small {
-  font-weight: normal;
-  line-height: 1;
-  color: #818a91;
-}
-
 h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-bottom: .5rem;
 }
 
-h1 small,
-h1 .small, .h1 small,
-.h1 .small,
-h2 small,
-h2 .small, .h2 small,
-.h2 .small,
-h3 small,
-h3 .small, .h3 small,
-.h3 .small {
-  font-size: 65%;
-}
-
 h4, .h4,
 h5, .h5,
 h6, .h6 {
   margin-bottom: .5rem;
 }
 
-h4 small,
-h4 .small, .h4 small,
-.h4 .small,
-h5 small,
-h5 .small, .h5 small,
-.h5 .small,
-h6 small,
-h6 .small, .h6 small,
-.h6 .small {
-  font-size: 75%;
-}
-
 h1, .h1 {
   font-size: 2.75rem;
 }
@@ -594,7 +551,8 @@ hr {
 
 small,
 .small {
-  font-size: 85%;
+  font-size: 80%;
+  font-weight: normal;
 }
 
 mark,

docs/content/typography.md

@@ -66,41 +66,16 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
 <h6>h6. Bootstrap heading</h6>
 {% endhighlight %}
 
-Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.
+### Customizing headings
 
-<div class="bd-example bd-example-type">
+Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
-  <table class="table">
-    <tbody>
-      <tr>
-        <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
-      </tr>
-      <tr>
-        <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
-      </tr>
-      <tr>
-        <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
-      </tr>
-      <tr>
-        <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
-      </tr>
-      <tr>
-        <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
-      </tr>
-      <tr>
-        <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
 
-{% highlight html %}
+{% example html %}
-<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
+<h3>
-<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
+  Fancy display heading
-<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
+  <small class="text-muted">With faded secondary text</small>
-<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
+</h3>
-<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
+{% endexample %}
-<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
-{% endhighlight %}
 
 ## Display headings
 
@@ -125,7 +100,6 @@ Traditional heading elements are designed to work best in the meat of your page
   </table>
 </div>
 
-
 ## Lead
 
 Make a paragraph stand out by adding `.lead`.

docs/dist/css/bootstrap.css

@@ -481,61 +481,18 @@ h1, h2, h3, h4, h5, h6,
   color: inherit;
 }
 
-h1 small,
-h1 .small, h2 small,
-h2 .small, h3 small,
-h3 .small, h4 small,
-h4 .small, h5 small,
-h5 .small, h6 small,
-h6 .small,
-.h1 small,
-.h1 .small, .h2 small,
-.h2 .small, .h3 small,
-.h3 .small, .h4 small,
-.h4 .small, .h5 small,
-.h5 .small, .h6 small,
-.h6 .small {
-  font-weight: normal;
-  line-height: 1;
-  color: #818a91;
-}
-
 h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-bottom: .5rem;
 }
 
-h1 small,
-h1 .small, .h1 small,
-.h1 .small,
-h2 small,
-h2 .small, .h2 small,
-.h2 .small,
-h3 small,
-h3 .small, .h3 small,
-.h3 .small {
-  font-size: 65%;
-}
-
 h4, .h4,
 h5, .h5,
 h6, .h6 {
   margin-bottom: .5rem;
 }
 
-h4 small,
-h4 .small, .h4 small,
-.h4 .small,
-h5 small,
-h5 .small, .h5 small,
-.h5 .small,
-h6 small,
-h6 .small, .h6 small,
-.h6 .small {
-  font-size: 75%;
-}
-
 h1, .h1 {
   font-size: 2.75rem;
 }
@@ -594,7 +551,8 @@ hr {
 
 small,
 .small {
-  font-size: 85%;
+  font-size: 80%;
+  font-weight: normal;
 }
 
 mark,

scss/_type.scss

@@ -13,34 +13,17 @@ h1, h2, h3, h4, h5, h6,
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
   color: $headings-color;
-
-  small,
-  .small {
-    font-weight: normal;
-    line-height: 1;
-    color: $headings-small-color;
-  }
 }
 
 h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-bottom: ($spacer / 2);
-
-  small,
-  .small {
-    font-size: 65%;
-  }
 }
 h4, .h4,
 h5, .h5,
 h6, .h6 {
   margin-bottom: ($spacer / 2);
-
-  small,
-  .small {
-    font-size: 75%;
-  }
 }
 
 h1, .h1 { font-size: $font-size-h1; }
@@ -90,10 +73,10 @@ hr {
 // Emphasis
 //
 
-// Ex: (12px small font / 14px base font) * 100% = about 85%
 small,
 .small {
-  font-size: floor((100% * $font-size-sm / $font-size-base));
+  font-size: 80%;
+  font-weight: normal;
 }
 
 mark,