NordSecurity.Design
Last update: 21.05.2026

Typography

Overview

Overview

These guidelines summarize how we use typography, and serve as guidelines to design freely with best typographic practices in mind.

Styles

Heading

Headings provide a content hierarchy on your page. These should be consistent and semantically applied. This will make information concise and easily scannable, to deliver the most important information to the user.

  • Text style: heading/xl/heading-3xl/heading-3xl — font-family:'Inter', 'Inter-SemiBold'; font-size: 64px; letter-spacing: -0.8px; line-height: 84px; font-weight: 600; color:black;

  • Text style: heading/xl/heading-md/heading-md — font-family:'Inter', 'Inter-SemiBold'; font-size: 28px; letter-spacing: 0px; line-height: 40px; font-weight: 600; color:black;

  • Text style: heading/xl/heading-sm/heading-sm — font-family:'Inter', 'Inter-SemiBold'; font-size: 22px; letter-spacing: 0px; line-height: 30px; font-weight: 600; color:black;

  • Text style: heading/xl/heading-xl/heading-xl — font-family:'Inter', 'Inter-SemiBold'; font-size: 40px; letter-spacing: -0.3px; line-height: 52px; font-weight: 600; color:black;

  • Text style: heading/xl/heading-2xl/heading-2xl — font-family:'Inter', 'Inter-SemiBold'; font-size: 48px; letter-spacing: -0.5px; line-height: 64px; font-weight: 600; color:black;

  • Text style: heading/xl/heading-lg/heading-lg — font-family:'Inter', 'Inter-SemiBold'; font-size: 32px; letter-spacing: -0.3px; line-height: 44px; font-weight: 600; color:black;

Body

Use the body text for paragraphs and any blocks of text you might need. body-md is our default text size with 16px, which equals 1 rem.

  • Text style: body/body-md/regular/regular — font-family:'Inter'; font-size: 16px; letter-spacing: 0px; line-height: 24px; font-weight: 400; color:black;

  • Text style: body/body-xs/regular/regular — font-family:'Inter'; font-size: 12px; letter-spacing: 0px; line-height: 18px; font-weight: 400; color:black;

  • Text style: body/body-lg/regular/regular — font-family:'Inter'; font-size: 20px; letter-spacing: 0px; line-height: 30px; font-weight: 400; color:black;

  • Text style: body/body-sm/regular/regular — font-family:'Inter'; font-size: 14px; letter-spacing: 0px; line-height: 21px; font-weight: 400; color:black;

  • Text style: body/body-2xs/medium/medium — font-family:'Inter', 'Inter-Medium'; font-size: 10px; letter-spacing: 0px; line-height: 15px; font-weight: 500; color:black;

Responsive scaling

Only our headings support automatic responsive scaling depending on the breakpoint. The following table visualizes the scaling, all values are font sizes in px:

xl lg md sm + xs
heading-3xl 64 (4rem) 52 (3.25rem) 42 (2.625rem) 32 (2rem)
heading-2xl 48 (3rem) 40 (2.5rem) 36 (2.25rem) 30 (1.875rem)
heading-xl 40 (2.5rem) 36 (2.25rem) 32 (2rem) 28 (1.75rem)
heading-lg 32 (2rem) 30 (1.875rem) 28 (1.75rem) 26 (1.625rem)
heading-md 28 (1.75rem) 26 (1.625rem) 26 (1.625rem) 24 (1.5rem)
heading-sm 22 (1.375rem) 22 (1.375rem) 20 (1.25rem) 20 (1.25rem)

Tokens

Tokens

Typography tokens are the smallest building blocks that help us approach our Typography as a system instead of one off solutions. They help us create a range of styles that can be used and applied to a variety of components, use cases and layout solutions.

These tokens here are for giving an overview of the used values, please refrain from creating a new text styles out of them that is not documented in the system.

fontFamily

Tokens used to define the typeface

Token Value
inter Inter

fontSize

Font size scale

Token Value
2xs 0.625rem (10px)
xs 0.75rem (12px)
sm 0.875rem (14px)
md 1rem (16px)
lg 1.25rem (20px)
xl 1.375rem (22px)
2xl 1.75rem (28px)
3xl 2rem (32px)
4xl 2.5rem (40px)
5xl 3rem (48px)
6xl 4rem (64px)

fontWeight

Tokens to be used to define the weight of the font

Token Value
normal 400 (Inter-regular)
medium 500 (Inter-medium)
bold 600 (Inter-semibold)

lineHeight

Tokens for line height / leading

Token Value
none 1
2xs 1.2
xs 1.3
sm 1.4
md 1.5
lg 1.7
xl 2

letterSpacing

These tokens describe the different spacing between each letter of the font

Token Value
2xs -0.047rem (-0.75px)
xs -0.031rem (-0.5px)
sm -0.016rem (-0.25px)
md 0rem (0px)
lg 0.016rem (0.25px)
xl 0.031rem (0.5px)
2xl 0.047rem (0.75px)

Internationalization for fontFamily

Tokens that are adjusted automatically depending on the language used. In the internationalization version, both font-heading and font-body share the same font.

Language Value
ar Noto Sans Arabic
he Noto Sans Hebrew
th Noto Sans Thai
ja Noto Sans Japanese
ko Noto Sans Korean
zh-cn Noto Sans SC
zh-Hant Noto Sans TC

Usage

Usage Guidelines

Correct application of our typography guidelines create a content hierarchy that is scannable and efficient. Our typography system, as well, provides a purposeful yet flexible set of styles that help us present our content as clearly as possible.

DoOnly use text style tokens provided by the system.
Don’tDon’t adjust text style values manually.
DoRespect the semantic meaning of the text styles. We use it to describe content structure visually and programmatically to communicate more effectively to more users.
Don’tDon’t break semantics and structure by randomly mixing heading and body styles.
DoFor smaller text use only the provided text styles and use them rarely as the smaller the text is the hard it is to read for the user .
Don’tNever use any font-size under 10px, at this point the text gets too hard to read for the majority of users.
DoIf you need to highlight parts of a text only do so with marking the text bold or adding a small blue accent.
Don’tDon’t use an underline or higher fontSize in the same paragraph block to highlight text.