Based on bootstrap typography.
When writing a heading, please ensure that the copy style is Sentence case. Also, please do not rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
Size: 48px / 3rem
Line height: 56px / 3.5rem
Size: 62px / 3.875rem
Line height: 70px / 4.375rem
Weight: 700
Bottom margin: 16px / 1rem
Color: #222633
Size: 38px / 2.375rem
Line height: 48px / 3rem
Size: 54px / 3.375rem
Line height: 64px / 4rem
Weight: 700
Bottom margin: 16px / 1rem
Color: #222633
Size: 30px / 1.875rem
Line height: 36px / 2.25rem
Size: 48px / 3rem
Line height: 56px / 3.5rem
Weight: 700
Bottom margin: 16px / 1rem
Color: #222633
Size: 24px / 1.5rem
Line height: 28px / 1.75rem
Size: 38px / 2.375rem
Line height: 48px / 3rem
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
Size: 30px / 1.875rem
Line height: 36px / 2.25rem
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
Size: 18px / 1.125rem
Line height: 24px / 1.5rem
Size: 24px / 1.5rem
Line height: 28px / 1.75rem
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
Size: 16px / 1rem
Line height: 24px / 1.5rem
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
Size: 16px / 1rem
Line height: 24px / 1.5rem
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 600
Bottom margin: 8px / 0.5rem
Letter spacing: 1.28px / 0.08rem
Color: #1b1763
An eyebrow is commonly used just above a heading to indicate a category. Below is an example of how to accomplish this while meeting accessibility guidelines regarding heading order, but still achieving a Heading 1 font size for the question.
Occasionally, an eyebrow will be used in a situation where is not appropriate to use a heading element, like on a customer name below a quote from their review. Below is an example of how to accomplish this.
“Working with this company was a breeze. They were so friendly and helpful.”
Sofia
Homeowner
Size: 12px / 0.75rem
Line height: 18px / 1.125rem
Weight: 400
Color: #222633
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
Weight: 400
Color: #222633
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 400
Color: #222633
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
Weight: 400
Color: #222633
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
Weight: 500
Color: #2e46b9
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 500
Color: #2e46b9
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
Weight: 500
Color: #2e46b9
Here is an example of an unordered list.
Here is an example of an ordered list.
Here is an example of an unstyled list.
These utility classes will apply the associated font weight to text.
font-weight-lighterfont-weight-lightfont-weight-basefont-weight-normalfont-weight-semiboldfont-weight-boldfont-weight-bolderfont-weight-boldest These utility classes will apply the associated font size to text. Responsive versions for each breakpoint are also available (e.g. font-size-sm-400, font-size-md-400, font-size-lg-400, font-size-xl-400, font-size-xxl-400).
font-size-50font-size-75font-size-100font-size-200font-size-300font-size-400font-size-500font-size-600font-size-700font-size-800font-size-900