Skip to main content

Typography

Last updated on

Typeface

We use Inter typeface to establish visual hierarchy through style, weight to support deliberate communications for all platforms.

Font size

TokenFont sizeUsages
font-size-5x-large48pxHeader
font-size-4x-large32pxHeader
font-size-3x-large28pxHeader
font-size-2x-large24pxHeader
font-size-x-large20pxHeader, body text
font-size-large18pxHeader, body text
font-size-medium16pxBody text
font-size-base14pxBody text
font-size-small12pxDescription, caption
font-size-x-small10pxDescription, caption

Line height

TokenLine height
font-height-default1.5

Font weight

In most cases, just Regular 400 and Medium 500 should be enough. In the case of important information, bold 700 could be used.

TokenFont weight
font-weight-blackBlack 900
font-weight-boldBold 700
font-weight-mediumMedium 500
font-weight-regularRegular 400
font-weight-lightLight 300
font-weight-thinThin 100

Font style

TokenStyle
font-style-normalNormal
font-style-underlineUnderline
font-style-strikethroughStrikethrough

Usage guidelines

Use sentence case

We use sentence case for all titles, labels, etc... And use title case for proper nouns, product names. Avoid the use of all uppercase or all caps

Use currency symbol (₫)

for Vietnamese products

Decimal & thousands separators

for Vietnamese products

In Vietnam, We use the period to separate thousands and the comma to separate decimal.

Date & time format

  • Date: DD/MM/YYYY
  • Time: hh:mm, 24-hr