Amplify UI

Typography

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

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
    --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

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
    --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

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
    --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

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.