Typography
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.
Headings
- Example
Post 1
- Mobile
Size: 48px / 3rem
Line height: 56px / 3.5rem
- Desktop
Size: 62px / 3.875rem
Line height: 70px / 4.375rem
- Attributes
Weight: 700
Bottom margin: 16px / 1rem
Color: #222633
- Example
Post 2
- Mobile
Size: 38px / 2.375rem
Line height: 48px / 3rem
- Desktop
Size: 54px / 3.375rem
Line height: 64px / 4rem
- Attributes
Weight: 700
Bottom margin: 16px / 1rem
Color: #222633
- Example
Post 3
- Mobile
Size: 30px / 1.875rem
Line height: 36px / 2.25rem
- Desktop
Size: 48px / 3rem
Line height: 56px / 3.5rem
- Attributes
Weight: 700
Bottom margin: 16px / 1rem
Color: #222633
- Example
Heading 1
- Mobile
Size: 24px / 1.5rem
Line height: 28px / 1.75rem
- Desktop
Size: 38px / 2.375rem
Line height: 48px / 3rem
- Attributes
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
- Example
Heading 2
- Mobile
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
- Desktop
Size: 30px / 1.875rem
Line height: 36px / 2.25rem
- Attributes
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
- Example
Heading 3
- Mobile
Size: 18px / 1.125rem
Line height: 24px / 1.5rem
- Desktop
Size: 24px / 1.5rem
Line height: 28px / 1.75rem
- Attributes
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
- Example
Heading 4
- Mobile
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Desktop
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
- Attributes
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
- Example
Heading 5
- Mobile
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
- Desktop
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Attributes
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
- Example
Heading 6
- Mobile
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
- Desktop
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Attributes
Weight: 600
Bottom margin: 16px / 1rem
Color: #222633
- Example
Eyebrow
- Mobile
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Desktop
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Attributes
Weight: 600
Bottom margin: 8px / 0.5rem
Letter spacing: 1.28px / 0.08rem
Color: #1b1763
Eyebrow with heading
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.
Property details
What is your address?
Eyebrow as visual treatment only
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
Body
- Example
- Extra small body
- Size
Size: 12px / 0.75rem
Line height: 18px / 1.125rem
- Attributes
Weight: 400
Color: #222633
- Example
- Small body
- Size
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
- Attributes
Weight: 400
Color: #222633
- Example
- Regular body
- Size
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Attributes
Weight: 400
Color: #222633
- Example
- Large body
- Size
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
- Attributes
Weight: 400
Color: #222633
- Example
- Link small body
- Size
Size: 14px / 0.875rem
Line height: 20px / 1.25rem
- Attributes
Weight: 500
Color: #2e46b9
- Example
- Link regular body
- Size
Size: 16px / 1rem
Line height: 24px / 1.5rem
- Attributes
Weight: 500
Color: #2e46b9
- Example
- Link large body
- Size
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
- Attributes
Weight: 500
Color: #2e46b9
Bulleted lists
Here is an example of an unordered list.
- This is the first item.
- This is the second item.
- This is the third item.
Here is an example of an ordered list.
- This is the first item.
- This is the second item.
- This is the third item.
Here is an example of an unstyled list.
- This is the first item.
- This is the second item.
- This is the third item.
Font weight
These utility classes will apply the associated font weight to text.
- Name
font-weight-lighter
- Weight
- 200
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-light
- Weight
- 300
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-base
- Weight
- 400
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-normal
- Weight
- 400
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-semibold
- Weight
- 500
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-bold
- Weight
- 600
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-bolder
- Weight
- 700
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-weight-boldest
- Weight
- 800
- Example
- The quick brown fox jumps over the lazy dog.
Font size
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).
- Name
font-size-50
- Size
- 12px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-75
- Size
- 14px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-100
- Size
- 16px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-200
- Size
- 18px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-300
- Size
- 20px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-400
- Size
- 24px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-500
- Size
- 30px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-600
- Size
- 38px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-700
- Size
- 48px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-800
- Size
- 54px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-900
- Size
- 62px
- Example
- The quick brown fox jumps over the lazy dog.
The typography class names below are deprecated and have been updated to the new style that is the closest match. Avoid using them in new code, and refactor your existing code to remove instances of them. They will be removed in a future version of ESDS.
Display (deprecated)
- Name
display-1
- Example
Display 1
- Name
display-2
- Example
Display 2
- Name
display-3
- Example
Display 3
- Name
display-4
- Example
Display 4
Font size (deprecated)
- Name
font-size-xl
- Size
- 24px
- Example
- The quick brown fox jumps over the lazy dog.
- Name
font-size-xxl
- Size
- 30px
- Example
- The quick brown fox jumps over the lazy dog.