Source: https://monarchui.dev/typography/

Foundations

# Typography

One sans family, one mono family, a fixed text scale for interfaces and a fluid display scale for public pages.

## Families

Aa Bb Cc 0123

`--mn-font-sans`

var(--font-poppins

Aa Bb Cc 0123

`--mn-font-mono`

var(--font-mono

## Display scale

Fluid sizes for marketing headings: they scale with the viewport between a fixed minimum and maximum, with their own leading, tracking and weight.

--mn-display-

xl

Every Rook experience

--mn-display-

lg

Every Rook experience

--mn-display-

md

Every Rook experience

--mn-display-

sm

Every Rook experience

## Text scale

--mn-text-

2xs

·

0.6875rem

The quick brown fox jumps over the lazy dog

--mn-text-

xs

·

0.75rem

The quick brown fox jumps over the lazy dog

--mn-text-

sm

·

0.875rem

The quick brown fox jumps over the lazy dog

--mn-text-

base

·

1rem

The quick brown fox jumps over the lazy dog

--mn-text-

lg

·

1.125rem

The quick brown fox jumps over the lazy dog

--mn-text-

xl

·

1.25rem

The quick brown fox jumps over the lazy dog

--mn-text-

2xl

·

1.5rem

The quick brown fox jumps over the lazy dog

--mn-text-

3xl

·

1.875rem

The quick brown fox jumps over the lazy dog

--mn-text-

4xl

·

2.25rem

The quick brown fox jumps over the lazy dog

--mn-text-

5xl

·

3rem

The quick brown fox jumps over the lazy dog

## Weights

--mn-weight-

regular

·

400

Every Rook experience

--mn-weight-

medium

·

500

Every Rook experience

--mn-weight-

semibold

·

600

Every Rook experience

--mn-weight-

bold

·

700

Every Rook experience