Merge pull request #241 from eligolding/font-stack

Update font stack according to UX spec
mobi · Oct 3, 2019 · 5206c32 · 5206c32
2 parents 22dcc67 + cbfe0cd
commit 5206c32
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 17 deletions.
diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.scss b/projects/go-lib/src/lib/components/go-button/go-button.component.scss
@@ -52,7 +52,7 @@ $button__background--loading: rgba($theme-light-border, .4);
   color: $base-dark;
   cursor: pointer;
   display: inline-block;
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: .875rem;
   letter-spacing: .015rem;
   line-height: 1rem;

diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss
@@ -38,7 +38,7 @@
   color: $base-light;
   cursor: pointer;
   display: block;
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: .8rem;
   line-height: 1rem;
   outline-offset: -2px;

diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.scss b/projects/go-lib/src/lib/components/go-search/go-search.component.scss
@@ -89,7 +89,7 @@
   background: transparent;
   border: 0;
   flex: 1;
-  font-family: $base-font-stack;
+  font-family: $primary-font-stack;
   font-size: 0.875rem;
   font-weight: 300;
   letter-spacing: 0.02rem;

diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss
@@ -8,6 +8,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  font-family: $secondary-font-stack;
   height: 100%;
   overflow-y: auto;
   padding: 2rem 0;

diff --git a/projects/go-lib/src/styles/_forms.scss b/projects/go-lib/src/styles/_forms.scss
@@ -53,7 +53,7 @@ $input--disabled-background: rgba($base-dark-secondary, .4);
 .go-form__label {
   color: $theme-light-color;
   display: block;
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: .875rem;
   font-weight: $weight-bold;
   letter-spacing: 1pt;

diff --git a/projects/go-lib/src/styles/_typography.scss b/projects/go-lib/src/styles/_typography.scss
@@ -1,25 +1,26 @@
 body {
-  font-family: $base-font-stack;
+  font-family: $primary-font-stack;
+  font-weight: $weight-light;
 }
 
 .go-heading-1 {
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: 6rem;
-  font-weight: $weight-light;
+  font-weight: $weight-regular;
   letter-spacing: -1.5pt;
   margin-bottom: $column-gutter--quarter;
 }
 
 .go-heading-2 {
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: 3.75rem;
-  font-weight: $weight-light;
+  font-weight: $weight-regular;
   letter-spacing: -.5pt;
   margin-bottom: $column-gutter--quarter;
 }
 
 .go-heading-3 {
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: 3rem;
   font-weight: $weight-regular;
   letter-spacing: 0;
@@ -28,7 +29,7 @@ body {
 }
 
 .go-heading-4 {
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: 2.125rem;
   font-weight: $weight-regular;
   letter-spacing: .25pt;
@@ -37,7 +38,7 @@ body {
 }
 
 .go-heading-5 {
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: 1.5rem;
   font-weight: $weight-bold;
   letter-spacing: 0;
@@ -46,7 +47,7 @@ body {
 }
 
 .go-heading-6 {
-  font-family: $heading-font-stack;
+  font-family: $primary-font-stack;
   font-size: .875rem;
   font-weight: $weight-bold;
   letter-spacing: 1pt;

diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss
@@ -36,9 +36,8 @@ $weight-light: 300;
 $weight-regular: 400;
 $weight-bold: 700;
 
-$base-font-stack: 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
-$heading-font-stack: 'Roboto', 'Bryant', 'Helvetica', 'Arial', sans-serif;
-
+$primary-font-stack: 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
+$secondary-font-stack: 'Nunito', 'Helvetica', 'Arial', sans-serif;
 // Colors
 // ----------------------------------------------------------------------------
 

diff --git a/projects/go-style-guide/src/app/app.component.scss b/projects/go-style-guide/src/app/app.component.scss
@@ -10,7 +10,7 @@ a {
 body {
   background: $theme-light-app-bg;
   color: $theme-light-color;
-  font-family: $base-font-stack;
+  font-family: $primary-font-stack;
   font-weight: 300;
 }
 

diff --git a/projects/go-style-guide/src/styles/_settings.scss b/projects/go-style-guide/src/styles/_settings.scss
@@ -1,5 +1,6 @@
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
+@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
 

diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
+@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 /* http://meyerweb.com/eric/tools/css/reset/