Typography

Typography is fundamental to creating clear, accessible, and engaging digital experiences. Our typographic system ensures consistent hierarchy and readability across all Sport Wales platforms.

Font Families

Objektiv MK1

Primary

Used for headings, hero text, and emphasis elements. Objektiv MK1 provides strong brand personality and excellent readability at larger sizes.

font-family: 'Objektiv MK1', 'Montserrat', Arial, sans-serif;

Montserrat

Secondary

Used for body text, interface elements, and when Objektiv MK1 is unavailable. Montserrat offers excellent legibility and web performance.

font-family: 'Montserrat', Arial, sans-serif;

Arial

Fallback

System fallback font ensures content remains readable even when web fonts fail to load. Provides reliable cross-platform consistency.

font-family: Arial, sans-serif;

Type Scale

Our modular scale creates consistent visual hierarchy while maintaining readability across all device sizes.

Display Large

64px / 4rem • Font Weight: 800 • Line Height: 1.1

Use for hero headings and major page titles

Display Medium

48px / 3rem • Font Weight: 800 • Line Height: 1.2

Use for section headings and feature titles

Heading 1

36px / 2.25rem • Font Weight: 700 • Line Height: 1.3

Main page headings

Heading 2

30px / 1.875rem • Font Weight: 700 • Line Height: 1.3

Section headings

Heading 3

24px / 1.5rem • Font Weight: 700 • Line Height: 1.4

Subsection headings

Heading 4

20px / 1.25rem • Font Weight: 600 • Line Height: 1.4

Component headings

Body Large

18px / 1.125rem • Font Weight: 400 • Line Height: 1.6

Lead paragraphs, emphasized content

Body Regular

16px / 1rem • Font Weight: 400 • Line Height: 1.6

Default body text, form labels

Body Small

14px / 0.875rem • Font Weight: 400 • Line Height: 1.5

Secondary text, captions

Caption

12px / 0.75rem • Font Weight: 400 • Line Height: 1.4

Fine print, helper text

Font Weights

Objektiv MK1

Regular (400)

For body text

Bold (700)

Bold for subheadings

Extra Bold (800)

Extra Bold for primary headlines

Montserrat

Regular (400)

Default for body text

Semibold (600)

For emphasized text and labels

Bold (700)

For strong emphasis and buttons

Typography Guidelines

Hierarchy

  • • Use consistent heading levels (H1→H2→H3)
  • • Maintain clear visual distinction between levels
  • • Don't skip heading levels
  • • Use only one H1 per page

Readability

  • • Keep line lengths between 45-75 characters
  • • Use sufficient line spacing (1.4-1.6)
  • • Ensure adequate color contrast (4.5:1 minimum)
  • • Avoid all caps for long text

Performance

  • • Preload critical fonts
  • • Use font-display: swap
  • • Provide fallback fonts
  • • Minimize font variations loaded

Accessibility

  • • Use semantic HTML headings
  • • Ensure text is scalable to 200%
  • • Provide sufficient color contrast
  • • Don't rely solely on color for meaning