Typography

Introduction

Typography ensures consistency, accessibility, and a cohesive brand identity across all digital products. Nova uses two primary fonts:

TT Norms

The official digital font for all interfaces, applications, and websites. TT Norms must be used across all digital products and user interfaces without exception.

Montserrat

Reserved for expressive, marketing, and branding purposes, such as print materials, social media, and video animations. Montserrat must not be used inside digital interfaces.

Typographic variants

Nova defines three main typography usages:

• Heading: titles and headings.
• Text: standard body text.
• Mono: code snippets, technical, and monospaced content.

Each variant comes with a set of sizes and weights.

Heading variants

Text variants

Mono variants

Global styues

Nova applies automatic default styling to core HTML tags such as:

• h1 to h5
• p
• span
• label
• legend
• small
• a

These elements are styled according to Nova standards and do not require manual overrides unless customization is explicitly needed.

How to use typography in code

Nova recommends using the full typography utility classes to ensure consistent and predictable styling. Each class already contains the font-size, font-weight, and line-height definitions.

Example usage

                                                        
                                                        
                                                            <h1 class="typo-heading-xl-bold">Main Title</h1>
                                                        
                                                        <p class="typo-text-md-regular">This is a paragraph of body text.</p>
                                                        
                                                        <code class="typo-mono-sm-regular">const foo = 'bar';</code>
                                                        
                                                            

While Tailwind atomic classes like text-4xl or font-bold are technically available, they should be avoided unless necessary. Using Nova's provided typography classes ensures visual consistency across all products.

Naming pattern

All typography utility classes follow this structure:

                                                        
                                                        
                                                            typo-[usage]-[size]-[weight]
                                                        
                                                            

Where:

• usage = heading, text, or mono
• size = xl, lg, md, sm, xs
• weight = regular, medium, or bold

References

• Typography styles in Figma
• Download Montserrat
• Request TT Norms Access
• Nova Configuration Guide for Typography Setup