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

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.

HTML
<p>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.</p>