Typography
Text is the primary way our users access information and complete tasks. Effective, accessible content relies on a clear font, consistent headings, succinct body text paragraphs, descriptive links, and scannable lists.
Typography brings consistency across experiences and platforms. Good typographic principles establish a clear visual hierarchy and to maximise readability.
Typography and accessibility
Energy Saving Trust Design System components meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1) for text spacing and AAA for visual presentation.
Typeface
Our core typeface is Poppins - a geometric sans serif designed by Jonny Pinhorn and Ninad Kale for Indian Type Foundry.
Poppins is an open source typeface available either as an embed or a download via Google Fonts and Adobe Fonts.
Type scale
The type scale changes based on screen size.
The scale for ‘large screens’ is used when the screen is wider than the tablet breakpoint (640px).
Large screens
| Element | Font size | Line height | Weight |
|---|---|---|---|
| H1 | 42.5px | 51px | SemiBold/600 |
| H2 | 33px | 40.80px | SemiBold/600 |
| H3 | 25px | 35.70px | SemiBold/600 |
| H4 | 19px | 30.60px | SemiBold/600 |
| H5 | tbc | tbc | SemiBold/600 |
| H6 | tbc | tbc | SemiBold/600 |
| p/body-01 | 17px | 26px | Regular/400 |
| body-02 | 16px | 19.20px | Regular/400 |
Small screens
| Element | Font size | Line height | Weight |
|---|---|---|---|
| H1 | 35px | 51px | SemiBold/600 |
| H2 | 27px | 40.80px | SemiBold/600 |
| H3 | 23px | 35.70px | SemiBold/600 |
| H4 | 19px | 30.60px | SemiBold/600 |
| H5 | tbc | tbc | SemiBold/600 |
| H6 | tbc | tbc | SemiBold/600 |
| p/body-01 | 17px | 26px | Regular/400 |
| body-02 | 16px | 19.20px | Regular/400 |
Headings
H1. Example heading
H2. Example heading
H3. Example heading
H4. Example heading
HTML
<h1>H1. Example heading</h1>
<h2>H2. Example heading</h2>
<h3>H3. Example heading</h3>
<h4>H4. Example heading</h4>Body content with links
At Energy Saving Trust we can make sure our digital products are accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. Read more about why HTML-first approach is essential to creating accessible products.
HTML
<p>At Energy Saving Trust we can make sure our digital products are accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. Read more about <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">why HTML-first approach is essential to creating accessible products</a>.</p>