Typography System - ERS Energy | Brand values which defines us

Overview

This design system defines the typography scale for ERS Energy applications using the Inter font family. All sizes are based on a scalable system where the title size (48px) serves as the foundation.

Brand Typography

Inter is the selected font that resonates with our brand. It is clear, solid and modern — traits that convey the brand’s character and an ideal representative of the brand’s voice. Inter was selected for its wide range of weights (Thin to Black) and as an open-sourced font, it is readily available on websites and digital devices globally.

Primary Font Weights

Inter Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Inter Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Inter Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Secondary Font Weights

Inter Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Inter Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Inter Thin

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Inter Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Typography Scale

Complete type scale with sizes, weights, and color assignments.

Style	Size	Weight	Color	Usage
Title	48px	300 (Light)	#1a1a1a	Main headings, hero text
Sub-title	24px	500 (Medium)	#1a1a1a	Section headers
Text	16px	400 (Regular)	#1a1a1a	Primary body text
Text (Light)	16px	400 (Regular)	#666666	Secondary body text
Text (Lighter)	16px	300 (Light)	#999999	Tertiary body text
Highlight Title	14px	400 (Regular)	#999999	Metric labels, small headers
Highlight Value	32px	700 (Bold)	#1a1a1a	Important metrics, KPIs
Flavour Text	14px	300 (Light)	#b3b3b3	Supporting text, hints

Type Scale Preview

Interactive preview of all type sizes in the scale.

5XL

The quick brown fox

48px / Light

4XL

The quick brown fox

40px / Regular

3XL

The quick brown fox

32px / Semibold

2XL

The quick brown fox

24px / Medium

XL

The quick brown fox

20px / Medium

LG

The quick brown fox

18px / Medium

Base

The quick brown fox

16px / Regular

SM

The quick brown fox

14px / Regular

XS

The quick brown fox

12px / Medium

Live Examples

Preview of typography styles in context.

Headings & Body Text

Title

Sub-title

Text (Primary)

Text (Light)

Text (Lighter)

Highlight & Flavour

Highlight title

Highlight value

Flavour text – supporting hints and disclaimers

Font Weights

Available font weights in the Inter font family.

Thin (100) – The quick brown fox

Light (300) – The quick brown fox

Regular (400) – The quick brown fox

Medium (500) – The quick brown fox

Semibold (600) – The quick brown fox

Bold (700) – The quick brown fox

Black (900) – The quick brown fox

Italic (400) – The quick brown fox

Text Colors

Color palette for text hierarchy.

Primary

#1a1a1a

Secondary

#666666

Tertiary

#999999

Muted

#b3b3b3

Try It: Live Font Preview

Type your own text to see how it looks in Inter at different weights. Click any weight to copy its CSS.

Type Your Text

CSS Variables

Copy and paste these variables into your stylesheet.

Typography Token Variables

:root {
  /* Font Sizes */
  –font-size-xs: 12px;
  –font-size-sm: 14px;
  –font-size-base: 16px;
  –font-size-lg: 18px;
  –font-size-xl: 20px;
  –font-size-2xl: 24px;
  –font-size-3xl: 32px;
  –font-size-4xl: 40px;
  –font-size-5xl: 48px;

  /* Font Weights */
  –font-weight-thin: 100;    /* Secondary */
  –font-weight-light: 300;   /* Primary */
  –font-weight-regular: 400; /* Primary */
  –font-weight-medium: 500;  /* Secondary */
  –font-weight-semibold: 600;
  –font-weight-bold: 700;    /* Primary */
  –font-weight-black: 900;   /* Secondary */

  /* Text Colors */
  –color-text-primary: #1a1a1a;
  –color-text-secondary: #666666;
  –color-text-tertiary: #999999;
  –color-text-muted: #b3b3b3;

  /* Line Heights */
  –line-height-tight: 1.2;
  –line-height-snug: 1.375;
  –line-height-normal: 1.5;
  –line-height-relaxed: 1.625;
}

Usage Guidelines

Best practices for using typography in the ERS Energy design system.

Hierarchy Best Practices

Use Title sparingly – only for main page headings
Use Sub-title for section headers and important divisions
Use Text levels to create visual hierarchy without changing font size
Pair Highlight title with Highlight value for metrics
Use Flavour text for hints, disclaimers, and supporting content

Responsive Scaling

For mobile devices, reduce title sizes by approximately 25%:

@media (max-width: 768px) {
  :root {
    –font-size-5xl: 36px;
    –font-size-4xl: 32px;
    –font-size-3xl: 26px;
    –font-size-2xl: 22px;
  }
}