fix(typography): cleaner font-stack, and better matching typographic …

…scale
Orange-OpenSource · Jul 20, 2020 · 4694e07 · ffoodd · Jul 20, 2020 · ffoodd
1 parent d84a8e8
commit 4694e07
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 59 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -364,6 +364,7 @@ pre {
  margin-bottom: 1rem; // 2
  overflow: auto; // 3
  @include font-size($code-font-size);
+ line-height: $pre-line-height; // Boosted mod
  color: $pre-color;
  -ms-overflow-style: scrollbar; // 4
 

diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -28,8 +28,8 @@
  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
  // stylelint-disable-next-line selector-max-universal
  > :not(caption) > * > * {
- padding: $table-cell-padding-y $table-cell-padding-x $table-cell-padding-x;
- line-height: $table-cell-line-height; // Boosted mod
+ padding: $table-cell-padding-y $table-cell-padding-x add($table-cell-padding-y, 1px); // Boosted mod
+ line-height: $table-line-height; // Boosted mod
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  }
@@ -70,7 +70,7 @@
 .table-sm {
  // stylelint-disable-next-line selector-max-universal
  > :not(caption) > * > * {
- line-height: $table-cell-line-height-sm; // Boosted mod
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm add($table-cell-padding-y-sm, 1px); // Boosted mod
  }
 }
 

diff --git a/scss/_type.scss b/scss/_type.scss
@@ -40,17 +40,16 @@
  letter-spacing: $h2-spacing;
 }
 
