Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

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.

ClassPropertiesExample
text-xsfont-size: 0.75rem; line-height: 1rem; <div className="text-xs"></div>
text-smfont-size: 0.875rem; line-height: 1.25rem; <div className="text-sm"></div>
text-basefont-size: 1rem; line-height: 1.5rem; <div className="text-base"></div>
text-lgfont-size: 1.125rem; line-height: 1.75rem; <div className="text-lg"></div>
text-xlfont-size: 1.25rem; line-height: 1.75rem; <div className="text-xl"></div>
text-2xlfont-size: 1.5rem; line-height: 2rem; <div className="text-2xl"></div>
text-3xlfont-size: 1.875rem; line-height: 2.25rem; <div className="text-3xl"></div>
text-4xlfont-size: 2.25rem; line-height: 2.5rem; <div className="text-4xl"></div>
text-5xlfont-size: 3rem; line-height: 1;<div className="text-5xl"></div>
text-6xlfont-size: 3.75rem; line-height: 1;<div className="text-6xl"></div>
text-7xlfont-size: 4.5rem; line-height: 1;<div className="text-7xl"></div>
text-8xlfont-size: 6rem; line-height: 1;<div className="text-8xl"></div>
text-9xlfont-size: 8rem; line-height: 1;<div className="text-9xl"></div>

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:

This is a live editor. Play around with it!
export default function FontSizeDemo() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex flex-col gap-6 justify-center items-center">
      {/* small text */}
      <div className="text-sm text-gray-800">
        This is a small text
        {/* equivalent to font-size: 0.875rem; line-height: 1.25rem */}
      </div>

      {/* large text */}
      <div className="text-lg text-gray-800 ml-8">
        This is a large text
        {/* equivalent to font-size: 1.125rem; line-height: 1.75rem */}
      </div>

      {/* extra large text */}
      <div className="text-2xl text-gray-800 ml-8">
        This is a 2x large text  
        {/* equivalent to font-size: 1.5rem; line-height: 2rem */}
      </div>
    </div>
  );
}

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:

This is a live editor. Play around with it!
export default function LineHeightDemo() {
  return (
    <div className="h-screen w-screen bg-gray-100 p-16">
      <h1 className="text-lg/6  text-gray-800">
        Font size in CSS controls the size of the text displayed in an element.
      </h1>
      <p className="text-lg/9 text-gray-700 mt-4">
        Font size in CSS controls the size of the text displayed in an element.
      </p>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

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

This is a live editor. Play around with it!
export default function ConditionalFontSize() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-20 flex items-center justify-center">
      {/* hover to enlarge */}
      <button className="text-lg hover:text-2xl">
        Hover Over Me  
        {/* Transition from font-size: 1.125rem to 1.875rem on hover */}
      </button>
    </div>
  );
}

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:

This is a live editor. Play around with it!
export default function ResponsiveText() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex justify-center items-center">
      {/* smaller screens */}
      <p className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-800 text-center px-20">
        This text will change size based on the screen.  
        {/* Default: 0.875rem; Small: 1rem; Medium: 1.125rem; Large: 1.25rem */}
      </p>
    </div>
  );
}

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:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomConfigFont() {
  return (
    <div className="h-screen w-screen bg-white flex flex-col items-center justify-center">
      <h2 className="text-tiny text-blue-500 mb-4">Tiny Text</h2>
      <h1 className="text-giant text-red-600">Giant Heading</h1>
    </div>
  );
}

Using Arbitrary Values

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

This is a live editor. Play around with it!
export default function ArbitraryValuesDemo() {
  return (
    <div className="h-screen w-screen bg-gray-200 p-16 flex justify-around items-center">
      <div className="text-[2.75rem] leading-[3.8rem] text-gray-700">
        Arbitrary Font Size
        {/* font-size: 2.75rem; line-height: 3.8rem */}
      </div>
      <div className="text-[calc(10px+2vmin)] text-blue-600">
        Viewport-Based Size
        {/* font-size: dynamically calculated */}
      </div>
    </div>
  );
}

Real World Examples

Product Review Card with Dynamic Font Sizing

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

