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'],
  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@300;400;500;600;700&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: '120%', fontWeight: '300', letterSpacing: '-1.5px' }],
        'h2': ['60px', { lineHeight: '120%', fontWeight: '300', letterSpacing: '-0.5px' }],
        'h3': ['48px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '0px' }],
        'h4': ['34px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '0.3px' }],
        'h5': ['24px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '0px' }],
        'h6': ['20px', { lineHeight: '150%', fontWeight: '500', letterSpacing: '0.2px' }],
        'subtitle1': ['16px', { lineHeight: '150%', fontWeight: '500', letterSpacing: '0.2px' }],
        'subtitle2': ['14px', { lineHeight: '150%', fontWeight: '500', letterSpacing: '0.1px' }],
        'body1': ['16px', { lineHeight: '150%', fontWeight: '400', letterSpacing: '0.2px' }],
        'body2': ['14px', { lineHeight: '150%', fontWeight: '400', letterSpacing: '0.2px' }],
        'caption': ['12px', { lineHeight: '150%', fontWeight: '400', letterSpacing: '0.5px' }],
      },
    },
  },
}

These configurations ensure that font sizes include lineHeight, fontWeight, and letterSpacing for consistent typography across your application.

Font Family

Inter

Type Scale

H1

text-h1

H2

text-h2

H3

text-h3

H4

text-h4

H5

text-h5

H6

text-h6

Subtitle 1

text-subtitle1

Subtitle 2

text-subtitle2

Body 1

text-body1

Body 2

text-body2

Caption

text-caption

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.