Typography

Picking the perfect font is never easy. When choosing the right font for a user interface poses some unique challenges, here’s what to look for in a font for your UI: a font that performs well across contexts and devices. A face that looks just as pretty set at 72px as it does at 10px.

Type face

Elia Group use a typeface called Montserrat for almost everything related to Elia Group brand and marketing — from banner ads to print materials. This typeface should not be used for application UIs where we use a typeface called TT Norms Pro.

TT Norms
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()

Type scale

The type scale is a combination of height styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

Display md
text-d-md
Display md Regular
Display md Medium
Display md Bold
Display sm
text-d-sm
Display sm Regular
Display sm Medium
Display sm Bold
Display xs
text-d-sm
Display xs Regular
Display xs Medium
Display xs Bold
Heading xl
text-h-xl
Heading xl Regular
Heading xl Medium
Heading xl Bold
Heading lg
text-h-lg
Heading lg Regular
Heading lg Medium
Heading lg Bold
Heading md
text-h-md
Heading md Regular
Heading md Medium
Heading md Bold
Heading sm
text-h-sm
Heading sm Regular
Heading sm Medium
Heading sm Bold
Heading xs
text-h-xs
Heading xs Regular
Heading xs Medium
Heading xs Bold
Text xl
text-xl
Text xl Regular
Text xl Medium
Text xl Bold
Text lg
text-lg
Text lg Regular
Text lg Medium
Text lg Bold
Text md
text-md
Text md Regular
Text md Medium
Text md Bold
Text sm
text-sm
Text sm Regular
Text sm Medium
Text sm Bold
Text xs
text-xs
Text xs Regular
Text xs Medium
Text xs Bold

Type weight

There are three font weights available to use — Regular (Normal), Medium and Bold. Use them for all headlines, subtitles, body, and captions, creating a cohesive typography experience.

Aa
400
Aa
500
Aa
700

Figma Tokens

Nova uses design tokens with Figma Tokens, a plugin for Figma allowing you to define and use design tokens in Figma. You can store your design tokens in JSON, sync them with a sync provider such as GitHub and define tokens even for properties that have no native support yet in Figma, such as borderRadius or spacing.

You can learn more about Figma Tokens here.

On this page