Tailwind CSS Font Size Tutorial for Beginners

Typography plays a major role in web design. Good font sizing improves readability, hierarchy, and overall user experience.

In traditional CSS, you write:

font-size: 16px;

In Tailwind CSS, you simply use:

class="text-base"

That’s the power of utility-first CSS.

In this guide, you’ll learn:

All font size classes in Tailwind
How line-height works automatically
How to control line-height manually
How to use custom font sizes
How to apply responsive font sizes
A complete working example

Let’s start.

Default Font Size Classes in Tailwind

Tailwind provides predefined text size utilities:

Class	Font Size	Pixel Equivalent
text-xs	0.75rem	12px
text-sm	0.875rem	14px
text-base	1rem	16px
text-lg	1.125rem	18px
text-xl	1.25rem	20px
text-2xl	1.5rem	24px
text-3xl	1.875rem	30px
text-4xl	2.25rem	36px
text-5xl	3rem	48px
text-6xl	3.75rem	60px
text-7xl	4.5rem	72px
text-8xl	6rem	96px
text-9xl	8rem	128px

Each class automatically includes an appropriate line-height.

Basic Example

<p class="text-sm">Small Text</p>
<p class="text-base">Normal Text</p>
<p class="text-lg">Large Text</p>
<p class="text-xl">Extra Large Text</p>
<p class="text-2xl">Heading Style Text</p>

Use:

text-sm for secondary information
text-base for paragraph content
text-xl and above for headings

Controlling Line Height

Tailwind allows you to control font size and line-height together.

Example:

<p class="text-sm/6">
  This paragraph uses small text with tight spacing.
</p>

<p class="text-sm/8">
  This paragraph uses small text with more spacing.
</p>

Format:

text-size/line-height

This improves readability for longer content.

Custom Font Size

If you need a specific value:

<p class="text-[14px]">
  Custom font size
</p>

Using CSS variables:

<p class="text-(length:--my-text-size)">
  Custom variable font size
</p>

Responsive Font Size

You can apply different sizes for different screens.

<p class="text-sm md:text-lg lg:text-2xl">
  Responsive text example
</p>

Meaning:

Mobile → small text
Tablet → larger text
Desktop → heading size

This is extremely useful for responsive design.

Complete Working Example (Full Page Demo)

Below is a complete example you can copy and test directly.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tailwind Font Size Example</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-lg">

    <!-- Page Heading -->
    <h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">
      Tailwind CSS Typography Demo
    </h1>

    <!-- Subheading -->
    <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-700">
      Understanding Font Sizes
    </h2>

    <!-- Paragraph -->
    <p class="text-base text-gray-600 mb-4">
      This is a normal paragraph using <strong>text-base</strong>. 
      It is perfect for body content and standard reading.
    </p>

    <!-- Smaller Text -->
    <p class="text-sm text-gray-500 mb-4">
      This is smaller secondary information using text-sm.
    </p>

    <!-- Larger Text -->
    <p class="text-xl text-gray-800 font-medium mb-4">
      This is larger text using text-xl.
    </p>

    <!-- Line Height Example -->
    <div class="mt-6">
      <h3 class="text-lg font-semibold mb-2">Line Height Example</h3>

      <p class="text-sm/6 text-gray-600 mb-4">
        This paragraph has tighter spacing between lines.
        It looks more compact and uses text-sm/6.
      </p>

      <p class="text-sm/8 text-gray-600">
        This paragraph has more spacing between lines.
        It improves readability for longer content.
      </p>
    </div>

    <!-- Custom Font Size -->
    <div class="mt-6">
      <h3 class="text-lg font-semibold mb-2">Custom Font Size</h3>
      <p class="text-[18px] text-blue-600">
        This text uses a custom font size of 18px.
      </p>
    </div>

  </div>

</body>
</html>

This example demonstrates:

Headings
Paragraph text
Small text
Responsive text
Line-height control
Custom font sizes
Clean layout

Best Practices for Typography

Use text-base for body content
Use text-xl and above for headings
Use text-sm for captions or metadata
Increase line-height for long paragraphs
Always test on mobile devices

Typography directly impacts user experience and SEO readability.

Frequently Asked Questions

What is the default font size in Tailwind?

text-base (16px).

How do I make text responsive?

Use breakpoint prefixes:

class="text-sm md:text-lg"

Can I use exact pixel values?

Yes:

class="text-[15px]"

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Overflow Tutorial for Beginners

Next: Tailwind CSS Font Weight Tutorial (Complete Beginner Guide with Examples)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us