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