Typography
Display Headings
Display headings are used for impact and are much larger than regular headings.
Click image to zoom
Class
Placement
Parent Div
Parent Div
Parent Div
Parent Div
Headings
Headings help break up our page content and make content easier to scan.
Click image to zoom
Class
Placement
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
FAQs
How do I manage responsive headings?
How do I remove unwanted vertical space?
Labels
Label classes can be used for smaller headings and are typically smaller or equal to your base font size.
Class
Placement
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
FAQs
Why not just use text classes?
Where should I use label classes?
Text
Text classes are used for body paragraph content. Text-main (Base) is your websites default paragraph size and should typically sit somewhere between 14-18px depending on your typeface and desired mood.
Click image to zoom
Class
Placement
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
Parent Div
Units
Below is a list of the different CSS units we use for typography.
Class
Use Case
Size
Letter-spacing
Leading
Starter Template
