Typography
Last updated
Was this helpful?
Last updated
Was this helpful?
Typography tokens are defined in 3 groups: style, size, and line-height tokens.
Token
Exemplo
$font-weight-bold
Aa
$font-weight-regular
Aa
$text-transform-uppercase
AA
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
Token
line height
$line-height-text
*1.5
$line-height-heading
*1.25
:)
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
:)
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
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;
