typography.mdx

import { Meta } from '@storybook/blocks';

import { FontItem, FontPalette } from '../../.storybook/blocks/FontPallete'; import { theme } from '../../src/theme/theme';

export const lipsum = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra magna lectus, a congue ex blandit vel. Donec id mi commodo eros porta tempus. Vivamus et elit ut leo tincidunt vehicula non a dolor. Suspendisse placerat turpis nisl, quis gravida sem semper et.;

Typography

Design System have defined two basic font families. As base font family we are using sans-serif Inter font, for monospaced text we are using Space Mono font. These fonts are not bundled together with the Design System and need to be installed separately.

Installation

yarn

yarn add @fontsource/inter @fontsource/space-mono

npm

npm install @fontsource/inter @fontsource/space-mono

Google Web Fonts

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
  rel="stylesheet"
/>

Examples

Families

Font weights

Font sizes

Headings

Body text