Custom Font Sizes with Line Heights in Tailwind

Custom Font Sizes

Tailwind's fontSize configuration lets you define custom sizes with paired line heights and letter spacing.

Basic Custom Sizes

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        "2xs": "0.625rem",     // 10px
        "md": "1rem",          // 16px - not in defaults
        "hero": "4.5rem",      // 72px
      },
    },
  },
};

Sizes with Line Height

Tailwind lets you pair font-size with line-height in a tuple:

fontSize: {
  "body": ["1rem", { lineHeight: "1.75" }],
  "heading-1": ["2.25rem", { lineHeight: "2.5rem" }],
  "heading-2": ["1.875rem", { lineHeight: "2.25rem" }],
  "caption": ["0.75rem", { lineHeight: "1rem" }],
}

With Letter Spacing

You can include letter spacing too:

fontSize: {
  "display": ["4.5rem", {
    lineHeight: "1",
    letterSpacing: "-0.02em",
    fontWeight: "700",
  }],
  "overline": ["0.75rem", {
    lineHeight: "1rem",
    letterSpacing: "0.1em",
    fontWeight: "600",
  }],
}

Mapping Design Tokens

If your design system defines type scales by name:

fontSize: {
  "display-2xl": ["4.5rem", { lineHeight: "5.625rem", letterSpacing: "-0.02em" }],
  "display-xl": ["3.75rem", { lineHeight: "4.5rem", letterSpacing: "-0.02em" }],
  "display-lg": ["3rem", { lineHeight: "3.75rem", letterSpacing: "-0.02em" }],
  "display-md": ["2.25rem", { lineHeight: "2.75rem", letterSpacing: "-0.02em" }],
  "display-sm": ["1.875rem", { lineHeight: "2.375rem" }],
  "display-xs": ["1.5rem", { lineHeight: "2rem" }],
}