Replace Lato with Open Sans stylistic set 2 (#406)

ONSdigital · Jun 6, 2019 · 1f42dd2 · 1f42dd2
1 parent 860c0e7
commit 1f42dd2
Show file tree

Hide file tree

Showing 17 changed files with 15 additions and 15 deletions.
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -143,7 +143,7 @@
     color: $color-links;
     text-decoration: underline;
     font-weight: bold;
-    font-family: Lato, Helvetica Neue, Arial, sans-serif;
+    font-family: $font-sans;
     &:hover {
       color: $color-links-hover;
     }

diff --git a/src/fonts/latolatin-black-webfont.ttf b/src/fonts/latolatin-black-webfont.ttf
diff --git a/src/fonts/latolatin-black-webfont.woff b/src/fonts/latolatin-black-webfont.woff
diff --git a/src/fonts/latolatin-black-webfont.woff2 b/src/fonts/latolatin-black-webfont.woff2
diff --git a/src/fonts/latolatin-bold-webfont.ttf b/src/fonts/latolatin-bold-webfont.ttf
diff --git a/src/fonts/latolatin-bold-webfont.woff b/src/fonts/latolatin-bold-webfont.woff
diff --git a/src/fonts/latolatin-bold-webfont.woff2 b/src/fonts/latolatin-bold-webfont.woff2
diff --git a/src/fonts/latolatin-regular-webfont.ttf b/src/fonts/latolatin-regular-webfont.ttf
diff --git a/src/fonts/latolatin-regular-webfont.woff b/src/fonts/latolatin-regular-webfont.woff
diff --git a/src/fonts/latolatin-regular-webfont.woff2 b/src/fonts/latolatin-regular-webfont.woff2
diff --git a/src/fonts/opensans-bold.woff b/src/fonts/opensans-bold.woff
diff --git a/src/fonts/opensans-bold.woff2 b/src/fonts/opensans-bold.woff2
diff --git a/src/fonts/opensans-regular.woff b/src/fonts/opensans-regular.woff
diff --git a/src/fonts/opensans-regular.woff2 b/src/fonts/opensans-regular.woff2
diff --git a/src/scss/base/_fonts.scss b/src/scss/base/_fonts.scss
@@ -1,2 +1,2 @@
-@include font-face(Lato, '#{$static}/fonts/latolatin-regular-webfont', $weight: 400, $style: null, $exts: eot woff2 woff ttf svg);
-@include font-face(Lato, '#{$static}/fonts/latolatin-bold-webfont', $weight: 600, $style: null, $exts: eot woff2 woff ttf svg);
+@include font-face(OpenSans, '#{$static}/fonts/opensans-regular', $weight: 400, $style: null, $exts: woff2 woff);
+@include font-face(OpenSans, '#{$static}/fonts/opensans-bold', $weight: 600, $style: null, $exts: woff2 woff);
diff --git a/src/scss/vars/_typography.scss b/src/scss/vars/_typography.scss
@@ -1,4 +1,4 @@
-$font-sans: 'Lato', 'Helvetica Neue', Arial, sans-serif !default;
+$font-sans: 'OpenSans', 'Helvetica Neue', Arial, sans-serif !default;
 $font-serif: Georgia, serif !default;
 
 $base-font-size: 1rem;

diff --git a/src/styles/typography/index.njk b/src/styles/typography/index.njk
@@ -8,26 +8,26 @@ anchorLinks: true
 ## Font
 Text is the primary way that users digest information and accomplish tasks, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximize legibility.
 
-### Lato
-The primary font used in SDC is [Lato](https://fonts.google.com/specimen/Lato).
+### Open Sans
+The primary font used in SDC is [Open Sans](https://fonts.google.com/specimen/Open+Sans), defaulting to stylistic set 2 (for open g's).
 
-Lato, with its broad range of weights and extensive unicode support was chosen to provide a good balance between legibility, personality and readability. As the majority of our User Interface (UI) is text-based, we use weight and size to denote hierarchy and separation between content. Lato’s letterforms also provide a good level of contrast which aid readability on poorer quality displays and for users with visual impairment.
+Open Sans, with its broad range of weights and extensive unicode support was chosen to provide a good balance between legibility, personality and readability. As the majority of our User Interface (UI) is text-based, we use weight and size to denote hierarchy and separation between content. Open Sans' letterforms also provide a good level of contrast which aid readability on poorer quality displays and for users with visual impairment.
 
-Font stack: <span style='font-family: Lato;'>"Lato"</span>, <span style='font-family: "Helvetica Neue";'>“Helvetica Neue”</span>, <span style='font-family: Helvetica;'>Helvetica</span>, <span style='font-family: Arial;'>Arial</span>, <span style='font-family: sans-serif;'>sans-serif</span>
+Font stack: <span style='font-family: OpenSans;'>"Open Sans"</span>, <span style='font-family: "Helvetica Neue";'>“Helvetica Neue”</span>, <span style='font-family: Helvetica;'>Helvetica</span>, <span style='font-family: Arial;'>Arial</span>, <span style='font-family: sans-serif;'>sans-serif</span>
 
 ### Type scale
 Using the type scale classes on text elements, the type is sized appropriately for the following breakpoints:
 
 {% md %}
 | Viewport < 740                                            | Viewport >= 740                                           |
 |-----------------------------------------------------------|-----------------------------------------------------------|
-| <p class="u-fs-xl">u-fs-xl</p>Lato Bold - 1.5rem/28px     | <p class="u-fs-xl">u-fs-xl</p>Lato Bold - 2rem/36px       |
-| <p class="u-fs-l">u-fs-l</p>Lato Bold - 1.3rem/24px       | <p class="u-fs-l">u-fs-l</p>Lato Bold - 1.5rem/28px       |
-| <p class="u-fs-m">u-fs-m</p>Lato Bold - 1.1rem/20px       | <p class="u-fs-m">u-fs-m</p>Lato Bold - 1.2rem/22px       |
-| <p class="u-fs-r--b">u-fs-r--b</p>Lato Bold - 1rem/18px   | <p class="u-fs-r--b">u-fs-r--b</p>Lato Bold - 1rem/18px   |
-| <p class="u-fs-r">u-fs-r</p>Lato Regular - 1rem/18px      | <p class="u-fs-r">u-fs-r</p>Lato Regular - 1rem/18px      |
-| <p class="u-fs-s--b">u-fs-s--b</p>Lato Bold - 0.7rem/14px | <p class="u-fs-s--b">u-fs-s--b</p>Lato Bold - 0.7rem/14px |
-| <p class="u-fs-s">u-fs-s</p>Lato Regular - 0.7rem/14px    | <p class="u-fs-s">u-fs-s</p>Lato Regular - 0.7rem/14px    |
+| <p class="u-fs-xl">u-fs-xl</p>Open Sans Bold - 1.5rem/28px     | <p class="u-fs-xl">u-fs-xl</p>Open Sans Bold - 2rem/36px       |
+| <p class="u-fs-l">u-fs-l</p>Open Sans Bold - 1.3rem/24px       | <p class="u-fs-l">u-fs-l</p>Open Sans Bold - 1.5rem/28px       |
+| <p class="u-fs-m">u-fs-m</p>Open Sans Bold - 1.1rem/20px       | <p class="u-fs-m">u-fs-m</p>Open Sans Bold - 1.2rem/22px       |
+| <p class="u-fs-r--b">u-fs-r--b</p>Open Sans Bold - 1rem/18px   | <p class="u-fs-r--b">u-fs-r--b</p>Open Sans Bold - 1rem/18px   |
+| <p class="u-fs-r">u-fs-r</p>Open Sans Regular - 1rem/18px      | <p class="u-fs-r">u-fs-r</p>Open Sans Regular - 1rem/18px      |
+| <p class="u-fs-s--b">u-fs-s--b</p>Open Sans Bold - 0.7rem/14px | <p class="u-fs-s--b">u-fs-s--b</p>Open Sans Bold - 0.7rem/14px |
+| <p class="u-fs-s">u-fs-s</p>Open Sans Regular - 0.7rem/14px    | <p class="u-fs-s">u-fs-s</p>Open Sans Regular - 0.7rem/14px    |
 {% endmd %}
 
 ### Font weights