New font for body text: Atkinson Hyperlegible

LICENSE.MD

@@ -36,9 +36,9 @@ SOFTWARE.
 
 ### SIL OPEN FONT LICENSE
 
-The Fonts **Red Hat Display** and **Inclusive Sans** are licensed under the SIL License, Version 1.1.
+The Fonts **Red Hat Display** and **Atkinson Hyperlegible** are licensed under the SIL License, Version 1.1.
 
-Copyright (c) 2021 Red Hat, Inc. and 2024 (c) Olivia King.
+Copyright (c) Red Hat, Inc. and (c) Braille Institute.
 
 This license allows
 

src/_data/designTokens/fonts.json

@@ -4,13 +4,13 @@
   "items": [
     {
       "name": "Display",
-      "description": "Display font stack for headings and large text. ",
+      "description": "Display font stack for headings and large text. Redhat Display is made for headlines and big statements, are low contrast and spaced tightly, with a large x-height and open counters.",
       "value": ["Redhat", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
     },
     {
       "name": "Base",
-      "description": "Base font stack for body text. Inclusive Sans is a free, friendly and clean typeface made for enhanced legibility. oliviaking.com/inclusive-sans",
-      "value": ["Inclusive Sans", "system-ui", "sans-serif"]
+      "description": "Base font stack for body text. Atkinson Hyperlegible, named after the founder of the Braille Institute, has been developed specifically to increase legibility for readers with low vision, and to improve comprehension.",
+      "value": ["Atkinson Hyperlegible", "system-ui", "sans-serif"]
     },
     {
       "name": "Mono",

src/_data/designTokens/spacing.json

@@ -2,7 +2,7 @@
   "title": "Spacing",
   "description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.",
   "meta": {
-    "scaleGenerator": "https://utopia.fyi/space/calculator?c=320,19,1.2,1350,26,1.414,8,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12",
+    "scaleGenerator": "https://utopia.fyi/space/calculator?c=320,19,1.2,1350,28,1.25,6,2,&s=0.75%7C0.5%7C0.25,2%7C3%7C5%7C8%7C13,s-l&g=s,l,xl,12",
     "note": "shifing the scale: XS is equal to 3XS"
   },
   "items": [
@@ -34,7 +34,7 @@
     {
       "name": "L",
       "min": 19,
-      "max": 31
+      "max": 28
     },
     {
       "name": "XL",

src/_data/designTokens/textWeights.json

@@ -10,10 +10,6 @@
     {
       "name": "Bold",
       "value": 700
-    },
-    {
-      "name": "Extra Bold",
-      "value": 900
     }
   ]
 }

src/assets/css/global/base/fonts.css

@@ -1,21 +1,31 @@
 @font-face {
-  font-family: 'Inclusive Sans';
+  font-family: 'Atkinson Hyperlegible';
   font-style: normal;
   font-display: swap;
   font-weight: 400;
   src:
     local(''),
-    url('/assets/fonts/inclusive/inclusivesans-regular.woff2') format('woff2');
+    url('/assets/fonts/atkinson/atkinson-hyperlegible-regular.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Inclusive Sans';
+  font-family: 'Atkinson Hyperlegible';
   font-style: italic;
   font-display: swap;
   font-weight: 400;
   src:
     local(''),
-    url('/assets/fonts/inclusive/inclusivesans-italic.woff2') format('woff2');
+    url('/assets/fonts/atkinson/atkinson-hyperlegible-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local(''),
+    url('/assets/fonts/atkinson/atkinson-hyperlegible-bold.woff2') format('woff2');
 }
 
 @font-face {

src/assets/css/global/base/global-styles.css

@@ -31,7 +31,7 @@ h1,
 h2,
 h3 {
   font-family: var(--font-display);
-  font-weight: var(--font-extra-bold);
+  font-weight: var(--font-bold);
   line-height: 1.2;
   letter-spacing: var(--tracking-s);
 }
@@ -83,8 +83,7 @@ svg {
 
 b,
 strong {
-  font-weight: var(--font-extra-bold);
-  font-family: var(--font-display);
+  font-weight: var(--font-bold);
 }
 
 hr {

src/assets/css/global/blocks/main-nav.css

@@ -78,7 +78,7 @@
 }
 
 .mainnav span {
-  font-weight: var(--font-extra-bold);
+  font-weight: var(--font-bold);
   text-transform: uppercase;
   font-family: var(--font-display);
   font-size: var(--size-step-min-1);

src/common/og-images.njk

@@ -1,6 +1,6 @@
 ---
 fontDisplay: "'Red Hat Display', Ubuntu" # needed created in local development, font must be installed on your system.
-fontBody: "'Inclusive Sans', Ubuntu" # needed created in local development, font must be installed on your system.
+fontBody: "'Atkinson Hyperlegible', Ubuntu" # needed created in local development, font must be installed on your system.
 background: '#343434'
 text: '#FBFBFB'
 colors: ['#dd4462', '#c73d58', '#b1364e', '#9a3044']

src/docs/fonts.md

@@ -2,7 +2,7 @@
 title: Fonts
 ---
 
-This starter uses two custom fonts, Red Hat Display and Inclusive Sans. You can add or delete fonts in `src/assets/fonts`.
+This starter uses two custom fonts, Red Hat Display and Atkinson Hyperlegible. You can add or delete fonts in `src/assets/fonts`.
 
 I often create font subsets using the [Fontsquirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).