Nim UI uses an editorial type system: Hanken Grotesk for UI and body text, JetBrains Mono for code, and Fraunces as a display serif for expressive headings. All typographic values are available as Tailwind CSS utility classes and CSS custom properties.

Font Families

Sans-serif (Hanken Grotesk)

Hanken Grotesk is the primary font family used for all body text, headings, labels, and UI elements. It offers excellent readability at small sizes and a neutral, operational tone that suits dense backoffice screens.

--font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. (Medium)

The quick brown fox jumps over the lazy dog. (Bold)

Code

<p className="font-sans text-lg">Regular text</p>
<p className="font-sans text-lg font-medium">Medium weight</p>
<p className="font-sans text-lg font-bold">Bold weight</p>

Monospace (JetBrains Mono)

JetBrains Mono is used for code snippets, technical values, and identifiers that benefit from fixed-width characters. Its tall x-height keeps codes and IDs legible in dense tables.

--font-mono: 'JetBrains Mono', 'Courier New', monospace;

const greeting = "Hello, World!";

function add(a: number, b: number): number

npm install @nim-ui/components

Code

<p className="font-mono text-sm">const greeting = "Hello, World!";</p>
<code className="font-mono">npm install @nim-ui/components</code>

Display serif (Fraunces)

Fraunces is a display serif reserved for expressive headings and editorial emphasis — the "quietly refined" voice of the brand. Use it sparingly for hero titles and pull quotes, never for body text or dense UI. It is available through the font-display utility and includes an italic style for emphasis.

--font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;

Quietly refined operations

Editorial emphasis, set in italic

Medium weight for display headings

Code

<h1 className="font-display text-4xl">Quietly refined operations</h1>
<em className="font-display text-2xl italic">Editorial emphasis</em>

Font Sizes

The type scale ranges from xs (12px) to 4xl (36px), providing enough variety for all common UI needs.

Token	Size	Pixels	Tailwind Class
`--text-xs`	0.75rem	12px	`text-xs`
`--text-sm`	0.875rem	14px	`text-sm`
`--text-base`	1rem	16px	`text-base`
`--text-lg`	1.125rem	18px	`text-lg`
`--text-xl`	1.25rem	20px	`text-xl`
`--text-2xl`	1.5rem	24px	`text-2xl`
`--text-3xl`	1.875rem	30px	`text-3xl`
`--text-4xl`	2.25rem	36px	`text-4xl`

text-xs (12px) - Caption and fine print

text-sm (14px) - Secondary text and labels

text-base (16px) - Body text default

text-lg (18px) - Emphasized body text

text-xl (20px) - Small headings

text-2xl (24px) - Section headings

text-3xl (30px) - Page headings

text-4xl (36px) - Display headings

Code

<p className="text-xs">Caption text (12px)</p>
<p className="text-sm">Secondary text (14px)</p>
<p className="text-base">Body text (16px)</p>
<p className="text-lg">Emphasized text (18px)</p>
<p className="text-xl">Small heading (20px)</p>
<p className="text-2xl">Section heading (24px)</p>
<p className="text-3xl">Page heading (30px)</p>
<p className="text-4xl">Display heading (36px)</p>

Font Weights

Four font weights are available to establish visual hierarchy and emphasis.

Token	Value	Tailwind Class	Usage
`--font-normal`	400	`font-normal`	Body text, paragraphs
`--font-medium`	500	`font-medium`	Labels, subtitles, emphasis
`--font-semibold`	600	`font-semibold`	Section headings, card titles
`--font-bold`	700	`font-bold`	Page headings, strong emphasis

font-normal (400) - Regular body text

font-medium (500) - Labels and emphasis

font-semibold (600) - Section headings

font-bold (700) - Page headings

Code

<p className="font-normal">Regular body text</p>
<p className="font-medium">Labels and emphasis</p>
<p className="font-semibold">Section headings</p>
<p className="font-bold">Page headings</p>

Line Heights

Three line height options control the vertical spacing within text blocks.

Token	Value	Tailwind Class	Usage
`--leading-tight`	1.25	`leading-tight`	Headings, compact UI text
`--leading-normal`	1.5	`leading-normal`	Body text, general content
`--leading-relaxed`	1.75	`leading-relaxed`	Long-form content, articles

leading-tight (1.25)

Nim UI provides a comprehensive set of components for building modern web applications. Each component is designed with accessibility and performance in mind.

leading-normal (1.5)

Nim UI provides a comprehensive set of components for building modern web applications. Each component is designed with accessibility and performance in mind.

leading-relaxed (1.75)

Nim UI provides a comprehensive set of components for building modern web applications. Each component is designed with accessibility and performance in mind.

Code

<p className="leading-tight">Compact text for headings</p>
<p className="leading-normal">Standard body text spacing</p>
<p className="leading-relaxed">Comfortable reading for articles</p>

Heading Patterns

Recommended heading styles for consistent page hierarchy.

Page Title (h1)

Section Title (h2)

Subsection Title (h3)

Card Title (h4)

Small Title (h5)

Label (h6)

Code

<h1 className="text-4xl font-bold leading-tight">Page Title</h1>
<h2 className="text-3xl font-semibold leading-tight">Section Title</h2>
<h3 className="text-2xl font-semibold leading-tight">Subsection Title</h3>
<h4 className="text-xl font-medium leading-tight">Card Title</h4>
<h5 className="text-lg font-medium leading-tight">Small Title</h5>
<h6 className="text-base font-medium leading-tight">Label</h6>

Loading Fonts

From Google Fonts

Add the following to your HTML <head> to load the recommended 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=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&display=swap"
  rel="stylesheet"
/>

Self-hosted with @fontsource

pnpm add @fontsource/hanken-grotesk @fontsource/jetbrains-mono @fontsource/fraunces

src/main.tsx

import '@fontsource/hanken-grotesk/400.css';
import '@fontsource/hanken-grotesk/500.css';
import '@fontsource/hanken-grotesk/600.css';
import '@fontsource/hanken-grotesk/700.css';
import '@fontsource/jetbrains-mono/400.css';
import '@fontsource/fraunces/400.css';
import '@fontsource/fraunces/400-italic.css';

Customizing Typography

Override the default typography settings in your Tailwind configuration:

tailwind.config.js

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['YourFont', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
        // Add custom sizes
        'hero': ['4.5rem', { lineHeight: '1.1' }],
        'tiny': ['0.625rem', { lineHeight: '1.4' }],
      },
    },
  },
};

Best Practices

Use text-base (16px) as the minimum body text size for comfortable reading on all devices.
Limit heading levels to 3-4 per page to maintain a clear hierarchy without overwhelming the reader.
Pair font sizes with appropriate line heights -- use leading-tight for headings and leading-normal or leading-relaxed for body text.
Use font-medium or font-semibold for emphasis rather than relying on color or size alone.
Maintain a consistent type scale throughout your application by using the provided tokens rather than arbitrary values.

What's Next?

Colors - Color palette and design tokens
Spacing - Spacing scale and layout
Dark Mode - Implementing dark mode

Typography

Page Title (h1)

Section Title (h2)

Subsection Title (h3)

Card Title (h4)

Small Title (h5)

Label (h6)

On this page