Typography

Defining Type Styles#

Global type styles are defined in theme.css.tsx inside the typography object, like so:

typography: {
  h1: {
    fontFamily: "$body",
    fontWeight: "bold",
    letterSpacing: "-1%",
    fontSize: { "@initial": "32px", "@laptop": ["56px"], "@desktop": "x1.15" },
    lineHeight: { "@initial": "125%", "@laptop": "128%" },
  },
  body: {
    fontFamily: "$body",
    letterSpacing: "-1%",
    fontSize: { "@initial": "18px", "@laptop": ["18px"], "@desktop": "x1.15" },
    lineHeight: { "@initial": "1.55", "@laptop": "1.5" },
  },
}

In the code above, we're defining a h1 and body style, with responsive typography.

Using Type Styles#

The eddev version of stitches provides a nice utility property for applying typography within a styled component:

const MyHeading = styled("h3", {
  typography: "h1",
  color: "red",
})

You'll even get TypeScript autocomplete on the typography prop, and TypeScript errors if you use an invalid typography name.

The starter theme also comes with <Heading>, <Paragraph> and <Typography> components, where you can use the variant prop.

<Paragraph variant="body">I am P tag with body text</Paragraph>
<Heading as="h2" variant="h1">I am a h2 tag with h1 text</Paragraph>
<Typography as="body">I am a div with body text</Paragraph>

Responsive Type#

The typography object can contain responsive fontSize and lineHeight objects, using the same format as responsive spacing. Check out the spacing section for more info.

You're also free to apply different type styles depending on a breakpoint, using regular stitches syntax:

const MyHeading = styled("h3", {
  typography: "h1",
  color: "red",
  "@tablet": {
    typography: "h2",
  },
})