Typography

Typography guideline is posted on 13 Nov 2018. (Style [email protected])

Text is important for users to digest content and accomplish their tasks. It’s important for our products to adopt good typographic principles to establish a clear visual hierarchy and to maximize legibility.

Font stacks

Operation system Font family
Windows Muli or Arial (fallback)
MacOS Muli or Helvetica Neue (fallback)
Android Roboto
iOS SF Pro

Our brand typeface

This is Muli

Muli is a minimalist Sans Serif typeface designed by Vernon Adams. Muli is mainly used as a display font and it is also used as a text font. Muli has been designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Web-Primary Print

Aa

Aa

Aa


Usage

We use a visual loudness guide to systematically describe the typographic style. Each style has a different “volume” corresponding to its intended visual prominence. This article highlights can help you understand the volume concept a little better. https://www.viget.com/articles/visual-loudness/.

Title Type (font-weight: bold;)
Style Mobile spec Beyond Mobile
Screaming title Use only ONCE per page
  • Font-size: 28px
  • Line-height: 36px
  • Font-size: 34px
  • Line-height: 44px
Yelling title Use only ONCE per page
  • Font-size: 24px
  • Line-height: 32px
  • Font-size: 28px
  • Line-height: 36px
Shouting title
  • Font-size: 20px
  • Line-height: 28px
  • Font-size: 24px
  • Line-height: 32px
Waving title
  • Font-size: 18px
  • Line-height: 24px
  • Font-size: 20px
  • Line-height: 28px
Whistling title
  • Font-size: 16px
  • Line-height: 24px
  • Font-size: 16px
  • Line-height: 24px
Paragraph / plain text type (font-weight: normal;)
Style Mobile spec Beyond Mobile

Loud & proud text

  • Font-size: 18px
  • Line-height: 24px
  • Font-size: 20px
  • Line-height: 28px
Daily conversational text
  • Font-size: 16px
  • Line-height: 24px
  • Font-size: 16px
  • Line-height: 24px
Intimate talk text
  • Font-size: 14px
  • Line-height: 20px
  • Font-size: 14px
  • Line-height: 20px
Whispering text
  • Font-size: 12px
  • Line-height: 16px
  • Font-size: 12px
  • Line-height: 16px