Typography

Arcadia's typography system is built on DM Sans. We favor lighter weights (300-400) for headlines to create an elegant, modern feel. Heavier weights (500-600) are reserved for emphasis and UI elements.

DM Sans

Primary typeface for all interface text

Light (300) - For large headings

Regular (400) - For body text

Medium (500) - For emphasis

Semi Bold (600) - For strong emphasis

Heading Scale

Hierarchical heading system from H1 to H11

Arcadia Brand Hub

H1 (1300)

88px • Light (300)

88px

100% • 0.02em

Arcadia Brand Hub

H2 (1200)

72px • Light (300)

72px

100% • 0.02em

Arcadia Brand Hub

H3 (1100)

56px • Light (300)

56px

110% • 0.02em

Arcadia Brand Hub

H4 (1000)

48px • Light (300)

48px

110% • 0.02em

Arcadia Brand Hub

H5 (900)

36px • Light (300)

36px

120% • 0.02em

Arcadia Brand Hub

H6 (850)

28px • Light (300)

28px

120% • 0.02em

Arcadia Brand Hub

H7 (800)

24px • Regular (400)

24px

120% • 0.02em

Arcadia Brand Hub

H8 (700)

20px • Medium (500)

20px

120% • 0.02em

Arcadia Brand Hub

H9 (600)

18px • Medium (500)

18px

120% • 0.02em

Arcadia Brand Hub

H10 (500)

16px • Medium (500)

16px

120% • 0.02em

Arcadia Brand Hub

H11 (400)

14px • Medium (500)

14px

120% • 0.02em

Body Text Scale

Text sizes for content and interface elements

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing.

Body Large (700)

20px • Regular (400)

20px

150% • 0%

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing.

Body Regular (600)

18px • Regular (400)

18px

150% • 0%

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing.

Body Default (500)

16px • Regular (400)

16px

150% • 0%

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing.

Body Small (400)

14px • Regular (400)

14px

150% • 0%

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing.

Body XSmall (300)

12px • Regular (400)

12px

150% • 0%

Usage Guidelines

Best practices for typography implementation

Hierarchy

• Use only one H1 per page
• Maintain logical heading sequence
• Skip heading levels sparingly
• Use H7-H11 for UI elements

Accessibility

• Minimum 16px for body text
• 1.5x line height for readability
• Sufficient color contrast
• Semantic HTML structure

Responsive

• Scale down headings on mobile
• Maintain readability at all sizes
• Use relative units when possible
• Test across devices

Performance

• Preload critical font weights
• Use font-display: swap
• Optimize font loading
• Subset fonts when possible