Typography

Nim UI uses a carefully selected typography system built on the Inter font family for body text and Fira Code for monospaced content. All typographic values are available as Tailwind CSS utility classes and CSS custom properties.

Font Families

Sans-serif (Inter)

Inter is the primary font family used for all body text, headings, labels, and UI elements. It offers excellent readability at all sizes and strong support for multiple languages.

--font-sans: 'Inter', system-ui, -apple-system, sans-serif;

Sans-serif Font

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)

View 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 (Fira Code)

Fira Code is used for code snippets, technical values, and data that benefits from fixed-width characters. It includes programming ligatures for improved code readability.

--font-mono: 'Fira Code', 'Courier New', monospace;

Monospace Font

const greeting = “Hello, World!“;

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

npm install @nim-ui/components

View Code

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

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`

Font Size Scale

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

View 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 Weights

font-normal (400) - Regular body text

font-medium (500) - Labels and emphasis

font-semibold (600) - Section headings

font-bold (700) - Page headings

View 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

Line Heights

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.

View 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.

Heading Hierarchy

Page Title (h1)

Section Title (h2)

Subsection Title (h3)

Card Title (h4)

Small Title (h5)

Label (h6)

View 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=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap"
  rel="stylesheet"
/>

Self-hosted with @fontsource

pnpm add @fontsource/inter @fontsource/fira-code

import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';
import '@fontsource/fira-code/400.css';

Customizing Typography

Override the default typography settings in your Tailwind configuration:

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