Tailwind has a great type scale by default. This type scale provides a good set of font sizes that work well together.

However, with 13 different sizes, it can be hard to choose the right one. A common mistake is using all of them instead of just a few.

To fix this, you can make your own type scale in Tailwind. This allows you to:

1. Spend less time guessing which text to use
2. Build consistent product experiences
3. Easily refactor text sizes later on, especially if they need to be responsive

In this guide, we’ll dive into how to setup your Tailwind config for a custom type scale.

At Subframe, we’ve helped thousands of builders setup Tailwind for their web apps. Here are the font sizes we recommend at minimum:

1. Heading 1 – used for your <h1> tags such as page headers
2. Heading 2 – used for your <h2> tags such as section headers
3. Heading 3 – used for your <h3> tags such as sub-section headers
4. Body text – used for your main content
5. Caption text – used for any subtext or small annotations

You may also want to include bold styles for your body and caption text because they are commonly used. If you're a developer tool, consider also adding monospace text for code snippets.

To create your own type scale in Tailwind, you’ll need to customize your tailwind.config.js file.

Here’s our recommended type scale that you can modify:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontSize: {
        // text-caption
        caption: [
          "12px",
          {
            lineHeight: "16px",
            fontWeight: "400",
          },
        ],

        // text-caption-bold
        "caption-bold": [
          "12px",
          {
            lineHeight: "16px",
            fontWeight: "500",
          },
        ],

        // text-body
        body: [
          "14px",
          {
            lineHeight: "20px",
            fontWeight: "400",
          },
        ],

        // text-body-bold
        "body-bold": [
          "14px",
          {
            lineHeight: "20px",
            fontWeight: "500",
          },
        ],

        // text-heading-3
        "heading-3": [
          "16px",
          {
            lineHeight: "20px",
            fontWeight: "600",
          },
        ],

        // text-heading-2
        "heading-2": [
          "20px",
          {
            lineHeight: "24px",
            fontWeight: "600",
          },
        ],

        // text-heading-1
        "heading-1": [
          "30px",
          {
            lineHeight: "36px",
            fontWeight: "500",
          },
        ],

        // (optional) monospace-body
        "monospace-body": [
          "14px",
          {
            lineHeight: "20px",
            fontWeight: "400",
          },
        ],
      },
    },
  },
}

You may also want to setup your base styles to also match your type scale. You can do so using Tailwind’s @apply directive in your global css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  @apply text-body;
}

h1 {
  @apply text-heading-1;
}

h2 {
  @apply text-heading-2;
}

h3 {
  @apply text-heading-3;
}

pre, code {
  @apply text-monospace-body;
}

A type scale makes picking the right font easy. Need to add in an <h1> as a page header? Just use text-heading-1 . Need your paragraph text to be smaller? Use text-caption .

By replacing your one-off text styles with a well-defined type scale, your designs will look consistent because you’re applying the same styles everywhere. Plus, refactoring things later on will be easier.

// ❌ one-off text styles like this don't scale
<span className="text-3xl text-bold">My page header</span>

// ✅ use your a properly named type scale instead
<span className="text-heading-1">My page header</span>

Type scale is only one part of your Tailwind config that you should customize to save time. There are other things you should set up too, such as color and media breakpoints. We recommend using a free Tailwind config generator that sets it all up for you.