Change default font to Inter

Shopify · Jun 17, 2024 · bb83a0d · bb83a0d
1 parent 9412c30
commit bb83a0d
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 18 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -15,8 +15,7 @@
   }
 
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
-      Roboto, 'Helvetica Neue', sans-serif;
+    Inter, -apple-system, "system-ui", "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   }
 
   h1,
@@ -60,3 +59,7 @@
     color: #b3e39a;
   }
 </style>
+<link
+  rel="stylesheet"
+  href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
+/>
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -9,6 +9,6 @@ export default create({
   brandUrl: 'https://github.com/Shopify/polaris-viz',
   brandImage: logo,
   fontBase:
-    "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+    "Inter, -apple-system, 'system-ui', 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   fontCode: "Monaco, Consolas, 'Lucida Console', monospace",
 });
diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts
@@ -8,6 +8,8 @@ import {InternalChartType, ChartState, Hue} from './types';
 
 export const LINE_HEIGHT = 14;
 export const FONT_SIZE = 12;
+export const FONT_FAMILY =
+  'Inter, -apple-system, "system-ui", "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif';
 
 export const XMLNS = 'http://www.w3.org/2000/svg';
 

diff --git a/packages/polaris-viz-core/src/index.ts b/packages/polaris-viz-core/src/index.ts
@@ -64,6 +64,7 @@ export {
   AREAS_TRANSITION_CONFIG,
   STROKE_DOT_ARRAY_WIDTH,
   EXTERNAL_EVENTS_SET_HIDDEN_ITEMS,
+  FONT_FAMILY,
 } from './constants';
 export {
   clamp,

diff --git a/packages/polaris-viz-core/src/styles/shared/_variables.scss b/packages/polaris-viz-core/src/styles/shared/_variables.scss
@@ -155,7 +155,7 @@ $color-yellow-150: #1d1f01;
 $color-yellow-160: #111200;
 
 // stylelint-disable value-keyword-case
-$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
+$font-stack-base: Inter, -apple-system, 'system-ui', 'San Francisco', 'Segoe UI',
   Roboto, 'Helvetica Neue', sans-serif;
 // stylelint-enable value-keyword-case
 

diff --git a/packages/polaris-viz/src/components/Docs/stories/components/PropertyTable/PropertyTable.scss b/packages/polaris-viz/src/components/Docs/stories/components/PropertyTable/PropertyTable.scss
@@ -1,7 +1,7 @@
 // stylelint-disable
 // 🔨 copy from storybook table styles
 .PropertyTable {
-  font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
+  font-family: Inter, -apple-system, 'system-ui', 'San Francisco', 'Segoe UI',
     Roboto, 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/packages/polaris-viz/src/components/SimpleNormalizedChart/components/BarLabel/BarLabel.scss b/packages/polaris-viz/src/components/SimpleNormalizedChart/components/BarLabel/BarLabel.scss
@@ -29,7 +29,6 @@
 }
 
 .FormattedVerticalLabel {
-  font-weight: 700;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 5;
@@ -38,7 +37,6 @@
 }
 
 .FormattedHorizontalLabel {
-  font-weight: 700;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -58,4 +56,5 @@
 
 .Value {
   margin-right: 8px;
+  font-weight: 650;
 }
diff --git a/packages/polaris-viz/src/components/TrendIndicator/TrendIndicator.tsx b/packages/polaris-viz/src/components/TrendIndicator/TrendIndicator.tsx
@@ -1,4 +1,4 @@
-import {useTheme} from '@shopify/polaris-viz-core';
+import {useTheme, FONT_FAMILY} from '@shopify/polaris-viz-core';
 
 import type {Trend, TrendDirection} from '../../types';
 
@@ -70,7 +70,7 @@ export function TrendIndicator({
           fill="currentColor"
           fontWeight={FONT_WEIGHT}
           dominantBaseline="middle"
-          fontFamily="-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
+          fontFamily={FONT_FAMILY}
           textRendering="geometricPrecision"
           width={textWidth}
         >

diff --git a/packages/polaris-viz/src/data/character-width-offsets.json b/packages/polaris-viz/src/data/character-width-offsets.json
@@ -43,15 +43,15 @@
     "40": 3.12
   },
   "fontWeight": {
-    "100": 0.96,
-    "200": 0.97,
+    "100": 0.97,
+    "200": 0.98,
     "300": 0.99,
     "400": 1,
-    "450": 1.04,
-    "500": 1.04,
+    "450": 1.02,
+    "500": 1.03,
     "600": 1.06,
     "700": 1.09,
-    "800": 1.14,
-    "900": 1.19
+    "800": 1.13,
+    "900": 1.16
   }
 }
diff --git a/packages/polaris-viz/src/data/character-widths.json b/packages/polaris-viz/src/data/character-widths.json
diff --git a/scripts/character-widths/build-character-offsets.html b/scripts/character-widths/build-character-offsets.html
@@ -9,7 +9,7 @@
 
     <style>
       body {
-        font-family: -apple-system, BlinkMacSystemFont, 'San Francisco',
+        font-family: Inter, -apple-system, 'system-ui', 'San Francisco',
           'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
       }
     </style>

diff --git a/scripts/character-widths/build-character-widths.html b/scripts/character-widths/build-character-widths.html
@@ -9,7 +9,7 @@
 
     <style>
       body {
-        font-family: -apple-system, BlinkMacSystemFont, 'San Francisco',
+        font-family: Inter, -apple-system, 'system-ui', 'San Francisco',
           'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
       }
     </style>