Typography

Typography forms the core of any product just as much as colors and components do. As a result, you'll need to establish styles for consistent, legible typography early in the process of creating your product or design system.

Our Font is the Aller, a sans serif font with some interesting features with styles ranging from light to bold, with matching italics plus the display weight, giving a wide range of tones of voice to choose from.

Text Styles#

The text styles functionality in Chakra makes it easy to repeatably apply a collection of text properties (like line height and size) to any component.

textStyles: {
        'display-large': {
            fontSize: '44px',
            lineHeight: 1.25,
            fontWeight: 600,
        },
        display: {
            fontSize: '36px',
            lineHeight: 1.25,
            fontWeight: 600,
        },
        heading: {
            fontSize: '28px',
            lineHeight: 1.25,
            fontWeight: 700,
        },
        'sub-medium': {
            fontSize: '20px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        'sub-small': {
            fontSize: '18px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        body: {
            fontSize: '16px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        'body-small': {
            fontSize: '14px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        'section-heading': {
            fontSize: '12px',
            lineHeight: 1.5,
            fontWeight: 600,
        },
        'section-heading-large': {
            fontSize: '18px',
            lineHeight: 1.5,
            fontWeight: 600,
        },
    },
};

textStyles: {
        'display-large': {
            fontSize: '44px',
            lineHeight: 1.25,
            fontWeight: 600,
        },
        display: {
            fontSize: '36px',
            lineHeight: 1.25,
            fontWeight: 600,
        },
        heading: {
            fontSize: '28px',
            lineHeight: 1.25,
            fontWeight: 700,
        },
        'sub-medium': {
            fontSize: '20px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        'sub-small': {
            fontSize: '18px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        body: {
            fontSize: '16px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        'body-small': {
            fontSize: '14px',
            lineHeight: 1.5,
            fontWeight: 500,
        },
        'section-heading': {
            fontSize: '12px',
            lineHeight: 1.5,
            fontWeight: 600,
        },
        'section-heading-large': {
            fontSize: '18px',
            lineHeight: 1.5,
            fontWeight: 600,
        },
    },
};

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

<Stack direction='column' spacing={2}>
    <Box textStyle='display-large' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='display' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='heading' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='sub-medium' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='sub-small' color='grey'>Lorem ipsum</Box>
    <Box textStyle='body' color='grey'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Box>
    <Box textStyle='body-small' color='grey'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Box>
    <Box textStyle='section-heading' color='grey'>Lorem ipsum</Box>
    <Box textStyle='section-heading-large' color='grey'>Lorem ipsum</Box>
</Stack>

<Stack direction='column' spacing={2}>
    <Box textStyle='display-large' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='display' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='heading' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='sub-medium' color='charcoal'>Lorem ipsum</Box>
    <Box textStyle='sub-small' color='grey'>Lorem ipsum</Box>
    <Box textStyle='body' color='grey'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Box>
    <Box textStyle='body-small' color='grey'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Box>
    <Box textStyle='section-heading' color='grey'>Lorem ipsum</Box>
    <Box textStyle='section-heading-large' color='grey'>Lorem ipsum</Box>
</Stack>

Editable Example

Typography

.css-12m0k8p{pointer-events:auto;}Text Styles.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}#

Text Styles#