Typography

The design system uses Inter font family with a comprehensive type scale. Each style includes pre-configured font size, weight, line height, and letter spacing.

Font Setup

The design system uses Inter font. Load it using Next.js Font Optimization (recommended):

import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({
  subsets: ['latin'],
  weight: ['400'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Alternatively, use Google Fonts CDN:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet" />

Tailwind Configuration

Add typography configuration to your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
      },
      fontSize: {
        'h1': ['96px', { lineHeight: '115px', fontWeight: '400', letterSpacing: '-1.5px' }],
        'h2': ['60px', { lineHeight: '72px', fontWeight: '400', letterSpacing: '-0.5px' }],
        'h3': ['48px', { lineHeight: '58px', fontWeight: '400', letterSpacing: '0px' }],
        'h4': ['34px', { lineHeight: '41px', fontWeight: '400', letterSpacing: '0.3px' }],
        'h5': ['24px', { lineHeight: '29px', fontWeight: '400', letterSpacing: '0px' }],
        'h6': ['20px', { lineHeight: '30px', fontWeight: '400', letterSpacing: '0.2px' }],
        'subtitle1': ['16px', { lineHeight: '24px', fontWeight: '400', letterSpacing: '0.2px' }],
        'subtitle2': ['14px', { lineHeight: '21px', fontWeight: '400', letterSpacing: '0.1px' }],
        'body1': ['16px', { lineHeight: '24px', fontWeight: '400', letterSpacing: '0.2px' }],
        'body2': ['14px', { lineHeight: '21px', fontWeight: '400', letterSpacing: '0.2px' }],
        'caption': ['12px', { lineHeight: '18px', fontWeight: '400', letterSpacing: '0.5px' }],
      },
    },
  },
}

Each text-* class then sets size, line height, weight and letter spacing together. All styles use weight 400, and line heights are whole pixels so text sits on the pixel grid. You can also build these tuples from oneslash-design-system/tokens, as shown in Getting Started.

Font Family

Inter

Type Scale

H1

text-h1

96px / 115px · 400 · -1.5px

H2

text-h2

60px / 72px · 400 · -0.5px

H3

text-h3

48px / 58px · 400 · 0px

H4

text-h4

34px / 41px · 400 · 0.3px

H5

text-h5

24px / 29px · 400 · 0px

H6

text-h6

20px / 30px · 400 · 0.2px

Subtitle 1

text-subtitle1

16px / 24px · 400 · 0.2px

Subtitle 2

text-subtitle2

14px / 21px · 400 · 0.1px

Body 1

text-body1

16px / 24px · 400 · 0.2px

Body 2

text-body2

14px / 21px · 400 · 0.2px

Caption

text-caption

12px / 18px · 400 · 0.5px

Text Alignments

text-left

Left aligned text (default)

text-center

Center aligned text

text-right

Right aligned text

text-justify

Justified text spreads content evenly across the full width of the container, creating clean edges on both sides. This is useful for longer paragraphs in formal documents.