feat: tweak typography and update webfonts

packages/gatsby-theme-docs/gatsby-browser.js

@@ -13,9 +13,7 @@ import { SWRConfig } from 'swr';
 import { docsCache } from './utils/create-emotion-cache';
 import { PortalsContainer } from '@commercetools-docs/ui-kit';
 import * as Sentry from '@sentry/browser';
-import '@fontsource/roboto-mono/latin-400.css';
-import '@fontsource/roboto-mono/latin-500.css';
-import '@fontsource/roboto-mono/latin-700.css';
+import '@fontsource-variable/roboto-mono';
 import './src/fonts/Inter/inter.css';
 import './globals.css';
 import ConfigContext from './src/components/config-context';

packages/gatsby-theme-docs/globals.css

@@ -7,6 +7,6 @@
 
 :root {
   --font-family-default: 'Inter var', sans-serif;
-  --font-family-body: 'Roboto Mono', monospace;
+  --font-family-body: 'Roboto Mono Variable', monospace;
 }
 

packages/gatsby-theme-docs/package.json

@@ -47,7 +47,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
-    "@fontsource/roboto-mono": "5.0.16",
+    "@fontsource-variable/roboto-mono": "5.0.18",
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
     "@sentry/browser": "7.87.0",

packages/gatsby-theme-docs/src/fonts/Inter/inter.css

@@ -5,19 +5,20 @@ general browser support would not support such old user agents anyways.
 To update the font version, get the latest Woff and Woff2 files from the zip download
 at https://github.com/rsms/inter/releases
 */
+
 @font-face {
   font-family: 'Inter var';
+  font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  font-style: normal;
   font-named-instance: 'Regular';
-  src: url("Inter-roman.var.woff2") format("woff2");
+  src: url("InterVariable.woff2") format("woff2");
 }
 @font-face {
   font-family: 'Inter var';
+  font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  font-style: italic;
   font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2") format("woff2");
+  src: url("InterVariable-Italic.woff2") format("woff2");
 }

packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-messages.jsx

@@ -24,10 +24,10 @@ export const FEEDBACK_DOWN = -1;
 
 const MessageContainer = styled.div`
   font-size: ${designSystem.typography.fontSizes.small};
-  line-height: 22px;
+  line-height: ${designSystem.typography.lineHeights.body};
   display: flex;
   align-items: flex-start;
-  margin-bottom: 16px;
+  margin-bottom: ${designSystem.dimensions.spacings.m};
 `;
 
 const LoadingContainer = styled.div`
@@ -61,12 +61,16 @@ const AvatarWrapper = styled.div`
 
 const MessageText = styled.div`
   margin-left: 10px;
-  padding-top: 2px;
-  line-height: 22px;
-  font-size: 14px;
+  padding-top: ${designSystem.dimensions.spacings.xs};
+  font-size: ${designSystem.typography.fontSizes.small};
   p {
     display: inline;
   }
+  ul, ol {
+    padding-top: ${designSystem.dimensions.spacings.xs};
+    padding-bottom: ${designSystem.dimensions.spacings.xs};
+  }
+
 `;
 
 const IntroMessageText = styled(MessageText)`

packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-css-components.js

@@ -160,16 +160,17 @@ export const CharCount = styled.div`
 export const DisclaimerText = styled.p`
   text-align: center;
   font-size: ${designSystem.typography.fontSizes.extraSmall};
-  line-height: 22px;
+  line-height: ${designSystem.typography.lineHeights.tight};
   a {
     color: ${designSystem.colors.light.textPrimary};
   }
 `;
 
 export const DisclaimerTextMobile = styled.p`
+  text-align: center;
   margin-top: ${designSystem.dimensions.spacings.m};
   font-size: ${designSystem.typography.fontSizes.extraSmall};
-  line-height: 22px;
+  line-height: ${designSystem.typography.lineHeights.tight};
   display: none;
   a {
     color: ${designSystem.colors.light.textPrimary};

packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-references-list.jsx

@@ -13,11 +13,11 @@ const ReferenceContainer = styled.div`
   border-radius: 4px;
   padding: ${designSystem.dimensions.spacings.m};
   font-size: ${designSystem.typography.fontSizes.small};
