Typography

Berthold Akzidenz Grotesk stands as a cornerstone in typographic history, originating from the H. Berthold AG type foundry in Germany in 1896. We use Berthold Akzidenz Grotesk as our primary typeface. Initially designed for commercial printing (hence "Akzidenz," meaning jobbing or commercial printing), this typeface gained renewed prominence in the 1950s-60s under Günter Gerhard Lange's supervision. Its influence extends far beyond its own use, serving as the blueprint for numerous neo-grotesque typefaces including Helvetica and Univers. This historical typeface emerged as a key element in the Swiss/International Style movement, representing modernist ideals and establishing the neo-grotesque as the dominant sans-serif approach of the 20th century.

The design of Akzidenz Grotesk embodies functional elegance through its clean, rational character forms and minimal stroke contrast. Distinguished by its slightly condensed letterforms, neutral shapes, and practical approach to typography, it features unique characteristics like the distinctive 'R' with a slightly curved leg and the 'G' with its vertical cut-off. These elements combine to create a typeface that conveys clarity and objectivity while maintaining a timeless quality that continues to resonate in contemporary design. Its neutral yet authoritative voice makes it exceptionally versatile across applications from headlines to body text, bringing both historical gravitas and functional performance.

Font Families


Berthold Akzidenz Grotesk [Primary]

--font-family-primary: 'Berthold Akzidenz Grotesk', sans-serif

Courier [Monospace]

--font-family-mono: 'Courier', monospace

Font Weights


Light

--font-family-primary-light: 'Berthold Akzidenz Grotesk Light', sans-serif

Regular

--font-family-primary-regular: 'Berthold Akzidenz Grotesk Regular', sans-serif

Bold

--font-family-primary-bold: 'Berthold Akzidenz Grotesk Bold', sans-serif

Font Sizes


Meets WCAG AA for body and headings. Small can be used for UI elements and Extra Small for metadata only.

Extra Small

--font-size-xs: 0.75rem (12pt)

Small

--font-size-sm: 0.875rem (14pt)

Base

--font-size-base: 1rem (16pt)

Large

--font-size-lg: 1.125rem (18pt)

Extra Large

--font-size-xl: 1.25rem (20pt)

2X Large

--font-size-2xl: 1.5rem (24pt)

3X Large

--font-size-3xl: 2rem (32pt)

4X Large

--font-size-4xl: 2.5rem (40pt)

5X Large

--font-size-5xl: 3rem (48pt)

6X Large

--font-size-6xl: 3.5rem (56pt)

Type Scale


H1 - 6xl, Bold

h1 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-6xl); font-weight: var(--font-weight-bold); }

H2 - 5xl, Light

h2 { font-family: var(--font-family-primary-light); font-size: var(--font-size-5xl); font-weight: var(--font-weight-light); }

H3 - 4xl, Bold

h3 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); }

H4 - 3xl, Light

h4 { font-family: var(--font-family-primary-light); font-size: var(--font-size-3xl); font-weight: var(--font-weight-light); }
H5 - 2xl, Bold
h5 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
H6 - xl, Light
h6 { font-family: var(--font-family-primary-light); font-size: var(--font-size-xl); font-weight: var(--font-weight-light); }

Letter Spacing


Tight

--letter-spacing-tight: -0.025em

Normal

--letter-spacing-normal: 0

Wide

--letter-spacing-wide: 0.025em

Wider

--letter-spacing-wider: 0.05em

Line Height


Tight

--line-height-tight: 1.1

Normal

--line-height-normal: 1.3

Chill

--line-height-chill: 1.5

Relaxed

--line-height-relaxed: 1.75

Loose

--line-height-loose: 2