This is a live editor. Play around with it!
export default function ProductReviews() {
  const reviews = [
    {
      id: 1,
      author: "Sarah Johnson",
      rating: 5,
      title: "Amazing Quality!",
      review: "The build quality exceeded my expectations. Would definitely recommend!",
      date: "2023-08-15",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330"
    },
    {
      id: 2,
      author: "Michael Chen",
      rating: 4,
      title: "Great Value",
      review: "Solid performance for the price point. Very satisfied with my purchase.",
      date: "2023-08-14",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
    },
    // ... add 4 more reviews
  ];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h2 className="text-3xl font-bold mb-8">Customer Reviews</h2>
      <div className="space-y-6">
        {reviews.map(review => (
          <div key={review.id} className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center gap-4">
              <img 
                src={review.avatar} 
                alt={review.author}
                className="w-12 h-12 rounded-full"
              />
              <div>
                <h3 className="text-xl font-semibold">{review.author}</h3>
                <p className="text-sm text-gray-500">{review.date}</p>
              </div>
            </div>
            <h4 className="text-lg font-medium mt-4">{review.title}</h4>
            <p className="text-base mt-2">{review.review}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Blog Post Header with Responsive Typography

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

This is a live editor. Play around with it!
export default function BlogHeader() {
  const blogPost = {
    title: "Understanding Modern Web Development",
    author: "Alex Rivera",
    date: "August 15, 2023",
    readTime: "8 min read",
    category: "Web Development",
    image: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
    excerpt: "Explore the latest trends and best practices in modern web development..."
  };

  return (
    <header className="relative h-[60vh] overflow-hidden h-screen">
      <img 
        src={blogPost.image} 
        alt="Blog cover"
        className="absolute inset-0 w-full h-full object-cover"
      />
      <div className="absolute inset-0 bg-black bg-opacity-50">
        <div className="container mx-auto px-4 h-full flex flex-col justify-center">
          <span className="text-sm md:text-base text-yellow-400 font-semibold">
            {blogPost.category}
          </span>
          <h1 className="text-3xl md:text-4xl lg:text-6xl text-white font-bold mt-2">
            {blogPost.title}
          </h1>
          <p className="text-lg md:text-xl text-gray-200 mt-4 max-w-2xl">
            {blogPost.excerpt}
          </p>
          <div className="flex items-center mt-6 text-white">
            <span className="text-sm md:text-base">{blogPost.author}</span>
            <span className="mx-2 text-xs">•</span>
            <span className="text-sm">{blogPost.date}</span>
            <span className="mx-2 text-xs">•</span>
            <span className="text-sm">{blogPost.readTime}</span>
          </div>
        </div>
      </div>
    </header>
  );
}

Pricing Table with Hierarchical Typography

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

This is a live editor. Play around with it!
export default function PricingTable() {
  const plans = [
    {
      id: 1,
      name: "Starter",
      price: 29,
      billing: "monthly",
      features: ["5 Projects", "10GB Storage", "Basic Support", "API Access"],
      popular: false
    },
    // ... add 5 more pricing plans
  ];

  return (
    <div className="max-w-6xl mx-auto py-12 px-4">
      <h2 className="text-4xl font-extrabold text-center mb-2">Pricing Plans</h2>
      <p className="text-lg text-gray-600 text-center mb-12">
        Choose the perfect plan for your needs
      </p>
      
      <div className="grid md:grid-cols-3 gap-8">
        {plans.map(plan => (
          <div key={plan.id} className="border rounded-xl p-8 relative">
            {plan.popular && (
              <span className="absolute -top-3 right-4 bg-blue-500 text-white text-xs px-3 py-1 rounded-full">
                Popular
              </span>
            )}
            <h3 className="text-2xl font-bold">{plan.name}</h3>
            <div className="mt-4">
              <span className="text-5xl font-bold">${plan.price}</span>
              <span className="text-base text-gray-500">/{plan.billing}</span>
            </div>
            <ul className="mt-8 space-y-4">
              {plan.features.map((feature, index) => (
                <li key={index} className="text-sm flex items-center">
                  <svg className="w-4 h-4 mr-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

Team Member Grid with Variable Font Sizes

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

This is a live editor. Play around with it!
export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Emma Thompson",
      role: "CEO & Founder",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      bio: "10+ years of experience in tech leadership",
      social: {
        twitter: "#",
        linkedin: "#",
        github: "#"
      }
    },
    // ... add 5 more team members
  ];

  return (
    <div className="bg-gray-50 py-16">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="text-5xl font-bold text-center mb-4">Our Team</h2>
        <p className="text-xl text-gray-600 text-center mb-12">
          Meet the people behind our success
        </p>
        
        <div className="grid md:grid-cols-3 gap-8">
          {team.map(member => (
            <div key={member.id} className="bg-white rounded-lg overflow-hidden shadow-lg">
              <img 
                src={member.image} 
                alt={member.name}
                className="w-full h-64 object-cover"
              />
              <div className="p-6">
                <h3 className="text-2xl font-bold">{member.name}</h3>
                <p className="text-sm text-blue-600 font-medium mt-1">{member.role}</p>
                <p className="text-base text-gray-600 mt-4">{member.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Feature Comparison Table with Font Size Hierarchy

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

This is a live editor. Play around with it!
export default function FeatureComparison() {
  const features = [
    {
      id: 1,
      name: "Storage",
      basic: "10GB",
      pro: "100GB",
      enterprise: "Unlimited"
    },
    // ... add 5 more feature comparisons
  ];

  return (
    <div className="max-w-6xl mx-auto py-16 px-4">
      <h2 className="text-4xl font-bold text-center mb-12">Feature Comparison</h2>
      
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr>
              <th className="text-left text-lg font-semibold p-4">Features</th>
              <th className="text-center text-xl font-bold p-4 text-blue-600">Basic</th>
              <th className="text-center text-xl font-bold p-4 text-blue-600">Pro</th>
              <th className="text-center text-xl font-bold p-4 text-blue-600">Enterprise</th>
            </tr>
          </thead>
          <tbody>
            {features.map(feature => (
              <tr key={feature.id} className="border-t">
                <td className="text-base font-medium p-4">{feature.name}</td>
                <td className="text-sm text-center p-4">{feature.basic}</td>
                <td className="text-sm text-center p-4">{feature.pro}</td>
                <td className="text-sm text-center p-4">{feature.enterprise}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

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.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function BlogPost() {
  return (
    <article className="max-w-4xl mx-auto p-6">
      <h1 className="text-blog-title md:text-blog-heading lg:text-blog-title font-bold mb-8">
        Understanding Modern Architecture
      </h1>
      <img
        src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c"
        alt="Modern Building"
        className="w-full h-96 object-cover rounded-lg mb-8"
      />
      <p className="text-blog-base md:text-blog-sm lg:text-blog-base text-gray-700 mb-6">
        Modern architecture emphasizes the relationship between form and function,
        stripping away unnecessary decorative elements to focus on the essential.
      </p>
      <div className="text-blog-xs md:text-blog-sm text-gray-500">
        Posted on: August 15, 2023
      </div>
    </article>
  )
}

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.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductCard() {
  return (
    <div className="max-w-sm bg-white shadow-lg overflow-hidden">
      <div className="relative">
        <img
          src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
          alt="Product"
          className="w-full h-64 object-cover"
        />
        <span className="absolute top-4 right-4 bg-red-500 text-price-sm text-white px-3 py-1 rounded-full">
          SALE
        </span>
      </div>
      <div className="p-6">
        <h2 className="text-product-title text-gray-900 mb-2">
          Limited Edition Sneakers
        </h2>
        <p className="text-product-desc text-gray-600 mb-4">
          Premium comfort with stylish design
        </p>
        <div className="flex items-baseline gap-3">
          <span className="text-price-lg text-blue-600">$129.99</span>
          <span className="text-price-sm text-gray-400 line-through">
            $199.99
          </span>
        </div>
      </div>
    </div>
  )
}

Dashboard Statistics Card

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

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function StatisticsCard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 rounded-2xl">
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <div className="flex items-center justify-between mb-4">
          <span className="text-stat-label text-gray-500 uppercase">Revenue</span>
          <img
            src="https://images.unsplash.com/photo-1523961131990-5ea7c61b2107"
            alt="Chart Icon"
            className="w-8 h-8 object-cover rounded-full"
          />
        </div>
        <div className="text-stat-number text-gray-900 mb-2">$84,686</div>
        <div className="flex items-center gap-2">
          <span className="text-stat-change text-green-500">+24.5%</span>
          <span className="text-stat-subtitle text-gray-400">vs last month</span>
        </div>
      </div>
      
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <div className="flex items-center justify-between mb-4">
          <span className="text-stat-label text-gray-500 uppercase">Users</span>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d"
            alt="Users Icon"
            className="w-8 h-8 object-cover rounded-full"
          />
        </div>
        <div className="text-stat-number text-gray-900 mb-2">12,486</div>
        <div className="flex items-center gap-2">
          <span className="text-stat-change text-green-500">+18.2%</span>
          <span className="text-stat-subtitle text-gray-400">vs last month</span>
        </div>
      </div>
      
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <div className="flex items-center justify-between mb-4">
          <span className="text-stat-label text-gray-500 uppercase">Orders</span>
          <img
            src="https://images.unsplash.com/photo-1460925895917-afdab827c52f"
            alt="Orders Icon"
            className="w-8 h-8 object-cover rounded-full"
          />
        </div>
        <div className="text-stat-number text-gray-900 mb-2">1,423</div>
        <div className="flex items-center gap-2">
          <span className="text-stat-change text-red-500">-3.1%</span>
          <span className="text-stat-subtitle text-gray-400">vs last month</span>
        </div>
      </div>
    </div>
  )
}

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.

Font StyleFont Smoothing

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy