Font testing

comparing old fonts to tailwind with clamp sizing

This tailwind example is contributed by Sherry Lynne, on 30-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Sherry Lynne

Tailwind v3.4 358 1

Fork Fullscreen

<div class="font-light bg-white w-screen p-5">
  <div class=" max-auto p-5 mb-5">
    <h1 class="text-4xl py-3">Font Comparison: Old to Tailwind</h1>
    <div class="grid 2xl:grid-cols-2">      
      <div class="old bg-neutral-200 px-5 py-2">
        <h1 class="jumbo">Old jumbo oversized header</h1>
        <h1>Old h1 standard header</h1>
        <h2>Old h2 non-bold header</h2>
        <h2 class="sidebar-title">Old sidebar-title header</h2>
        <h3>Old h3 medium but bolder header</h3>
        <h4>Old h4 moderate but bolder header</h4>
        <h5>Old h5 (actually the smallest header)</h5>
        <h6>Old h6 (non-bolded version of h4)</h6>
        <article class="my-2">
          <p class="mb-3">Plain text (in content).</p>
          <p class="lead">Plain class lead.</p>
          <p class="intro">Plain class intro.</p>
          <h2>Styles for specific HTML tags</h2>
          <p>This is an example of <strong>&lt;strong&gt; text</strong> and <em>&lt;em&gt;phasized text</em> within copy. </p>
          <p>This is an example of <bold>&lt;bold&gt; text</bold> and <i>&lt;i&gt;talicized text</i> within copy. </p>
          <p>This is an example of superscript<sup>2</sup> text and subscript<sub>3</sub> text. </p>
          <p>This is an example of <small>&lt;small&gt; text</small> and <u>&lt;u&gt;nderlined text</u> within copy.</p>
          <p>This is an example of standard size text with <span class="uppercase">class uppercase</span> and 
          <span class="lowercase">CLaSs LoweRCase</span> in the copy.</p>
          <p>This is an example of an abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>.</p>
          <p class="legal">This is an example of small text -- which is usually how we set up legal blah-blah below an article.</p>
          
          <h3>Additional text styles</h3>
          <p>This is a replacement for <span class="stat">class stat</span> and <span class="stat-sm">class stat-sm</span> within copy.</p>
          
        </article>
        <p class="mb-3">Plain text (outside content area).</p>
      </div>
      <div class="tw border border-neutral-300 p-5">
        <h1 class="xlarge">New jumbo oversized header</h1>
        <h1>New h1 standard header</h1>
        <h2>New h2 non-bold header</h2>
        <h2 class="sidebar-title">New sidebar-title header</h2>
        <h3>New h3 medium header</h3>
        <h4>New h4 bold header</h4>
        <h5>New h5 (scaling correctly)</h5>
        <h6>New h6 (no longer matching h4)</h6>
        <article class="my-2">
          <p class="mb-3">Plain text (in content).</p>
          <p class="lead">Replace class lead.</p>
          <p class="intro">Replace class intro.</p>
          <h2>Styles for specific HTML tags</h2>
          <p>This is an example of <strong>&lt;strong&gt; text</strong> and <em>&lt;em&gt;phasized text</em> within copy. </p>
          <p>This is an example of <bold>&lt;bold&gt; text</bold> and <i>&lt;i&gt;talicized text</i> within copy. </p>
          <p>This is an example of superscript<sup>2</sup> text and subscript<sub>3</sub> text. </p>
          <p>This is an example of <small>&lt;small&gt; text</small> and <u>&lt;u&gt;nderlined text</u> within copy.</p>
          <p>This is an example of an abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>.</p>

<h3>Additional text styles</h3>
          <p>This is a replacement for <span class="stat">class stat</span> and <span class="stat-sm">class stat-sm</span> within copy.</p>
          <p>This is an example of standard size text with <span class="uppercase">class uppercase</span> and 
          <span class="lowercase">CLaSs LoweRCase</span> in the copy.</p>
          <p><strong>No</strong> built-in tailwind class for font-varient Small-Caps.</p>
          <p class="legal">This is an example of small text -- which is usually how we set up legal blah-blah below an article.</p>
          <p>Service Mark℠, Trade Mark™, Registered Mark<sup>®</sup>, © Copyright</p>
        </article>
        <p class="mb-3">Plain text (outside article).</p>
      </div>
    </div>

</div>
</div>

Related Examples

Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Walid Ahmad

2 years ago

2.9k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Augustin

1 year ago

1.5k
Checkbox
Checkbox

Aman kumar

2 years ago

2.8k
machine
tell you how your MAC pc work

gidy

10 months ago

748
Payment Cards

Shammi Nethupul

2 years ago

3k
nft card
nft card

5upreme505

1 year ago

2.1k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.1k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Chat Bot

Md. Tofayel islam

1 year ago

1.3k
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

INGRIDE MUZIRANENGE

1 year ago

1.3k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

SHARIFUL ISLAM

1 year ago

2.3k