Typography
Tokens
Typography tokens are defined in 3 groups: style, size, and line-height tokens.
Style
Token
Exemplo
$font-weight-bold
Aa
$font-weight-regular
Aa
$text-transform-uppercase
AA
Size
Size tokens are very important because they emphasize information and determine the interface hierarchy.
As FCA products appear on different devices, the design team suggests developers use a responsive variable. Web browsers calculate REM (the root in size) based on the root element of each device. The usual for current Web browsers is 16px, so the conversion is: SP_SIZE / 16 = rem. As it is a variable that adapts to screens, we recommend using REM for web screens, SP for android, and PT for iOS solutions.
Designers need pixel proportions to build layouts depending on the resolution they are working on.
Token
Web
Android
or iOS
Pixel Full HD ( 1920 x 1080)
Pixel
HD (1280 x 720)
$font-size-0
1rem
16sp
16px
14px
$small-font-size-2
0.75rem
12sp
12px
10px
$small-font-size-1
0.875rem
14sp
14px
12px
$heading-font-size-4
1.25rem
20sp
20px
17px
$heading-font-size-3
1.5rem
24sp
24px
21px
$heading-font-size-2
2rem
32sp
32px
28px
$heading-font-size-1
2.5rem
40sp
40px
35px
$display-font-size-5
3rem
48sp
48px
42px
$display-font-size-4
4rem
64sp
64px
56px
$display-font-size-3
5rem
80sp
80px
70px
$display-font-size-4
6rem
96sp
96px
84px
$display-font-size-1
7rem
112sp
112px
98px
Line height
Token
line height
$line-height-text
*1.5
$line-height-heading
*1.25
Paragraph styles
Text
:)
Definition
Body 1 (primary text body)
Type: Helvetica neue; Size: $font-size-0; Line-height: $line-height-text; Weight: $font-weight-regular; Letter-spacing: 0px; Font-color: $color-brand-gray-150
------------------------ Adaptable tokens:
Weight, Font-color
Body 2
(most used in subtitles)
Type: Helvetica neue; Size: $small-font-size-1; Line-height: $line-height-text; Weight: $font-weight-regular; Letter-spacing: .32px; Font-color: $color-brand-gray-150
------------------------
Adaptable tokens:
Font-color
Caption
(most used in validation text)
Type: Helvetica neue; Size: $small-font-size-2; Line-height: $line-height-text; Weight: $font-weight-regular; Letter-spacing: .32px;
------------------------
Adaptable tokens:
Font-color
Default button
#btn-default
Type: Helvetica neue; Size: $small-font-size-1; Line-height: $line-height-text; Weight: $font-weight-regular; Letter-spacing: 40px;
Text transform: $text-transform-uppercase
------------------------
Adaptable tokens:
Font-color
Botão hover
#btn-hover
Type: Helvetica neue; Size: $small-font-size-1; / 14px Line-height: $line-height-text; / 21px Weight: $font-weight-bold; Letter-spacing: 40px;
Text transform: $text-transform-uppercase
------------------------
Adaptable tokens:
Font-color
Botão ativo
#btn-active
Type: Helvetica neue; Size: $small-font-size-1; / 14px Line-height: $line-height-text; / 21px Weight: $font-weight-bold; Letter-spacing: 40px;
Text transform: $text-transform-uppercase
------------------------
Adaptable tokens:
Font-color
Heading
:)
Definitions
H1
Type: Helvetica neue; Size: $heading-font-size-1; Line-height: $line-height-heading; Weight: $font-weight-bold; Letter-spacing: 0px; Font-color: $color-brand-primary
H2
Type: Helvetica neue; Size: $heading-font-size-2; Line-height: $line-height-heading; Weight: $font-weight-regular; Letter-spacing: .32; Font-color: $color-brand-primary
H3
Type: Helvetica neue; Size: $heading-font-size-3; Line-height: $line-height-heading; Weight: $font-weight-bold; Letter-spacing: .32; Font-color: $color-brand-primary
H4
Type: Helvetica neue; Size: $heading-font-size-4; Line-height: $line-height-heading; Weight: $font-weight-regular; Letter-spacing: 0px;
Font-color: $color-brand-primary
Display
The color and weight of the display styles may vary depending on the need. The possible colors are: $ color-white $ color-brand-gray-150 and $ color-brand-primary. The Display style is used in large-scale solutions, such as landing page titles. Use the Heading style for titles in digital products.
:)
Definições
Display 1
Type: Helvetica neue; Size: $display-font-size-1; Line-height: $line-height-heading;
Display 2
Type: Helvetica neue; Size: $display-font-size-2; Line-height: $line-height-heading;
Display 3
Type: Helvetica neue; Size: $display-font-size-3; Line-height: $line-height-heading;
Display 4
Type: Helvetica neue; Size: $display-font-size-4; Line-height: $line-height-heading;
Display 5
Type: Helvetica neue; Size: $display-font-size-5; Line-height: $line-height-heading;
Usage example
Last updated
Was this helpful?