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.
Berthold Akzidenz Grotesk [Primary]
--font-family-primary: 'Berthold Akzidenz Grotesk', sans-serif
Courier [Monospace]
--font-family-mono: 'Courier', monospace
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
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)
h1 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-6xl); font-weight: var(--font-weight-bold); }
h2 { font-family: var(--font-family-primary-light); font-size: var(--font-size-5xl); font-weight: var(--font-weight-light); }
h3 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); }
h4 { font-family: var(--font-family-primary-light); font-size: var(--font-size-3xl); font-weight: var(--font-weight-light); }
h5 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
h6 { font-family: var(--font-family-primary-light); font-size: var(--font-size-xl); font-weight: var(--font-weight-light); }
Tight
--letter-spacing-tight: -0.025em
Normal
--letter-spacing-normal: 0
Wide
--letter-spacing-wide: 0.025em
Wider
--letter-spacing-wider: 0.05em
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