Typography reference for the definition, organization and hierarchy of the content.
Font Family
The client has approved Arial typeface which must be used for all phases and parts of the project.
html {
font-family: Arial;
}
However, we need to remember that 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.
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
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
36px
1.25
.font-size-display
--font-size-display
Heading1
32px
1.25
.heading1
--font-size-h1
Heading2
28px
1.25
.heading2
--font-size-h2
Heading3
26px
1.25
.heading3
--font-size-h3
Heading4
22px
1.25
.heading4
--font-size-h4
Heading5
20px
1.25
.heading5
--font-size-h5
Heading6
18px
1.25
.heading6
--font-size-h6
Body
16px
1.5
.font-size-base
--font-size-base
Body Small
14px
1.5
.font-size-s
--font-size-s
Body Extra Small
12px
1.5
.font-size-xs
--font-size-xs
Display
34px
1.25
.font-size-display
--font-size-display
Heading1
30px
1.25
.heading1
--font-size-h1
Heading2
26px
1.25
.heading2
--font-size-h2
Heading3
24px
1.25
.heading3
--font-size-h3
Heading4
21px
1.25
.heading4
--font-size-h4
Heading5
19px
1.25
.heading5
--font-size-h5
Heading6
17px
1.25
.heading6
--font-size-h6
Body
16px
1.5
.font-size-base
--font-size-base
Body Small
14px
1.5
.font-size-s
--font-size-s
Body Extra Small
12px
1.5
.font-size-xs
--font-size-xs
Display
32px
1.25
.font-size-display
--font-size-display
Heading1
28px
1.25
.heading1
--font-size-h1
Heading2
24px
1.25
.heading2
--font-size-h2
Heading3
22px
1.25
.heading3
--font-size-h3
Heading4
20px
1.25
.heading4
--font-size-h4
Heading5
18px
1.25
.heading5
--font-size-h5
Heading6
16px
1.25
.heading6
--font-size-h6
Body
16px
1.5
.font-size-base
--font-size-base
Body Small
14px
1.5
.font-size-s
--font-size-s
Body Extra Small
12px
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