Typography

Overview

This lesson will help you stop scattering random font sizes throughout your codebase and instead build a structured, maintainable typography scale.

Key Takeaways

Typography tokens bring consistency and scalability. They prevent random font values across your app and establish a centralized system for all text-related styles.

Define font families, font sizes and other font properties

tokens: {
  fonts: {
    body: { value: "Inter, sans-serif" },
    heading: { value: "Roboto Mono, sans-serif" },
  },
  fontSizes: {
    //define font sizes
  },
  fontWeights: {
    //define font weight
  },
  letterSpacings: {
    //define letter spacings
  },
  lineHeights: {
    //define line heights
  },
}

Make text responsive with breakpoints

Use Chakra’s responsive object syntax to scale typography across devices:

<Heading fontSize={{ base: "lg", md: "2xl" }}>
  Responsive heading
</Heading>
<Text fontSize={{ base: "sm", md: "md" }} lineHeight={{ base: "tight", md: "normal" }}>
  Responsive body text
</Text>