diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 811291999d..6dedf14358 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d880c288a1..65aaa7c852 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -417,12 +417,14 @@ em {
 .muted {
   color: #999999;
 }
-abbr {
-  font-size: 90%;
-  text-transform: uppercase;
+abbr[title] {
   border-bottom: 1px dotted #ddd;
   cursor: help;
 }
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
 blockquote {
   padding: 0 0 0 15px;
   margin: 0 0 18px;
diff --git a/docs/base-css.html b/docs/base-css.html
index 9fad87178a..5a2e12748c 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -166,7 +166,8 @@
           Wraps abbreviations and acronyms to show the expanded version on hover
         </td>
         <td>
-          Include optional <code>title</code> for expanded text
+          <p>Include optional <code>title</code> attribute for expanded text</p>
+          Use <code>.initialism</code> class for uppercase abbreviations.
         </td>
       </tr>
       <tr>
@@ -205,8 +206,9 @@
     </div>
     <div class="span4">
       <h3>Example abbreviations</h3>
-      <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
-      <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
+      <p>Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.</p>
+      <p>Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.</p>
+      <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
       <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
     </div>
   </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 84d48fb1e0..96036d6eee 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -90,7 +90,8 @@
           {{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}}
         </td>
         <td>
-          {{_i}}Include optional <code>title</code> for expanded text{{/i}}
+          <p>{{_i}}Include optional <code>title</code> attribute for expanded text{{/i}}</p>
+          {{_i}}Use <code>.initialism</code> class for uppercase abbreviations.{{/i}}
         </td>
       </tr>
       <tr>
@@ -129,8 +130,9 @@
     </div>
     <div class="span4">
       <h3>{{_i}}Example abbreviations{{/i}}</h3>
-      <p>{{_i}}Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.{{/i}}</p>
-      <p>{{_i}}<abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
+      <p>{{_i}}Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.{{/i}}</p>
+      <p>{{_i}}Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.{{/i}}</p>
+      <p>{{_i}}<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
       <p>{{_i}}An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.{{/i}}</p>
     </div>
   </div>
diff --git a/less/type.less b/less/type.less
index 6ba83bc3a3..bbe15f6cf7 100644
--- a/less/type.less
+++ b/less/type.less
@@ -154,12 +154,14 @@ em {
 }
 
 // Abbreviations and acronyms
-abbr {
-  font-size: 90%;
-  text-transform: uppercase;
+abbr[title] {
   border-bottom: 1px dotted #ddd;
   cursor: help;
 }
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
 
 // Blockquotes
 blockquote {