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)

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.