Typography

Typography tokens are normal Tailwind classes generated by tailwind-helper. Define the token names and responsive values in tailwind.config.ts, then use classes such as type-title-xl, type-body-m, and type-ui-s in views, blocks, and shared components.

Configuration

responsiveTheme({
  screens: { sm: 600, md: 900, lg: 1200, xl: 1600, xxl: 2000 },
  breakpoints: ["lg"],
  interpolate: {
    sm: {},
    md: { base: "sm", lerp: true },
    lg: { base: "lg", lerp: true },
    xl: { base: "lg", scale: 1.2, lerp: true },
    xxl: { base: "lg", scale: 1.3 },
  },
  typography: {
    fontFamily: {
      body: "'GT-Cinetype', Helvetica, sans-serif",
      heading: "'Agrandir-Wide', Helvetica, sans-serif",
    },
    styles: {
      "title-xl": {
        fontSize: { BASE: "32px", lg: "56px" },
        lineHeight: "100%",
        fontFamily: "heading",
        fontWeight: "400",
        letterSpacing: "-0.03em",
        textTransform: "uppercase",
      },
      "body-m": {
        fontSize: { BASE: "16px", lg: "18px" },
        lineHeight: { BASE: "130%", lg: "140%" },
        fontFamily: "body",
        fontWeight: "400",
        letterSpacing: "normal",
        textTransform: "none",
      },
    },
  },
})

The helper creates component classes for each style:

<h1 className="type-title-xl text-balance">{props.title}</h1>
<div className="type-body-m text-fg-secondary">{props.description}</div>

It also maps fontFamily keys into Tailwind's font family theme, so regular classes like font-body can be used when a full text style is too much.

Responsive Values

Text styles can use a single value or a breakpoint map. The helper converts percentage line heights into pixel values, interpolates fontSize and lineHeight when the interpolation config says to lerp, and emits media-query rules for the generated .type-* class.

"title-l": {
  fontSize: { BASE: "24px", lg: "40px" },
  lineHeight: { BASE: "110%", lg: "100%" },
  fontFamily: "heading",
  fontWeight: "400",
  letterSpacing: "-0.03em",
  textTransform: "uppercase",
}

Use BASE for the mobile/base value. Add only the breakpoints that need a real change.

Figma Export

The ED. Web Handoff plugin reads local Figma text styles and can output the typography.styles object for the Tailwind helper.

Artworking rules:

1. Create local text styles for the reusable type scale.
2. Put breakpoint-specific styles at the end of the name, for example Title / XL / Laptop.
3. Keep breakpoint names out of the middle of the style name.
4. Prefix design-only styles with _, or place them under a /_ group, if they should be ignored.

The plugin uses the configured breakpoint labels. In its default config, Mobile maps to BASE, then Phablet, Tablet, Laptop, Desktop, and 4K map to the named breakpoints.

The plugin also reports font family/style combinations. Review those warnings before copying code, because the generated fontFamily token and fontWeight come from the font configuration or the plugin's weight guess.

Site Styles

Use type classes directly in components. For rich text or WordPress-rendered HTML, apply them in CSS with Tailwind's element variants or normal selectors:

@layer components {
  .wysiwyg {
    @apply type-body-m;
  }

  .wysiwyg h2 {
    @apply type-title-l mt-6 mb-4;
  }

  .wysiwyg a {
    @apply underline underline-offset-[0.15em] decoration-fg/30;
  }
}

Keep component code on token names, not raw pixel values, unless the value is a one-off layout fix.