logo

Typography

The typography system establishes a coherent information hierarchy with assured legibility, contrast, and identity across the platform. The type system is for all the products and marketing web pages.

Font stack

VTS uses one font family for both title and body font: Inter



Headings

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
234567890
?!./_+()*&^%$#@

Body

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
234567890
?!./_+()*&^%$#@

List and usage

Semantic text provides meaning to the typography and create information hierachy.

Follow the guidelines below.

Display

Better system, better product

Family: Inter
Weight: bold (700)
Size: 50px
LH: 56px
LS: 0
  • Display is the most prominent text on the landing page.
  • They’re used for brief important text within three lines.
  • Only use once per page.

Headline

Better system, better product

Family: Inter
Weight: bold (700)
Size: 32px
LH: 40px
LS: 0
  • Use Headline for brief important text or numbers, like a page or a modal title
  • Only use once per page.

Headline de-emphasis

Better system, better product

Family: Inter
Weight: semibold (600)
Size: 32px
LH: 40px
LS: 0
  • The same usage as Headline. Using this version when Headline is too bold.

Title

Better system, better product

Family: Inter
Weight: bold (700)
Size: 24px
LH: 32px
LS: 0
  • Use Title as default title style for top-level page sections.
  • It can be used multiple times on a page, but use them sparingly.

Title de-emphasis

Better system, better product

Family: Inter
Weight: semibold (600)
Size: 24px
LH: 32px
LS: 0
  • Use Title de-emphasis if the default title style is too heavy in context.
  • Title de-emphasis may be used to display the title numbers in metric.

Subtitle

Better system, better product

Family: Inter
Weight: bold (700)
Size: 18px
LH: 28px
LS: 0
  • Use Subtitle as subtitles under headlines.
  • It may also be used to style list and table‘s name.

Subtitle de-emphasis

Better system, better product

Family: Inter
Weight: semibold (600)
Size: 18px
LH: 28px
LS: 0
  • Use Subtitle as subtitles under headlines.
  • It may also be used to style list and table‘s name.

Body large

Better system, better product
Family: Inter
Weight: regular (400)
Size: 16px
LH: 24px
LS: 0
  • Use Body large for paragraph text, field copy, and buttons.
  • It is generally used as the default body text.

Body large emphasis

Better system, better product
Family: Inter
Weight: semibold (600)
Size: 16px
LH: 24px
LS: 0
  • Use Body large emphasis to emphasize the keywords in the sentences using Large body.
  • Use sparsely across the platform.

Body medium

Better system, better product
Family: Inter
Weight: regular (400)
Size: 14px
LH: 20px
LS: 0
  • Use Body medium when the page is information-dense that Body large doesn’t work.
  • Use body medium as the default style for labels.
  • It can be used as the sub-body when paired with Body large.

Body medium emphasis

Better system, better product
Family: Inter
Weight: semibold (600)
Size: 14px
LH: 20px
LS: 0
  • Use Body medium emphasis to emphasize the important keywords in the sentences using Body medium.
  • Use sparsely across the platform.

Body small

Better system, better product
Family: Inter
Weight: regular (400)
Size: 12px
LH: 16px
LS: 0
  • Use Body small as micro-copy and annotations.

Body small emphasis

Better system, better product
Family: Inter
Weight: semibold (600)
Size: 12px
LH: 16px
LS: 0
  • Use Body small as micro-copy and annotations.

Body extra small

Better system, better product
Family: Inter
Weight: regular (400)
Size: 10px
LH: 14px
LS: 0
  • Use Body extra small as annotations for data dense areas like table cells and chart annotations.