+  line-height: ${designSystem.typography.lineHeights.tight};
   overflow: hidden;
 
   h4 {
     font-weight: ${designSystem.typography.fontWeights['light-bold']};
-    line-height: ${designSystem.typography.lineHeights.body};
   }
 
   ul {

packages/ui-kit/src/components/code-block.tsx

@@ -37,6 +37,7 @@ const HighlightedContainer = styled.div`
 const Preformatted = styled.pre`
   font-family: ${typography.fontFamilies.code};
   font-size: ${typography.fontSizes.small};
+  font-weight: ${typography.fontWeights.lighter};
   background-color: ${tokens.surfaceForCodeBlock} !important;
   margin: 0;
   padding: 0;

packages/ui-kit/src/components/markdown.tsx

@@ -22,23 +22,24 @@ const discoverLeafReactElement = (
   return leafElem;
 };
 
-const headerStyles = () => css`
-  line-height: 1.3;
-`;
+const headerStyles = () => css``;
 
 const Paragraph = styled.p`
   margin: 0;
 `;
+
+/* H1 is typically the page title, so it has more specific typography */
 const H1 = styled.h1`
   ${headerStyles};
   font-size: ${typography.fontSizes.h1};
   font-weight: ${typography.fontWeights.regular};
-  line-height: 1.15;
   color: ${tokens.websitePrimaryColor};
+  text-wrap: balance;
 
   /* H1 is the page title and used outside the Typography wrappers so it directly has a margin */
   margin: 0 0 ${dimensions.spacings.s};
 `;
+/* H2+ are actual section headers in the body content */
 const H2 = styled.h2`
   ${headerStyles};
   font-size: ${typography.fontSizes.h2};
@@ -65,7 +66,6 @@ const H6 = styled.h6`
   ${headerStyles};
   font-size: ${typography.fontSizes.h6};
   font-weight: ${typography.fontWeights.regular};
-  line-height: 1.4;
 `;
 
 const ThematicBreak = styled.hr`
@@ -126,8 +126,6 @@ const Dd = styled.dd`
 `;
 
 const Li = styled.li`
-  line-height: 1.46;
-
   > ul,
   > ol {
     margin: ${dimensions.spacings.s} 0 ${dimensions.spacings.m};
@@ -286,7 +284,10 @@ const Hr = styled(ThematicBreak)``;
 const TypographyPage = styled.div`
   font-size: ${typography.fontSizes.body};
   font-weight: ${typography.fontWeights.regular};
-  line-height: 1.5;
+
+  * {
+    line-height: ${typography.lineHeights.body};
+  }
 
   table {
     font-feature-settings: 'tnum';

packages/ui-kit/src/components/reset.tsx

@@ -149,6 +149,8 @@ const Reset = () => (
           We do NOT apply '-moz-osx-font-smoothing: grayscale' and '-webkit-font-smoothing: antialiased'.
           They worsen the experience on non-retina screens. */
           text-rendering: optimizelegibility;
+          /* Allow chrome to use nicer text wrapping, e.g. avoiding orphans (as of writing only supported in chrome) */
+          text-wrap: pretty;
 
           /* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
           -webkit-text-size-adjust: 100%;

packages/ui-kit/src/design-system.ts

@@ -323,7 +323,7 @@ export const dimensions = {
 export const typography = {
   fontFamilies: {
     primary: "'Inter var', sans-serif",
-    code: "'Roboto Mono', monospace",
+    code: "'Roboto Mono Variable', monospace",
     stringLiteral: "'Inter var', monospace",
   },
 
@@ -350,15 +350,21 @@ export const typography = {
   },
 
   fontWeights: {
+    lighter: '330', // variable fonts used
     regular: '400',
     medium: '500',
     'light-bold': '600',
     bold: '700',
   },
 
   lineHeights: {
+    // dynamic line heights, prefer these as defaults
+    // they are following actual font height (x height) with a fixed actual distance of 6px.
+    // This adjusts to font sizes continuously in a well readable manner.
+    tight: 'calc(2px + 2ex + 2px);',
+    body: 'calc(3px + 2.2ex + 3px);',
+    // fixed line heights
     small: pxToRem('16px'),
-    body: pxToRem('23px'),
     releaseNoteHeader: pxToRem('28px'),
     cardNormalTitle: pxToRem('32px'),
     cardSmallTitle: pxToRem('26px'),

yarn.lock

@@ -3447,7 +3447,7 @@ __metadata:
     "@emotion/react": ^11.10.5
     "@emotion/server": ^11.10.0
     "@emotion/styled": ^11.10.5
-    "@fontsource/roboto-mono": 5.0.16
+    "@fontsource-variable/roboto-mono": 5.0.18
     "@mdx-js/mdx": 1.6.22
     "@mdx-js/react": 1.6.22
     "@sentry/browser": 7.87.0
@@ -5557,10 +5557,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource/roboto-mono@npm:5.0.16":
-  version: 5.0.16
-  resolution: "@fontsource/roboto-mono@npm:5.0.16"
-  checksum: 827bbac2c7e6706465203d64e6a8159a7105dac2f6701ce20f46b13e13056790b9107318c6edfccd9f7112d8ed96b517b6333098967f92a22cc73f8fb1039827
+"@fontsource-variable/roboto-mono@npm:5.0.18":
+  version: 5.0.18
+  resolution: "@fontsource-variable/roboto-mono@npm:5.0.18"
+  checksum: 62db6503405bb983f21972f20d6c2735776fb63c774f0779898bfe7fd5338e2e133d40d7ff0b06e33e7f573fabc98c0dc504d10cf39713798065fbb8cc3b2696
   languageName: node
   linkType: hard