❮ Previous Next ❯

Font Family

  • Configure and apply custom font families.

  • Font Family - Beyond “Sans / Serif / Mono”

    You already know:

    • font-sans

    • font-serif

    • font-mono

    Now let’s talk about how font families affect UI behavior, not just appearance.

    Font Family as a UX Decision

    Font family impacts:

    • Reading speed

    • Trust perception

    • UI seriousness

    • Technical vs human feel

    Example patterns:

    • Sans-serif → UI, apps, dashboards

    • Serif → Articles, blogs, storytelling

    • Monospace → Code, data, identifiers

    In Tailwind:

    <body class="font-sans">

    This sets a global typographic tone.

    Mixing Font Families 

    Professionals rarely use more than two font families.

    Correct pattern:

    • One primary font (body + UI)

    • One secondary font (code or accent)

      Bad practice:

      • Mixing fonts randomly

      • Changing fonts for decoration

      Font family = identity, not styling.

      Font Family Consistency Across Devices

      Different devices render fonts differently.

      Best practice:

      • Use system font stacks (default Tailwind fonts)

      • Avoid relying on thin or decorative fonts

      • Prioritize legibility over personality

      Typography must survive:

      • Low-resolution screens

      • Different OS rendering engines

      • Accessibility zoom

      Font Size - Scale, Not Decoration

      You already know the classes.
      Now let’s talk about how to choose the right size, not just apply one.

      Font Size is About Reading Distance

      Different devices = different viewing distances.

      • Mobile → close to eyes

      • Desktop → farther away

      This is why mobile text can be smaller but still readable, while desktop text often needs to scale up.

    Responsive Content Text Size

    text-sm on mobile, md:text-base on medium screens, and lg:text-lg on large screens. 

    <p class="text-sm md:text-base lg:text-lg">
  Content text
</p>

    • This is not about “bigger is better” -
      it’s about visual comfort.

      Body Text vs UI Text

      Professionals distinguish:

      • Body text → reading

      • UI text → scanning

    Body Text vs UI Text

    text-base leading-relaxed improves readability for body text, while text-sm is suited for compact UI labels. 

    <p class="text-base leading-relaxed">
  Article content
</p>

<span class="text-sm">
  Button label
</span>

    • Mistake:

      • Using large text everywhere

      • Making UI text too prominent

      Hierarchy comes from contrast, not size inflation.

      Heading Scaling Strategy 

      Headings should scale faster than body text.

      Correct ratio:

      • Body text → small increments

      • Headings → larger jumps

    Responsive Heading Scaling

    text-3xl md:text-5xl scales headings more aggressively while body text increases gradually. 

    <h1 class="text-3xl md:text-5xl font-bold">
  Page Title
</h1>

<p class="text-sm md:text-base">
  Supporting content
</p>

    • This preserves hierarchy at all screen sizes.

      Font Weight - Controlling Attention

      Font weight is one of the strongest attention tools in UI.

      Weight is About Meaning, Not Boldness

      Common professional pattern:

      • Normal → content

      • Medium / semibold → labels

      • Bold → headings only

    Font Weight Hierarchy

    Different font-* utilities create visual hierarchy for headings, labels, and content. 

    <h2 class="text-xl font-semibold">
  Section Title
</h2>

<label class="text-sm font-medium">
  Email address
</label>

<p class="font-normal">
  Helper text
</p>

    • Avoid:

      • Making everything bold

      • Using bold to “fix” poor hierarchy

      Weight + Size Interaction

      Font weight changes perceived size.

      • Bold text looks bigger

      • Light text looks smaller

      That means:

      • Bold text often needs less size

      • Light text often needs more size

    Font Weight and Size Balance

    font-bold makes headings visually stronger while font-light creates softer supporting text. 

    <h1 class="text-4xl font-bold">
  Strong heading
</h1>

<p class="text-base font-light">
  Subtle supporting text
</p>

    • This balance is what makes typography feel refined.

      Accessibility & Font Weight

      Avoid:

      • Very light text (font-thin) for long content

      • Low contrast + light weight combination

      Accessibility rule:

      If text is important, it must be readable without strain.

      Line Height - The Most Underrated Typography Tool

      Line height is more important than font size for long content.

      Why Line Height Controls Readability

      Too tight:

      • Lines collide

      • Eyes lose place

      Too loose:

      • Text feels disconnected

      • Reading rhythm breaks

      Tailwind gives semantic options:

      • leading-tight

      • leading-normal

      • leading-relaxed

      • leading-loose

    Line Height by Content Type

    Different leading-* utilities adjust line height for body text, labels, and headings. 

    <p class="text-base leading-relaxed">
  Long-form readable content
</p>

<label class="text-sm leading-none">
  Username
</label>

<h1 class="text-4xl leading-tight">
  Compact powerful heading
</h1>

    • Using one line height everywhere is a beginner mistake.

      Line Height + Width Relationship

      As text width increases, line height must also increase.

    Line Height with Text Width

    leading-relaxed on small screens and md:leading-loose increases spacing for wider text. 

    <p class="max-w-prose leading-relaxed md:leading-loose">
  Wide-screen optimized reading content
</p>

    • Why:

      • Longer lines require more vertical spacing

      • Prevents visual fatigue

    Responsive Typography Pattern

    Combines responsive font size, line height, and readable width for a professional typography layout. 

    <p class="text-sm leading-normal md:text-base md:leading-relaxed">
  Responsive reading experience
</p>

<article class="max-w-prose mx-auto font-sans">
  <h1 class="text-3xl md:text-5xl font-bold leading-tight mb-4">
    Article Title
  </h1>

  <p class="text-base md:text-lg leading-relaxed">
    Carefully tuned typography for professional reading experience.
  </p>
</article>

    • This example shows:

      • Controlled font family

      • Intentional font size scaling

      • Proper weight usage

      • Optimized line height

      • Real production typography

        Common Advanced Typography Mistakes

        • Using font size instead of hierarchy

        • Ignoring line height completely

        • Making UI text too large

        • Overusing bold weights

        • Mixing font families randomly

        Typography problems usually feel like:

        “Something looks off”
         And typography is usually the reason.

        Professional Typography Mindset

        Think in terms of:

        • Reading comfort

        • Visual hierarchy

        • Device distance

        • Content importance

        Not:

        • “This looks cool”

        • “Make it bigger”

        • “Make it bold”

      ❮ Previous Next ❯