make letter-spacing resilient to font size changes

mnajdova · Dec 29, 2020 · 00b207c · 00b207c
1 parent 3a6ee8c
commit 00b207c
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/docs/src/modules/branding/Page.tsx b/docs/src/modules/branding/Page.tsx
@@ -41,6 +41,11 @@ declare module '@material-ui/core/styles/createPalette' {
   interface Palette extends CustomPalette {}
   interface PaletteOptions extends CustomPaletteOptions {}
 }
+
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5;
+}
+
 let theme = createMuiTheme({
   palette: {
     text: {
@@ -86,25 +91,25 @@ let theme = createMuiTheme({
     h1: {
       fontSize: 72,
       fontWeight: 700,
-      letterSpacing: '-2px',
+      letterSpacing: `${round(-2 / 72)}em`,
       lineHeight: 1.111,
     },
     h2: {
       fontSize: 52,
       fontWeight: 700,
-      letterSpacing: '-1.5px',
+      letterSpacing: `${round(-1.5 / 52)}em`,
       lineHeight: 1.154,
     },
     h3: {
       fontSize: 36,
       fontWeight: 700,
-      letterSpacing: '-1px',
+      letterSpacing: `${round(-1 / 36)}em`,
       lineHeight: 1.222,
     },
     h4: {
       fontSize: 24,
       fontWeight: 700,
-      letterSpacing: '-0.5px',
+      letterSpacing: `${round(-0.5 / 24)}em`,
       lineHeight: 1.25,
     },
   },