Font weights
Heading Text
Some text example with a different font weight.
import { Heading, Text, useTheme } from '@aws-amplify/ui-react';
export const FontWeightExample = () => {
const { tokens } = useTheme();
return (
<>
<Heading level={2} fontWeight={tokens.fontWeights.thin}>
Heading Text
</Heading>
<Text fontWeight={tokens.fontWeights.bold}>
Some text example with a different font weight.
</Text>
</>
);
};
.amplify-heading--2 {
font-weight: var(--amplify-font-weights-thin);
}
.amplify-text {
font-weight: var(--amplify-font-weights-bold);
}
- hairline
- thin
- light
- normal
- medium
- semibold
- bold
- extrabold
- black
Font sizes
This is an H2 with a smaller than usual font size.*
*Note: Some smaller text.
import { Heading, Text, useTheme } from '@aws-amplify/ui-react';
export const FontSizesExample = () => {
const { tokens } = useTheme();
return (
<>
<Heading level={2} fontSize={tokens.fontSizes.medium}>
This is an H2 with a smaller than usual font size.<sup>*</sup>
</Heading>
<Text fontSize={tokens.fontSizes.small}>
<sup>*</sup>Note: Some smaller text.
</Text>
</>
);
};
.amplify-heading--2 {
font-size: var(--amplify-font-sizes-medium);
}
.amplify-text {
font-size: var(--amplify-font-sizes-small);
}
- xxxs
- xxs
- xs
- small
- medium
- large
- xl
- xxl
- xxxl
- xxxxl
Line heights
This is some example paragraph text with a small line height.
This is some example paragraph text with a medium line height.
This is some example paragraph text with a large line height.
import { Grid, Text, useTheme } from '@aws-amplify/ui-react';
export const LineHeightsExample = () => {
const { tokens } = useTheme();
return (
<Grid
gap={tokens.space.medium}
templateColumns="repeat(auto-fill, minmax(200px, 1fr))"
>
<Text lineHeight={tokens.lineHeights.small}>
This is some example paragraph text with a small line height.
</Text>
<Text lineHeight={tokens.lineHeights.medium}>
This is some example paragraph text with a medium line height.
</Text>
<Text lineHeight={tokens.lineHeights.large}>
This is some example paragraph text with a large line height.
</Text>
</Grid>
);
};
.amplify-text {
line-height: var(--amplify-line-heights-small);
}
- small
- medium
- large
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
- default.static