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

Small screens

Heading examples

<h1>H1. Example heading</h1>
<h2>H2. Example heading</h2>
<h3>H3. Example heading</h3>
<h4>H4. Example heading</h4>

Body content examples

<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>