Typography

Amplify UI provides tokens for font weight, font size and line height, as well as variable and static font families.

Font weights

.amplify-heading--2 { font-weight: var(--amplify-font-weights-thin); } .amplify-text { font-weight: var(--amplify-font-weights-bold); }

hairline
--amplify-font-weights-hairline
100
thin
--amplify-font-weights-thin
200
light
--amplify-font-weights-light
300
normal
--amplify-font-weights-normal
400
medium
--amplify-font-weights-medium
500
semibold
--amplify-font-weights-semibold
600
bold
--amplify-font-weights-bold
700
extrabold
--amplify-font-weights-extrabold
800
black
--amplify-font-weights-black
900

Font sizes

.amplify-heading--2 { font-size: var(--amplify-font-sizes-medium); } .amplify-text { font-size: var(--amplify-font-sizes-small); }

xxxs
--amplify-font-sizes-xxxs
0.375rem
xxs
--amplify-font-sizes-xxs
0.5rem
xs
--amplify-font-sizes-xs
0.75rem
small
--amplify-font-sizes-small
0.875rem
medium
--amplify-font-sizes-medium
1rem
large
--amplify-font-sizes-large
1.25rem
xl
--amplify-font-sizes-xl
1.5rem
xxl
--amplify-font-sizes-xxl
2rem
xxxl
--amplify-font-sizes-xxxl
2.5rem
xxxxl
--amplify-font-sizes-xxxxl
3rem

Line heights

.amplify-text { line-height: var(--amplify-line-heights-small); }

small
--amplify-line-heights-small
1.25
medium
--amplify-line-heights-medium
1.5
large
--amplify-line-heights-large
2

Font families

Amplify UI ships with tokens for both static and variable fonts. The benefit of a variable font is you can include many variations of the font (for weight and axes) in a single file. Learn more about variable weight fonts in this guide from MDN

default.variable
--amplify-fonts-default-variable
'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif
default.static
--amplify-fonts-default-static
'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif