Font
Global
Family
Token | Value | Example |
---|---|---|
--jh-font-family-roboto Roboto font family |
'Roboto', 'Helvetica Neue', sans-serif |
Aa
|
Weight
Token | Value | Example |
---|---|---|
--jh-font-weight-300 Font weight 300 |
300 |
Aa
|
--jh-font-weight-400 Font weight 400 |
400 |
Aa
|
--jh-font-weight-500 Font weight 500 |
500 |
Aa
|
--jh-font-weight-700 Font weight 700 |
700 |
Aa
|
Size
Token | Value | Example |
---|---|---|
--jh-font-size-250 Font size 250 |
10px |
Aa
|
--jh-font-size-300 Font size 300 |
12px |
Aa
|
--jh-font-size-350 Font size 350 |
14px |
Aa
|
--jh-font-size-400 Font size 400 |
16px |
Aa
|
--jh-font-size-450 Font size 450 |
18px |
Aa
|
--jh-font-size-500 Font size 500 |
20px |
Aa
|
--jh-font-size-600 Font size 600 |
24px |
Aa
|
--jh-font-size-700 Font size 700 |
28px |
Aa
|
--jh-font-size-800 Font size 800 |
32px |
Aa
|
--jh-font-size-900 Font size 900 |
36px |
Aa
|
--jh-font-size-1050 Font size 1050 |
42px |
Aa
|
--jh-font-size-1200 Font size 1200 |
48px |
Aa
|
--jh-font-size-1350 Font size 1350 |
54px |
Aa
|
--jh-font-size-1500 Font size 1500 |
60px |
Aa
|
--jh-font-size-1700 Font size 1700 |
68px |
Aa
|
--jh-font-size-1900 Font size 1900 |
76px |
Aa
|
--jh-font-size-2100 Font size 2100 |
84px |
Aa
|
--jh-font-size-2300 Font size 2300 |
92px |
Aa
|
Line-height
Token | Value | Example |
---|---|---|
--jh-font-line-height-300 Line-height 300 |
12px |
Aa
|
--jh-font-line-height-400 Line-height 400 |
16px |
Aa
|
--jh-font-line-height-500 Line-height 500 |
20px |
Aa
|
--jh-font-line-height-600 Line-height 600 |
24px |
Aa
|
--jh-font-line-height-700 Line-height 700 |
28px |
Aa
|
--jh-font-line-height-800 Line-height 800 |
32px |
Aa
|
--jh-font-line-height-900 Line-height 900 |
36px |
Aa
|
--jh-font-line-height-1000 Line-height 1000 |
40px |
Aa
|
--jh-font-line-height-1100 Line-height 1100 |
44px |
Aa
|
--jh-font-line-height-1300 Line-height 1300 |
52px |
Aa
|
--jh-font-line-height-1500 Line-height 1500 |
60px |
Aa
|
--jh-font-line-height-1600 Line-height 1600 |
64px |
Aa
|
--jh-font-line-height-1800 Line-height 1800 |
72px |
Aa
|
--jh-font-line-height-2000 Line-height 2000 |
80px |
Aa
|
--jh-font-line-height-2300 Line-height 2300 |
92px |
Aa
|
--jh-font-line-height-2500 Line-height 2500 |
100px |
Aa
|
--jh-font-line-height-2700 Line-height 2700 |
108px |
Aa
|
Decision
Micro
Token | Value | Example |
---|---|---|
--jh-font-micro-regular Used for fine-print text and small snippets of text with limited space within a component |
var(--jh-font-weight-400) var(--jh-font-size-250)/var(--jh-font-line-height-300) var(--jh-font-family-roboto) |
Aa
|
--jh-font-micro-medium Used for fine-print text and small snippets of text with limited space within a component |
var(--jh-font-weight-500) var(--jh-font-size-250)/var(--jh-font-line-height-300) var(--jh-font-family-roboto) |
Aa
|
--jh-font-micro-bold Used for fine-print text and small snippets of text with limited space within a component |
var(--jh-font-weight-700) var(--jh-font-size-250)/var(--jh-font-line-height-300) var(--jh-font-family-roboto) |
Aa
|
Helper
Token | Value | Example |
---|---|---|
--jh-font-helper-regular Used for secondary or explanatory text as well as field labels |
var(--jh-font-weight-400) var(--jh-font-size-300)/var(--jh-font-line-height-400) var(--jh-font-family-roboto) |
Aa
|
--jh-font-helper-medium Used for secondary or explanatory text as well as field labels |
var(--jh-font-weight-500) var(--jh-font-size-300)/var(--jh-font-line-height-400) var(--jh-font-family-roboto) |
Aa
|
--jh-font-helper-bold Used for secondary or explanatory text as well as field labels. |
var(--jh-font-weight-700) var(--jh-font-size-300)/var(--jh-font-line-height-400) var(--jh-font-family-roboto) |
Aa
|
Body
Token | Value | Example |
---|---|---|
--jh-font-body-regular-1 Used for blocks of text and most content displayed within components |
var(--jh-font-weight-400) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto) |
Aa
|
--jh-font-body-regular-2 Used for intro or leading blocks of text |
var(--jh-font-weight-400) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto) |
Aa
|
--jh-font-body-medium-1 Used for blocks of text and most content displayed within components |
var(--jh-font-weight-500) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto) |
Aa
|
--jh-font-body-medium-2 Used for intro or leading blocks of text |
var(--jh-font-weight-500) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto) |
Aa
|
--jh-font-body-bold-1 Used for blocks of text and most content displayed within components |
var(--jh-font-weight-700) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto) |
Aa
|
--jh-font-body-bold-2 Used for intro or leading blocks of text |
var(--jh-font-weight-700) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto) |
Aa
|
Display
Token | Value | Example |
---|---|---|
--jh-font-display-light-1 Used to create visual emphasis through size without being misconstrued as a heading |
var(--jh-font-weight-300) var(--jh-font-size-1050)/var(--jh-font-line-height-1300) var(--jh-font-family-roboto) |
Aa
|
--jh-font-display-light-2 Used to create visual emphasis through size without being misconstrued as a heading |
var(--jh-font-weight-300) var(--jh-font-size-1350)/var(--jh-font-line-height-1600) var(--jh-font-family-roboto) |
Aa
|
--jh-font-display-light-3 Used to create visual emphasis through size without being misconstrued as a heading |
var(--jh-font-weight-300) var(--jh-font-size-2300)/var(--jh-font-line-height-2700) var(--jh-font-family-roboto) |
Aa
|
Heading
Token | Value | Example |
---|---|---|
--jh-font-heading-regular-1 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-400) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-regular-2 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-400) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-regular-3 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-400) var(--jh-font-size-500)/var(--jh-font-line-height-700) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-regular-4 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-400) var(--jh-font-size-700)/var(--jh-font-line-height-900) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-regular-5 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-400) var(--jh-font-size-800)/var(--jh-font-line-height-1000) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-regular-6 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-400) var(--jh-font-size-900)/var(--jh-font-line-height-1100) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-medium-1 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-500) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-medium-2 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-500) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-medium-3 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-500) var(--jh-font-size-500)/var(--jh-font-line-height-700) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-medium-4 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-500) var(--jh-font-size-700)/var(--jh-font-line-height-900) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-medium-5 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-500) var(--jh-font-size-800)/var(--jh-font-line-height-1000) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-medium-6 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-500) var(--jh-font-size-900)/var(--jh-font-line-height-1100) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-bold-1 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-700) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-bold-2 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-700) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-bold-3 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-700) var(--jh-font-size-500)/var(--jh-font-line-height-700) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-bold-4 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-700) var(--jh-font-size-700)/var(--jh-font-line-height-900) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-bold-5 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-700) var(--jh-font-size-800)/var(--jh-font-line-height-1000) var(--jh-font-family-roboto) |
Aa
|
--jh-font-heading-bold-6 Used to create visual hierarchy on a page and within a component |
var(--jh-font-weight-700) var(--jh-font-size-900)/var(--jh-font-line-height-1100) var(--jh-font-family-roboto) |
Aa
|