Github

Typography

Use typography scales and semantic text styles to maintain readable, brand-aligned content hierarchy.

Overview

The Vroxal typography system provides a comprehensive set of predefined semantic mappings and typography classes. All text must use these predefined scales — never choose size based on visual preference. Choose based on semantic intent.

Type face

Vroxal uses Poppins as its default typeface.

Poppins

Consumer

Font weight

Vroxal uses four font weights across all its brand variants. The following font weights are used by different brand

Regular

400

Medium

500

SemiBold

600

Type Scale

The typography scale provides predefined sizes with corresponding line heights and letter spacing for optimal readability and hierarchy.

Display Large (60px)

Weight: 600 | Line: 72px | Letter: -1.5px

Display Medium (48px)

Weight: 600 | Line: 56px | Letter: -1px

Display Small (40px)

Weight: 600 | Line: 48px | Letter: -0.5px

Headline Large (34px)

Weight: 600 | Line: 40px | Letter: -0.3px

Headline Medium (28px)

Weight: 600 | Line: 36px | Letter: -0.3px

Headline Small (24px)

Weight: 600 | Line: 32px | Letter: -0.3px

Title Large (20px)

Weight: 600 | Line: 28px | Letter: 0px

Title Medium (16px)

Weight: 600 | Line: 24px | Letter: 0px

Title Small (14px)

Weight: 600 | Line: 20px | Letter: 0px

Body Extra Large — The quick brown fox jumps over the lazy dog

Weight: 400 | Emphasis reading

Body Large — The quick brown fox jumps over the lazy dog and runs away into the forest

Weight: 400 | Line: 24px | Letter: 0px

Body Medium — The quick brown fox jumps over the lazy dog and runs away into the forest where it lives

Weight: 400 | Line: 24px | Letter: 0px

Body Small — The quick brown fox jumps over the lazy dog and runs away into the forest where it lives happily

Weight: 400 | Line: 16px | Letter: 0px

Body Extra Small — The quick brown fox jumps over the lazy dog

Weight: 400 | Metadata

Label Large (16px)

Weight: 500 | Line: 24px | Letter: 0.2px

Label Medium (14px)

Weight: 500 | Line: 24px | Letter: 0.2px

Label Small (12px)

Weight: 500 | Line: 16px | Letter: 0.2px

Label Extra Small

Weight: 500 | Dense UI

Semantic HTML Mapping

Each HTML element is mapped to a specific typography level based on its semantic purpose. Use these mappings to ensure consistent hierarchy across all pages.

Element
Typography Level
Purpose
h1
display-large
Page hero heading
h2
display-medium
Section hero
h3
display-small
Section heading
h4
headline-large
Major subsection
h5
headline-medium
Subsection
h6
headline-small
Minor heading
p
body-medium
Default reading text
a
label-medium
Interactive text
button
label-medium
Action text
label
label-medium
Form labels

Type Scale Reference

Complete reference table for all typography tokens:

Name
Size
Line Height
Weight
Letter Spacing
Display Large
60px
72px
600
-1.5px
Display Medium
48px
56px
600
-1px
Display Small
40px
48px
600
-0.5px
Headline Large
34px
40px
600
-0.3px
Headline Medium
28px
36px
600
-0.3px
Headline Small
24px
32px
600
-0.3px
Title Large
20px
28px
600
0px
Title Medium
16px
24px
600
0px
Title Small
14px
20px
600
0px
Body Extra Large
18px
28px
400
0px
Body Large
16px
24px
400
0px
Body Medium
14px
24px
400
0px
Body Small
12px
16px
400
0px
Body Extra Small
10px
14px
400
0px
Label Large
16px
24px
500
0.2px
Label Medium
14px
24px
500
0.2px
Label Small
12px
16px
500
0.2px
Label Extra Small
10px
14px
500
0.2px

Utility Classes

Use classes when semantic HTML is not sufficient. Apply these classes directly to elements to override their default typography.

Display

.display-large.display-medium.display-small

Headline

.headline-large.headline-medium.headline-small

Title

.title-large.title-medium.title-small

Body

.body-extra-large.body-large.body-medium.body-small.body-extra-small

Label

.label-large.label-medium.label-small.label-extra-small

Usage Guidelines

Applying Typography

Use utility classes to ensure consistent sizing and styling:

typography-usage.html

Copy code

Using Font Families

Font family automatically adjusts based on the active brand:

font-families.css

Copy code

Brand Variants

Switch between brand variants to change the active font family:

brand-variants.html

Copy code

Color Rules

Text color must use var(--vd-color-content-default-base). Do not override unless using a semantic color token.

color-rules.css

Copy code

Best Practices

Typography Decision Flow

  • Is it a page hero? → Use display scale
  • Is it section structure? → Use headline scale
  • Is it a component title? → Use title scale
  • Is it reading content? → Use body scale
  • Is it UI control text? → Use label scale

Disallowed Practices

  • Do not style headings manually with custom font sizes or weights.
  • Do not create custom text classes outside of the VD typography system.
  • Do not mix typography levels arbitrarily across components.
  • Do not skip hierarchy levels (e.g., jumping from display to body).
  • Do not use <h1> multiple times per page hero context.

Do's and Don'ts

do.css

Copy code

dont.css

Copy code