Tailwind CSS Font Size

Font size in CSS controls the size of the text displayed in an element. It’s a core property and plays a significant role in web design by enhancing accessibility, readability, and visual hierarchy.

In this guide, you'll learn how to apply font sizes using Tailwind CSS, manage line heights, customize styles conditionally, utilize breakpoints, and even define your own custom values.

Overview of Font Size

Adding a Text Size

To adjust text size, use Tailwind's font size utilities, which range from small to extra large. Tailwind assigns each font size a corresponding line height (leading) by default to maintain visual rhythm. Here’s how you might apply it:

export default function App() {
  return <h1>Hello world</h1>
}

Adding Text Size with Line Heights

Line height adjustment complements font size by defining the vertical space above and under lines of text. Tailwind provides a line-height modifier to add the line-height at the same time you defint the font size.

In the below example, line-height values 6, and 9 are given to the first and second paragraph using text-lg/6 and text-lg/9 utilities:

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Hover and Focus States

Hover and focus states allow you to define font size transformations dynamically. Here’s an interactive example:

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

Tailwind provides modifiers like sm, md, lg, etc. to target multiple breakpoints. If an utility is defined along with a breakpoint modifier, it will be applied only when the screen dimensions are equal to or above the defined breakpoint:

export default function App() {
  return <h1>Hello world</h1>
}

Custom Font Size

You’ll occasionally need more tailored font sizes that exceed the provided utilities. Tailwind enables you to tweak individual sizes in the configuration file or use arbitrary values.

Exteneding the Theme

Edit your tailwind.config.js to include custom font sizes:

export default function App() {
  return <h1>Hello world</h1>
}

Using Arbitrary Values

With Tailwind’s arbitrary value syntax, you can bypass predefined classes altogether for one-off values:

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Product Review Card with Dynamic Font Sizing

This component displays customer reviews with different font sizes for various text elements.

export default function App() {
  return <h1>Hello world</h1>
}

Blog Post Header with Responsive Typography

This component showcases a blog post header with responsive font sizes using Tailwind's responsive modifiers.

export default function App() {
  return <h1>Hello world</h1>
}

Pricing Table with Hierarchical Typography

A pricing component that uses different font sizes to create visual hierarchy.

export default function App() {
  return <h1>Hello world</h1>
}

Team Member Grid with Variable Font Sizes

A component displaying team members with different font sizes for various text elements.

export default function App() {
  return <h1>Hello world</h1>
}

Feature Comparison Table with Font Size Hierarchy

A comparison table using different font sizes to highlight important information.

export default function App() {
  return <h1>Hello world</h1>
}

Customization Examples

Responsive Blog Typography System

This example demonstrates how to create a custom typography system for a blog with responsive font sizes across different breakpoints.

export default function App() {
  return <h1>Hello world</h1>
}

E-commerce Product Card with Dynamic Pricing

This example shows how to implement custom font sizes for an e-commerce product card with emphasis on price points.

export default function App() {
  return <h1>Hello world</h1>
}

Dashboard Statistics Card

This example demonstrates custom font sizes for a statistics dashboard card with emphasis on numbers and metrics.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

You should establish a clear typographic hierarchy within your project, ensuring that font sizes work harmoniously across all components. For example, headings (text-2xl, text-4xl) should maintain a logical progression down to body text (text-base, text-sm) and captions (text-xs). Always pair font size utilities with appropriate spacing (mt-*, mb-*) and weight (font-bold, font-medium) to enhance uniformity.

When building scalable designs, it’s best to leverage Tailwind’s flexible default scale. This ensures proportional increments between sizes, reducing the chance of visual inconsistencies. For more complex layouts, you can extend or override these defaults in your tailwind.config.js file to align with your project's unique style guide.

Leverage Utility Combinations

Combining utilities effectively is a powerful way to create cohesive and polished designs with minimal effort. Font size alone may not achieve your desired effect; it should be paired with complementary utilities like leading-* for line height and tracking-* for letter spacing. Consider the relationship between text size, line height, and spacing to create visually comfortable blocks of text.

For dynamic interfaces, utilize utilities like hover:* and focus:* to add interactivity through subtle size changes or animations.

Accessibility Considerations

Enhance Readability and Navigability

Font size directly influences readability and navigability. Always ensure text is large enough to be legible, even from a distance or on smaller screens.

When targeting an inclusive audience, prioritize clarity: avoid setting text below text-sm without strong justification (e.g., footnotes). Pair font sizes with proper leading-* classes to enhance the line spacing and prevent cramped text blocks. Responsive utilities (sm:text-xl, lg:text-2xl) can further enhance legibility, ensuring the right size is used across all devices.

Make navigability simpler by applying font sizes thoughtfully to headers, buttons, and other interactive components. For instance, headers styled with larger utilities like text-3xl can act as visual anchors, guiding users through long pages or sections without confusion.

Focus on High Contrast

Text contrast ensures accessibility for users with visual impairments. When applying Tailwind font size utilities, you should also consider its relationship with background and text colors (text-*, bg-*). Combining a legible size (text-lg) with contrasting colors like text-gray-900 on bg-gray-100 improves readability for users.

For optimal contrast, verify that your chosen text size and color combination meets the WCAG (Web Content Accessibility Guidelines) standards. Use tools like Tailwind’s text-opacity-* utilities to fine-tune transparency on color overlays without compromising contrast ratios. Pairing larger font sizes (text-3xl) with bolder weights (font-bold) also helps draw attention to key content while enhancing visibility.

When dealing with complex background images, overlay them with a semi-transparent background (bg-opacity-*) or apply utility classes like backdrop-brightness-* to ensure text remains clear while maintaining aesthetic appeal.

Debugging Common Issues

Resolve Common Problems

Common font size issues often stem from unintended overflows, unrelated utility conflicts, or misconfigured responsive scaling. You may encounter text overflowing its container when the specified font size (e.g., text-5xl) exceeds the base width of its parent. To address this, avoid using fixed widths for such dynamic content as headings.