Typography tokens

v1.0.0

Semantic

Title	Value	Example
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

Title	Value	Relative value	Example
font.family.market-sans	Market Sans	-	Market Sans
font.letterSpacing.display1	-0.6px	-0.0375rem	Hello World
font.letterSpacing.display2	-0.72px	-0.045rem	Hello World
font.letterSpacing.display3	-0.92px	-0.0575rem	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

Title

Value

Example

typography.display1

fontSize:
font.size.giant3
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.display1
lineHeight:
font.lineHeight.600

typography.display2

fontSize:
font.size.giant2
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.display2
lineHeight:
font.lineHeight.575

typography.display3

fontSize:
font.size.giant1
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.display3
lineHeight:
font.lineHeight.500

typography.title1

fontSize:
font.size.large2
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.400

typography.title2

fontSize:
font.size.large1
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.350

typography.title3

fontSize:
font.size.medium
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.300

typography.subtitle1

fontSize:
font.size.large1
fontWeight:
font.weight.400
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.350

typography.subtitle2

fontSize:
font.size.medium
fontWeight:
font.weight.400
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.300

typography.body

fontSize:
font.size.body
fontWeight:
font.weight.400
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.250

typography.bodyBold

fontSize:
font.size.body
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.250

typography.caption

fontSize:
font.size.small
fontWeight:
font.weight.400
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.200

typography.captionBold

fontSize:
font.size.small
fontWeight:
font.weight.600
letterCase:
font.textCase.none
letterSpacing:
font.letterSpacing.none
lineHeight:
font.lineHeight.200

typography.signal1

fontSize:
font.size.body
fontWeight:
font.weight.400
letterCase:
font.textCase.uppercase
letterSpacing:
font.letterSpacing.signal1
lineHeight:
font.lineHeight.250

typography.signal2

fontSize:
font.size.smallest
fontWeight:
font.weight.600
letterCase:
font.textCase.uppercase
letterSpacing:
font.letterSpacing.signal2
lineHeight:
font.lineHeight.150

Title

Value

Relative value

Example

font.family.market-sans

Market Sans

font.letterSpacing.display1

-0.6px

-0.0375rem

Hello World

font.letterSpacing.display2

-0.72px

-0.045rem

Hello World

font.letterSpacing.display3

-0.92px

-0.0575rem

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

font.size.giant1

30px

1.875rem

font.size.giant2

36px

2.25rem

font.size.giant3

46px

2.875rem

font.size.large1

20px

1.25rem

font.size.large2

24px

1.5rem

font.size.medium

16px

1rem

font.size.small

12px

0.75rem

font.size.smallest

10px

0.625rem

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

font.weight.600

Bold