-.display-2 {
+h1,
+.display-2,
+.display-3 {
  @include font-size($h3-font-size);
  line-height: $h3-line-height;
- letter-spacing: $h3-spacing;
+ letter-spacing: $mid-spacing;
 }
 
-h1,
-.display-3 {
- @include font-size($h4-font-size);
- line-height: $h4-line-height;
- letter-spacing: $h4-spacing;
+.display-2 {
+ letter-spacing: $h3-spacing;
 }
 
 h2,
@@ -68,6 +67,7 @@ h2,
 }
 
 @include media-breakpoint-up(sm) {
+ h1,
  .display-1,
  .display-2,
  .display-3 {
@@ -84,30 +84,20 @@ h2,
  letter-spacing: $display3-spacing;
  }
 
+ h1,
  .display-3 {
  @include font-size($display4-size);
  letter-spacing: $display4-spacing;
  }
 
- h1 {
- @include font-size($h2-font-size);
- line-height: $h2-line-height;
- letter-spacing: $h2-spacing;
- }
-
  h2,
  .display-4 {
  @include font-size($h3-font-size);
  line-height: $h3-line-height;
  letter-spacing: $h3-spacing;
  }
 
- h3 {
- @include font-size($h4-font-size);
- line-height: $h4-line-height;
- letter-spacing: $h4-spacing;
- }
-
+ h3,
  h4,
  .lead {
  @include font-size($h5-font-size);
@@ -134,15 +124,10 @@ h2,
 
  .display-4 {
  @include font-size($display4-size);
+ line-height: $display-line-height;
  letter-spacing: $display4-spacing;
  }
 
- h1 {
- @include font-size($h1-font-size);
- line-height: $h1-line-height;
- letter-spacing: $h1-spacing;
- }
-
  h2 {
  @include font-size($h2-font-size);
  line-height: $h2-line-height;

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -400,7 +400,7 @@ $utilities: map-merge(
  1: 1,
  sm: $line-height-sm,
  base: $line-height-base,
- lg: $table-cell-line-height,
+ lg: $line-height-lg,
  )
  ),
  "background-color": (

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -419,7 +419,7 @@ $embed-responsive-aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif: HelvNeueOrange, Helvetica Neue, Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default;
+$font-family-sans-serif: HelvNeueOrange, Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base: var(--bs-font-sans-serif) !default;
@@ -443,7 +443,7 @@ $font-weight-bold: 700 !default;
 $font-weight-base: $font-weight-normal !default;
 
 // stylelint-disable function-blacklist
-$line-height-base: 1.25 !default;
+$line-height-base: calc(18 / 16) !default;
 $line-height-sm: calc(16 / 14) !default;
 $line-height-lg: calc(30 / 16) !default;
 // stylelint-enable function-blacklist
@@ -457,7 +457,8 @@ $h5-font-size: $font-size-lg !default; // 18px
 $h6-font-size: $font-size-base !default; // 16px
 $h1-spacing: $letter-spacing-base * 10 !default; // -1px
 $h2-spacing: $letter-spacing-base * 8 !default; // -0.8px
-$h3-spacing: $letter-spacing-base * 6 !default; // -0.6px
+$mid-spacing: $letter-spacing-base * 6 !default; // -0.6px
+$h3-spacing: $letter-spacing-base * 5 !default; // -0.5px
 $h4-spacing: $letter-spacing-base * 4 !default; // -0.4px
 $h5-spacing: $letter-spacing-base * 2 !default; // -0.2px
 $h6-spacing: $letter-spacing-base !default;
@@ -467,7 +468,7 @@ $h2-line-height: calc(32 / 30) !default;
 $h3-line-height: calc(26 / 24) !default;
 $h4-line-height: calc(22 / 20) !default;
 $h5-line-height: calc(20 / 18) !default;
-$h6-line-height: calc(18 / 16) !default;
+$h6-line-height: $line-height-base !default;
 // stylelint-enable function-blacklist
 
 $headings-margin-bottom: $spacer !default;
@@ -482,19 +483,19 @@ $display1-size: $font-size-xlg * 3 !default; // 60px
 $display2-size: $font-size-xlg * 2.5 !default; // 50px
 $display3-size: $font-size-xlg * 2 !default; // 40px
 $display4-size: $h1-font-size !default; // 34px
-$display1-spacing: $letter-spacing-base * 24 !default; // -2.4px
+$display1-spacing: $letter-spacing-base * 20 !default; // -2px
 $display2-spacing: $letter-spacing-base * 16 !default; // -1.6px
-$display3-spacing: $letter-spacing-base * 12 !default; // -1.2px
+$display3-spacing: $h1-spacing !default;  // -1px
 $display4-spacing: $h1-spacing !default; // -1px
 $display-line-height: $h1-line-height !default;
 // scss-docs-end display-headings
 
 $lead-font-size: $font-size-xlg !default;
 $lead-font-weight: 400 !default;
 $lead-line-height: 1.5 !default;
-$lead-letter-spacing: $letter-spacing-base * .25 !default;
+$lead-letter-spacing: $letter-spacing-base * 2.5 !default;
 
-$small-font-size: .875em !default;
+$small-font-size: .875rem !default;
 
 $sub-sup-font-size: .75em !default;
 
@@ -533,12 +534,13 @@ $mark-bg: $primary !default;
 
 // stylelint-disable function-blacklist
 // scss-docs-start table-variables
-$table-cell-padding-y: add(.5rem, 1px) !default;
+$table-cell-padding-y: .875rem !default;
 $table-cell-padding-x: $spacer / 2 !default;
-$table-cell-line-height:  $line-height-lg !default; // Boosted mod
-$table-cell-line-height-sm: calc(20 / 16) !default; // Boosted mod
+$table-cell-padding-y-sm: .5625rem !default;
+$table-cell-padding-x-sm:  $table-cell-padding-x !default;
 
 $table-cell-vertical-align: top !default;
+$table-line-height: 1.25 !default; // Boosted mod
 
 $table-color: $body-color !default;
 $table-bg: $body-bg !default;
@@ -576,7 +578,7 @@ $input-btn-padding-y: .5rem !default;
 $input-btn-padding-x: 1.125rem !default;
 $input-btn-font-family: inherit !default;
 $input-btn-font-size: $font-size-base !default;
-$input-btn-line-height: $line-height-base !default;
+$input-btn-line-height: 1.25 !default;
 
 $input-btn-focus-width: .125rem !default;
 $input-btn-focus-box-shadow: null !default;
@@ -698,7 +700,7 @@ $input-transition: border-color $transition-duration $trans
 
 
 $form-check-input-width: 1.25em !default;
-$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-min-height: $font-size-base * $input-btn-line-height !default;
 $form-check-padding-left: $form-check-input-width + .5em !default;
 $form-check-margin-bottom: .125rem !default;
 $form-check-label-color: null !default;
@@ -1328,6 +1330,7 @@ $kbd-color: $black !default;
 $kbd-bg: $gray-300 !default;
 
 $pre-color: $gray-900 !default;
+$pre-line-height: 1.25 !default;
 
 //
 // Boosted mod

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -17,7 +17,7 @@
 .form-check-input {
  width: $form-check-input-width;
  height: $form-check-input-width;
- margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
+ margin-top: ($input-btn-line-height - $form-check-input-width) / 2; // line-height minus check height
  vertical-align: top;
  background-color: $form-check-input-bg;
  background-repeat: no-repeat;

diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md
@@ -38,15 +38,7 @@ $font-family-sans-serif:
  // Helvetica Neue
  Helvetica Neue,
  // Websafe Fallbacks
- Helvetica, Arial
- // Safari for macOS and iOS (San Francisco)
- -apple-system,
- // Chrome < 56 for macOS (San Francisco)
- BlinkMacSystemFont,
- // Windows
- Segoe UI,
- // Android
- Roboto,
+ Helvetica, Arial,
  // Ubuntu
  Liberation Sans,
  // Sans serif fallback

diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
@@ -47,8 +47,8 @@ All HTML headings, `<h1>` through `<h6>`, are available.
   {{< markdown >}}`<h1></h1>`{{< /markdown >}}
   </td>
   <td>Bold 2.125rem <small class="text-muted">(34px)</small></td>
-  <td>Bold 1.875rem <small class="text-muted">(30px)</small></td>
-  <td>Bold 1.25rem <small class="text-muted">(20px)</small></td>
+  <td>Bold 1.875rem <small class="text-muted">(34px)</small></td>
+  <td>Bold 1.25rem <small class="text-muted">(24px)</small></td>
   <td>1 <small class="text-muted">(34px)</small></td>
   <td>-0.0625rem <small class="text-muted">(-1px)</small></td>
  </tr>
@@ -67,10 +67,10 @@ All HTML headings, `<h1>` through `<h6>`, are available.
   {{< markdown >}}`<h3></h3>`{{< /markdown >}}
   </td>
   <td>Bold 1.5rem <small class="text-muted">(24px)</small></td>
-  <td>Bold 1.25rem <small class="text-muted">(20px)</small></td>
+  <td>Bold 1.25rem <small class="text-muted">(18px)</small></td>
   <td rowspan="2">Bold 1rem <small class="text-muted">(16px)</small></td>
   <td>1.083 <small class="text-muted">(26px)</small></td>
-  <td>-0.0375rem <small class="text-muted">(-0.6px)</small></td>
+  <td>-0.0375rem <small class="text-muted">(-0.5px)</small></td>
  </tr>
  <tr>
   <td>
@@ -162,7 +162,7 @@ Traditional heading elements are designed to work best in the meat of your page
   <td>Bold 3.125rem <small class="text-muted">(50px)</small></td>
   <td>Bold 1.875rem <small class="text-muted">(30px)</small></td>
   <td>1 <small class="text-muted">(60px)</small></td>
-  <td>-0.15rem <small class="text-muted">(-2.4px)</small></td>
+  <td>-0.15rem <small class="text-muted">(-2px)</small></td>
  </tr>
  <tr>
   <td>Display 2</td>
@@ -176,9 +176,9 @@ Traditional heading elements are designed to work best in the meat of your page
   <td>Display 3</td>
   <td>Bold 2.5rem <small class="text-muted">(40px)</small></td>
   <td>Bold 2.125rem <small class="text-muted">(34px)</small></td>
-  <td>Bold 1.25rem <small class="text-muted">(20px)</small></td>
+  <td>Bold 1.25rem <small class="text-muted">(24px)</small></td>
   <td>1 <small class="text-muted">(40px)</small></td>
-  <td>-0.075rem <small class="text-muted">(-1.2px)</small></td>
+  <td>-0.075rem <small class="text-muted">(-1px)</small></td>
  </tr>
  <tr>
   <td>Display 4</td>