Typography

Typography system with heading hierarchies, body text sizes, font families, and text formatting options. Includes responsive sizing specs for desktop and mobile.

Font Families

Heading: Switzer

Light Mode: black

Dark Mode: white

Line Height: 1.2

Letter Spacing: -0.03em

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?

Subheading: Switzer

Light Mode: black

Dark Mode: white

Line Height: 1.4

Letter Spacing: default

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?

Paragraph: JetBrains Mono

Light Mode: black

Dark Mode: white

Line Height: 1.6

Letter Spacing: default

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?

Headings

Heading 1 Jumbo

76px / 52px

Heading 1

60px / 44px

Heading 2

50px / 36px

Heading 3

40px / 30px

Subheading 4

36px / 24px

Subheading 5

30px / 20px

Subheading 6

26px / 18px

Body

Body XXS. Fox jumps over the lazy dog quickly.

10px / 8px

Body XS. Fox jumps over the lazy dog quickly.

12px / 10px

Body SM. Fox jumps over the lazy dog quickly.

14px / 12px

Body MD (default). Fox jumps over the lazy dog quickly.

16px / 14px

Body LG. Fox jumps over the lazy dog quickly.

20px / 16px

Body XL. Fox jumps over the lazy dog quickly.

24px / 20px

Body XXL. Fox jumps over the lazy dog quickly.

28px / 24px

Other

Label (110% of Body MD)

18px / 15px

Link: Link example

Unordered list item 1
Unordered list item 2
Unordered list item 3
Unordered list item 4
Unordered list item 5

Ordered list item 1
Ordered list item 2
Ordered list item 3
Ordered list item 4
Ordered list item 5

const code = Preformatted "mono" text type for code examples;