Brand GuidelinesTypography

Typography

The pairing

Display
Aa
Bangel Regular
Licensed. OSS fallback: Nunito.
Body
Aa
Helvetica Neue
Licensed. OSS fallback: Inter.

Rule of thumb: all headlines and titles → Bangel. All body, supporting text, captions, UI → Helvetica Neue.

Because Bangel is light in weight at large sizes, establish a distinct size difference between headlines and body — at least 2× the body size for display.

Hierarchy

RoleFaceWeight / size guidance
Main HeadlineBangel Regular900 / clamp(48px, 7vw, 96px); line-height 0.98; tracking -0.025em
SubheadlineHelvetica Neue Regular400 / clamp(20px, 1.6vw, 24px); line-height 1.4
Secondary headlineHelvetica Neue Light300 / clamp(28px, 3vw, 40px); line-height 1.15
BodyHelvetica Neue Regular400 / 16–17px / line-height 1.55
Long-form bodyHelvetica Neue Thin200 / 14–15px / muted color
Eyebrow / kickerHelvetica Neue Regular700 / 12px / tracking 0.18em / uppercase / Tiger Flame

Loading the fonts

In production, license + self-host Bangel Regular and Helvetica Neue. For the portal and the hifi mockup we load the OSS fallbacks from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap"
  rel="stylesheet"
/>
:root {
  --orp-font-display: 'Bangel Regular', 'Nunito', system-ui, sans-serif;
  --orp-font-body:    'Helvetica Neue', 'Inter', system-ui, sans-serif;
}
ColorsLogo system