/ Typography
NOTUM Brand

Brand Guidelines · Typography

Typography

Typography shapes how a brand sounds before a single word is read. Our type system is built for clarity, consistency, and character.

Primary Typeface

Manrope

We use one font family for all environments—Manrope from Mikhail Sharanda—for all print, web, and broadcast media. Manrope family is available here.

Headlines

Headline 1 <h1>
Font: Manrope
Size: 60 px; 3.75 REM
Weight: 600 (Semibold)
Line height: 120%; 4.5 REM
Letter spacing: -4%; -0.15 REM
Headline 2 <h2>
Font: Manrope
Size: 44 px; 2.75 REM
Weight: 600 (Semibold)
Line height: 125%; 3.4375 REM
Letter spacing: -2%; -0.055 REM
Headline 3 <h3>
Font: Manrope
Size: 32 px; 2 REM
Weight: 600 (Semibold)
Line height: 130%; 2.6 REM
Letter spacing: -2%; -0.04 REM
Headline 4 <h4>
Font: Manrope
Size: 24 px; 1.5 REM
Weight: 600 (Semibold)
Line height: 140%; 2.1 REM
Letter spacing: -2%; -0.03 REM
Headline 5 <h5>
Font: Manrope
Size: 20 px; 1.25 REM
Weight: 600 (Semibold)
Line height: 140%; 1.75 REM
Letter spacing: -2%; -0.025 REM
Tagline
Font: Manrope
Size: 16 px; 1 REM
Weight: 700 (Bold)
Line height: 120%; 1.2 REM
Letter spacing: 0%

Body Text

Body Text XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation inline link.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font: Manrope
Size: 24 px; 1.5 REM
Weight: 400 (Regular)
Line height: 140%; 2.1 REM
Letter spacing: 0%
List spacing: 16 px
Paragraph spacing: 16 px
Body Text L

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation inline link.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font: Manrope
Size: 18 px; 1.125 REM
Weight: 400 (Regular)
Line height: 150%; 1.6875 REM
Letter spacing: 0%
List spacing: 12 px
Paragraph spacing: 16 px
Body Text M

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation inline link.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font: Manrope
Size: 16 px; 1 REM
Weight: 400 (Regular)
Line height: 150%; 1.5 REM
Letter spacing: 0%
List spacing: 12 px
Paragraph spacing: 12 px
Body Text S

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation inline link.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font: Manrope
Size: 14 px; 0.875 REM
Weight: 400 (Regular)
Line height: 150%; 1.3125 REM
Letter spacing: 0%
List spacing: 8 px
Paragraph spacing: 8 px

Global Link Style

Ensure all links are consistently styled with the same font as the body text, always underlined.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation inline link. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Types of Lists

Unordered List
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6

Unordered lists are used to present items where the sequence doesn't matter. They are typically bulleted, which makes them suitable for listing items of equal importance or categories that don't follow a particular order.

Characteristics:

  • Items are marked with bullets (•, etc.).
  • No specific order or sequence.
  • Useful for lists where order is not important, such as features, ingredients, or options.
Ordered List
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5
  6. List item 6

Ordered lists are used to present items in a specific sequence. They are often numbered, which makes them ideal for instructions, steps in a process, or any situation where the order of items matters.

Characteristics:

  • Items are numbered (1, 2, 3, etc.).
  • Indicates a specific order or sequence.
  • Useful for instructions, steps, and rankings.