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 389 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

Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

540
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
InfoWindow Mapy rzemieślników Desktop

Antoni Wierzba

5 months ago

186
Chat template
fullscreen chat template suitable for mobile devices

Manon Daniel

3 years ago

18.2k
Pricing Plans

ariaw

1 year ago

634
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

1.3k
Stepper - Without Buttons

farisubuntu

2 years ago

2.1k
InGen

Dennis Kamp

7 months ago

439
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

SHARIFUL ISLAM

1 year ago

3.8k
User Profile Skeleton
Profile page skeleton built with Tailwind CSS. Includes a cover banner, avatar, profile details, stats, navigation tabs, about section, and activity feed placeholders.

JUGENDRA GANGWAR

2 weeks ago

19