Tailwind CSS - Font Size

Responsive Font Sizes with Tailwind CSS

Tailwind CSS provides a set of text-* utility classes to control the font size of elements. These utilities are part of a well-defined typographic scale, ensuring visual consistency across your application. By default, they use rem units, which is a best practice for accessibility as it respects the user’s browser font size settings.

Default Font Size Scale

Here is the default scale of font size utilities provided by Tailwind. Each utility sets both the font-size and a sensible default line-height.

Class	CSS Properties (Font Size / Line Height)
text-xs	font-size: 0.75rem; (12px) / line-height: 1rem; (16px)
text-sm	font-size: 0.875rem; (14px) / line-height: 1.25rem; (20px)
text-base	font-size: 1rem; (16px) / line-height: 1.5rem; (24px)
text-lg	font-size: 1.125rem; (18px) / line-height: 1.75rem; (28px)
text-xl	font-size: 1.25rem; (20px) / line-height: 1.75rem; (28px)
text-2xl	font-size: 1.5rem; (24px) / line-height: 2rem; (32px)
text-3xl	font-size: 1.875rem; (30px) / line-height: 2.25rem; (36px)
text-4xl	font-size: 2.25rem; (36px) / line-height: 2.5rem; (40px)
text-5xl	font-size: 3rem; (48px) / line-height: 1;
text-6xl	font-size: 3.75rem; (60px) / line-height: 1;
text-7xl	font-size: 4.5rem; (72px) / line-height: 1;
text-8xl	font-size: 6rem; (96px) / line-height: 1;
text-9xl	font-size: 8rem; (128px) / line-height: 1;

Modern Techniques and Best Practices

1. Responsive Font Sizes

A key feature of Tailwind is responsive design. You can easily change the font size at different screen sizes by using breakpoint prefixes like sm:, md:, lg:, and xl:.

<!-- Starts at text-lg on small screens, becomes text-2xl on medium screens, and text-4xl on large screens -->
<h1 class="text-lg md:text-2xl lg:text-4xl">Responsive Heading</h1>

2. Arbitrary Values

For specific design requirements not covered by the default scale, you can use arbitrary values without leaving your HTML. This is ideal for fine-tuning your typography.

<!-- Set a very specific font size -->
<p class="text-[15px]">This paragraph has a 15px font size.</p>

<!-- You can also define a custom line height -->
<p class="text-[15px]/[22px]">Font size of 15px with a line height of 22px.</p>

3. Customizing the Font Size Scale

To enforce a project-specific typographic scale, you can extend the default font sizes in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontSize: {
        '2xs': '0.625rem', // 10px
        'clamp': 'clamp(1rem, 5vw, 2.5rem)', // Fluid typography
      },
    },
  },
}

Practical Example: Responsive Article Heading

This example demonstrates how to apply different font size utilities to create a well-structured and responsive text block.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Responsive Typography</title>
</head>
<body class="font-sans p-4 md:p-8 bg-gray-50">

  <article class="max-w-3xl mx-auto">
    <h1 class="font-bold text-gray-900 text-3xl md:text-4xl lg:text-5xl mb-4">
      The Art of Responsive Typography
    </h1>

    <p class="text-gray-500 text-base md:text-lg mb-6">
      Published on October 26, 2023
    </p>

    <div class="prose prose-lg max-w-none text-gray-800">
      <p class="text-base mb-4">
        This is the body text, set to `text-base`. It provides a comfortable reading experience on all devices. For larger screens, we could increase this to `md:text-lg` for better readability.
      </p>
      <p class="text-sm text-gray-600">
        This is a smaller caption or annotation, using `text-sm`. It's distinct from the main body text but still perfectly legible.
      </p>
    </div>

  </article>

</body>
</html>