Typography

Font

Across our digital products, we use the font Segoe UI and support 5 different font weights. Using different weights is one way to increase visual hierarchy on a page.

Ref to 104:30443

Download Segoe UI font

 

Typography Scale

In order to keep our content hierarchy clean, we have a limited number of font sizes. These should cover all current use cases for minimal product UI, where our users’ content is the primary focus of an area or page.

 

Type Style Specs

Ag
Segoe UI Semibold 40px/52px
display3Strong
PT Conversion: 30
Ag
Segoe UI Bold 52px/70px
display1Stronger
PT Conversion: 39
Ag
Segoe UI Bold 32px/48px
title1Stronger
PT Conversion: 24
Ag
Segoe UI Semibold 24px/34px
title3Strong
PT Conversion: 18
Ag
Segoe UI Regular 24px/34px
title3
PT Conversion: 18
Ag
Segoe UI Bold 20px/28px
title4Stronger
PT Conversion: 15
Ag
Segoe UI Semibold 20px/28px
title4Strong
PT Conversion: 15
Ag
Segoe UI Regular 20px/28px
title4
PT Conversion: 15
Ag
Segoe UI Regular 10px/14px
caption2
PT Conversion: 7
Ag
Segoe UI Semibold 10px/14px
caption2Strong
PT Conversion: 7
Ag
Segoe UI Regular 12px/16px
caption1
PT Conversion: 9
Ag
Segoe UI Semibold 12px/16px
caption1Strong
PT Conversion: 9
Ag
Segoe UI Regular 14px/22px
body1
PT Conversion: 11
Ag
Segoe UI Semibold 14px/22px
body1Strong
PT Conversion: 11
Ag
Segoe UI Regular 14px/22px
body1Stronger
PT Conversion: 11
Ag
Segoe UI Semilight 16px/24px
body2Semilight
PT Conversion: 12
Ag
Segoe UI Regular 16px/24px
body2
PT Conversion: 12
Ag
Segoe UI Semibold 16px/24px
body2Strong
PT Conversion: 12
Ag
Segoe UI Bold 16px/24px
body2Stronger
PT Conversion: 12

 

How type translates to success

Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. In a business context, it plays a crucial role in communication, brand representation, and ultimately, the financial success of the company.

 

Efficient communication

An effective typography strategy ensures that your communications are clear, easy to understand, and leave a positive impression on your audience. Typography styles, such as weight and alignment, play a role in conveying order and consistency across the user interface which enhances understanding.

 

Different heading levels are indicated by distinct font sizes and weights, creating a clear structure. The use of contrast, color, and whitespace helps to differentiate between important and less crucial information allowing users to guide through content.

 

Customer engagement

Engaging customers is crucial for driving sales and revenue. Typography influences how people interact with your content, affecting the time they spend reading and the likelihood of converting.

 

Cost-effective

Efficient typography practices, such as consistent font usage and standardized design elements, contribute to the creation of templates and style guides. By establishing a cohesive visual identity, you can streamline the design process, saving time and resources when creating new products and experiences.


Coming soon - mobile & tablet font conversions