Typography
Typography reference for the definition, organization and hierarchy of the content.
Font Family
OutSystems UI applies the system default font family for each operating system, using a CSS rule. This guarantees great readability, speed, and performance. The table below presents the respective font accordingly to each operating system.
Chrome OS & Android
Roboto
Web fallbacks
Arial, Helvetica Neue, sans-serif
Emoji Fonts
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
Font Size
The type scale features a combination of 10 styles for font size including Display, Headings and Body text.
Display is intended for use at large sizes. Headings are reserved for short and important text or numerals.
Body is used for long-form writing, Body Small for the general UI elements, and Body Extra Small for accessory information.
Display
CSS Val
CSS Val
.font-size-display
--font-size-display
Heading1
CSS Val
CSS Val
.heading1
--font-size-h1
Heading2
CSS Val
CSS Val
.heading2
--font-size-h2
Heading3
CSS Val
CSS Val
.heading3
--font-size-h3
Heading4
CSS Val
CSS Val
.heading4
--font-size-h4
Heading5
CSS Val
CSS Val
.heading5
--font-size-h5
Heading6
CSS Val
CSS Val
.heading6
--font-size-h6
Body
CSS Val
1.5
.font-size-base
--font-size-base
Body Small
CSS Val
1.5
.font-size-s
--font-size-s
Body Extra Small
CSS Val
1.5
.font-size-xs
--font-size-xs
Display
CSS Val
CSS Val
.font-size-display
--font-size-display
Heading1
CSS Val
CSS Val
.heading1
--font-size-h1
Heading2
CSS Val
CSS Val
.heading2
--font-size-h2
Heading3
CSS Val
CSS Val
.heading3
--font-size-h3
Heading4
CSS Val
CSS Val
.heading4
--font-size-h4
Heading5
CSS Val
CSS Val
.heading5
--font-size-h5
Heading6
CSS Val
CSS Val
.heading6
--font-size-h6
Body
CSS Val
1.5
.font-size-base
--font-size-base
Body Small
CSS Val
1.5
.font-size-s
--font-size-s
Body Extra Small
CSS Val
1.5
.font-size-xs
--font-size-xs
Display
CSS Val
CSS Val
.font-size-display
--font-size-display
Heading1
CSS Val
CSS Val
.heading1
--font-size-h1
Heading2
CSS Val
CSS Val
.heading2
--font-size-h2
Heading3
CSS Val
CSS Val
.heading3
--font-size-h3
Heading4
CSS Val
CSS Val
.heading4
--font-size-h4
Heading5
CSS Val
CSS Val
.heading5
--font-size-h5
Heading6
CSS Val
CSS Val
.heading6
--font-size-h6
Body
CSS Val
1.5
.font-size-base
--font-size-base
Body Small
CSS Val
1.5
.font-size-s
--font-size-s
Body Extra Small
CSS Val
1.5
.font-size-xs
--font-size-xs
Font Weight
There are 4 font weights available to use — Light, Regular, Semibold and Bold.
Text Transform
Transform text with text transformation classes — Lowercased, Uppercased, Capitalized and Ellipsis text.
lowercased text
Lowercase
.text-lowercase
uppercased text
Uppercase
.text-uppercase
capitalized text
Capitalize
.text-capitalize
Ellipsis Text
Ellipsis
.text-ellipsis