Skip to main contenteBay Playbook

Typography tokens

Semantic

TitleValueExample
typography.display1
  • fontSize:
    font.size.giant3
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.display1
  • lineHeight:
    font.lineHeight.600
Aa
typography.display2
  • fontSize:
    font.size.giant2
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.display2
  • lineHeight:
    font.lineHeight.575
Aa
typography.display3
  • fontSize:
    font.size.giant1
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.display3
  • lineHeight:
    font.lineHeight.500
Aa
typography.title1
  • fontSize:
    font.size.large2
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.400
Aa
typography.title2
  • fontSize:
    font.size.large1
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.350
Aa
typography.title3
  • fontSize:
    font.size.medium
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.300
Aa
typography.subtitle1
  • fontSize:
    font.size.large1
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.350
Aa
typography.subtitle2
  • fontSize:
    font.size.medium
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.300
Aa
typography.body
  • fontSize:
    font.size.body
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.250
Aa
typography.bodyBold
  • fontSize:
    font.size.body
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.250
Aa
typography.caption
  • fontSize:
    font.size.small
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.200
Aa
typography.captionBold
  • fontSize:
    font.size.small
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.200
Aa
typography.signal1
  • fontSize:
    font.size.body
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.uppercase
  • letterSpacing:
    font.letterSpacing.signal1
  • lineHeight:
    font.lineHeight.250
Aa
typography.signal2
  • fontSize:
    font.size.smallest
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.uppercase
  • letterSpacing:
    font.letterSpacing.signal2
  • lineHeight:
    font.lineHeight.150
Aa

Core

TitleValueRelative valueExample
font.family.market-sans
Market Sans
-
Market Sans
font.letterSpacing.display1
-0.92px
-0.0575rem
Hello World
font.letterSpacing.display2
-0.72px
-0.045rem
Hello World
font.letterSpacing.display3
-0.6px
-0.0375rem
Hello World
font.letterSpacing.none
0px
-
Hello World
font.letterSpacing.signal1
0.7px
0.04375rem
Hello World
font.letterSpacing.signal2
0.5px
0.03125rem
Hello World
font.lineHeight.150
12px
0.75rem
Hello
World
font.lineHeight.200
16px
1rem
Hello
World
font.lineHeight.250
20px
1.25rem
Hello
World
font.lineHeight.300
24px
1.5rem
Hello
World
font.lineHeight.350
28px
1.75rem
Hello
World
font.lineHeight.400
32px
2rem
Hello
World
font.lineHeight.500
40px
2.5rem
Hello
World
font.lineHeight.575
46px
2.875rem
Hello
World
font.lineHeight.600
56px
3.5rem
Hello
World
font.paragraphSpacing.none
0px
-
Hello World
font.size.body
14px
0.875rem
Aa
font.size.giant1
30px
1.875rem
Aa
font.size.giant2
36px
2.25rem
Aa
font.size.giant3
46px
2.875rem
Aa
font.size.large1
20px
1.25rem
Aa
font.size.large2
24px
1.5rem
Aa
font.size.medium
16px
1rem
Aa
font.size.small
12px
0.75rem
Aa
font.size.smallest
10px
0.625rem
Aa
font.textCase.none
none
-
Hello World
font.textCase.uppercase
uppercase
-
Hello World
font.textDecoration.none
none
-
Hello World
font.textDecoration.underline
underline
-
Hello World
font.weight.400
Regular
-
Aa
font.weight.600
Bold
-
Aa