Next ❯

Typography

  • Learn complete text styling utilities in Tailwind.

  • What is Typography in Web Design ?

    Typography is the art and technique of arranging text so that it is:

    • Readable

    • Clear

    • Visually balanced

    • Hierarchical

    • Accessible

    In web design, typography controls:

    • How users read content

    • How information is prioritized

    • How professional a UI feels

    Good typography is invisible.
    Bad typography is immediately noticeable.

    Why Typography Is Critical in UI Design

    Most websites are text-heavy:

    • Headings

    • Paragraphs

    • Labels

    • Buttons

    • Navigation

    • Forms

    • Error messages

    If typography is poor:

    • Users struggle to read

    • UX feels unpolished

    • Trust decreases

    • Accessibility suffers

      Typography directly affects:

      • User experience (UX)

      • Accessibility (WCAG)

      • Brand perception

      • Conversion rates

        Typography in Utility-First CSS

        Traditional CSS typography:

        • Requires custom CSS

        • Often leads to inconsistencies

        • Is hard to maintain at scale

        In Tailwind CSS, typography is:

        • Utility-based

        • Consistent

        • Scalable

        • Responsive by default

        Instead of writing CSS rules, you compose typography directly in HTML using utilities.

        Typography System in Tailwind

        Tailwind provides a complete typography system, not just font sizes.

        Typography control includes:

        • Font family

        • Font size

        • Font weight

        • Line height

        • Letter spacing

        • Text alignment

        • Text color

        • Text decoration

        • Whitespace control

        Each aspect is handled by dedicated utilities.

      • Font Families in Tailwind

        Tailwind ships with default font stacks:

        • font-sans

        • font-serif

        • font-mono

      Font Family Utilities

      font-sans, font-serif, and font-mono apply different font families to text. 

      <p class="font-sans">Sans-serif text</p>
<p class="font-serif">Serif text</p>
<p class="font-mono">Monospace text</p>
      • These can later be customized using configuration files.

      Typography Scale

      text-* utilities follow a consistent typographic scale for different text sizes. 

      <p class="text-sm">Small text</p>
<p class="text-base">Base text</p>
<p class="text-lg">Large text</p>
<h1 class="text-3xl">Heading</h1>

      • This ensures:

        • Visual consistency

        • Predictable hierarchy

        • Easier maintenance

        Typography should feel systematic, not random.


      Font Weight

      font-bold, font-normal, and font-light control text emphasis and hierarchy. 

      <h2 class="text-xl font-bold">Section Title</h2>
<p class="font-normal">Body text</p>
<p class="font-light">Secondary text</p>
      • Tailwind provides multiple weight utilities to express meaning, not decoration.
      • Typography is not just about font size - spacing between lines matters just as much.

      Responsive Text Alignment

      text-center centers text on mobile and md:text-left aligns it left on larger screens. 

      <h1 class="text-center md:text-left">
  Responsive alignment
</h1>

      • Typography must work with layout, not against it.

        Typography is Part of Responsive Design

        Typography must adapt to:

        • Screen size

        • Device distance

        • Content density

      Responsive Typography

      text-2xl on mobile, md:text-4xl on tablets, and lg:text-5xl on large screens. 

      <h1 class="text-2xl md:text-4xl lg:text-5xl">
  Responsive heading
</h1>

      • Typography scaling is a core responsive design skill.

        Accessibility & Typography

        Good typography improves accessibility:

        • Readable font sizes

        • Adequate line height

        • Clear contrast

        • Logical hierarchy

        Bad typography:

        • Causes eye strain

        • Hurts screen reader navigation

        • Fails accessibility audits

        Typography is one of the easiest ways to improve accessibility.

        Common Mistakes in Typography

        • Using too many font sizes

        • Ignoring line height

        • Making text too small on mobile

        • Overusing bold text

        • Treating typography as decoration

        Typography should communicate meaning, not just style.

        Best Practices for Typography in Tailwind

        • Use the built-in scale

        • Maintain clear hierarchy

        • Adjust typography responsively

        • Pair font size with line height

        • Limit font families

        • Test with real content

        Consistency is more important than creativity in typography.

      Next ❯