Merge pull request #784 from mapbox/fix-bold

force txt-bold to be 1em line height, fixes line height offsets, clos…
mapbox · May 26, 2017 · 11e44cb · 11e44cb
2 parents 8a97b51 + b2f9b57
commit 11e44cb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/src/typography.css b/src/typography.css
@@ -127,6 +127,19 @@ textarea {
   font-size: 90%; /* mono fonts have naturally large proportions, scale them down to match open sans. */
 }
 
+/**
+ * Apply a bold font weight.
+ *
+ * @memberof Type utils
+ * @example
+ * <div class='txt-bold'>txt-bold</div>
+ */
+.txt-bold {
+  font-weight: bold !important;
+  /* prevent bold text inside inline text from offsetting line height */
+  line-height: 1em;
+}
+
 /**
  * Classes for font size and line height, lists, block quotes, code blocks, and more.
  *
@@ -376,15 +389,6 @@ textarea {
   font-weight: normal !important;
 }
 
-/**
- * Apply a bold font weight.
- *
- * @memberof Type utils
- * @example
- * <div class='txt-bold'>txt-bold</div>
- */
-.txt-bold { font-weight: bold !important; }
-
 /**
  * Italicize text.
  *

diff --git a/test/__snapshots__/build-css.jest.js.snap b/test/__snapshots__/build-css.jest.js.snap
@@ -264,6 +264,10 @@ textarea{
   font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;
   font-size:90%;
 }
+.txt-bold{
+  font-weight:bold !important;
+  line-height:1em;
+}
 .txt-h1{
   font-size:45px;
   line-height:54px;
@@ -393,7 +397,6 @@ textarea{
 .txt-normal{
   font-weight:normal !important;
 }
-.txt-bold{ font-weight:bold !important; }
 .txt-em{ font-style:italic !important; }
 .txt-uppercase{ text-transform:uppercase !important; }
 .txt-lowercase{ text-transform:lowercase !important; }
@@ -16732,6 +16735,10 @@ textarea{
   font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;
   font-size:90%;
 }
+.txt-bold{
+  font-weight:bold !important;
+  line-height:1em;
+}
 .txt-h1{
   font-size:45px;
   line-height:54px;
@@ -16861,7 +16868,6 @@ textarea{
 .txt-normal{
   font-weight:normal !important;
 }
-.txt-bold{ font-weight:bold !important; }
 .txt-em{ font-style:italic !important; }
 .txt-uppercase{ text-transform:uppercase !important; }
 .txt-lowercase{ text-transform:lowercase !important; }