Typography

The Orange identity is defined by a bold distinctive typographic style. Being rigorous about our typography application is a key part of maintaining a strong, consistent brand identity.

Boosted typography styles are heavily documented, including their responsive behaviours and values: global settings, headings, display headings and regular text for the main ones. You may apply them using the .display-* and .h* utilities, and through text utilities—but every HTML element has default styles matching the brand guidelines.

Headlines & body copy
Examples Metrics (desktop)
Page title 1 Page title 1 
.display-1 {
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.125rem;
 }
Headline 1 Headline 1
Page title 2 Page title 2 
.display-2 {
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.1rem;
 }
Headline 2 Headline 2
Section title 1 Section title 1 
.display-3 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.0625rem;
 }
Section title 2 Section title 2 
h1, .display-4 {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.0625rem;
 }
Subtitle 1 Subtitle 1 
h2, .h2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: calc(32/30);
  letter-spacing: -.05rem;
 }
Subtitle 2 Subtitle 2 
h3, .h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: calc(26/24);
  letter-spacing: -.03125rem;
 }
Body 1 Body 1 Body 1 
h4, .h4 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: calc(22/20);
  letter-spacing: -.025rem;
 }
Body 2 Body 2 Body 2 
.lead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.015625rem;
 }
Body 3 Body 3 Body 3 
h5, .h5 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: calc(20/18);
  letter-spacing: -.0125rem;
 }
Body 4 Body 4 Body 4 
body {
  font-size: 1rem;
  font-weight: 400;
  line-height: calc(18/16);
  letter-spacing: -.00625rem;
 }
Standard Standard Standard 
h6, .h6, strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: calc(18/16);
  letter-spacing: -.00625rem;
 }
Small Small Small 
small, .small {
  font-size: .875rem;
  font-weight: 700;
  line-height: calc(16/14);
  letter-spacing: -.00625rem;
 }