Our responsive type system is based on the major third type scale and changes size as the screen it’s displayed on gets smaller. (You can see this in action by making your desktop browser window narrower.)

Our website’s root element (rem) changes at each of the following five “breakpoints”, or screen pixel dimensions:

• xl = 1200px and above
• lg = 992–1199px
• md = 768–991px
• sm = 576–767px
• xs = 575 and below

Below are the weights and relative sizes of our basic headings and body text:

h1 heading: regular/3rem/1.1em

h2 heading: regular/2rem/1.1em

h3 heading: medium/1.5rem/1.3em

h4 heading: medium/1.25rem/1.4em

h5 heading: bold/1rem/1.4em

Paragraph / body text: light/1rem/1.4em

Caption: regular/.75rem/1.2em