Home Web Front-end CSS Tutorial CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Sep 18, 2024 pm 06:35 PM

Table of content

  • Introduction
  • Using clamp() Function to Achieve Fluid Typography
  • Conclusion

Introduction

Writing CSS media queries can be sometimes challenging fun, especially when there are too many things to be done. We often focus so much on building the layout and making other parts of our website responsive that it becomes stressful. But what if we could reduce that stress by making our text scalable, no matter the screen size, without needing to write a ton of media queries?

Let’s dive in and get started on how to achieve fluid typography using the CSS clamp() function.

Using Clamp() Function to Achieve Fluid Typography

The problem

Here’s a basic webpage with an H1 tag and a P tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fluid Typography</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
            background: #333;
            color: white;
            text-align: center;
        }

        h1{
            font-size: 5rem;
        }

        p{
            font-size: 3rem;
            color: red;
        }
    </style>
<body>
    <h1>CSS Fluid Typography</h1>
    <p>Why is this text not scalable</p>
</body>
</html>
Copy after login

Now let's take a look at how the text behaves on different screen sizes

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

A simple way to make the text above responsive is to use media queries, but in this article, we’ll make the text responsive using the CSS clamp() function.

But before that, let's first look at the vw (viewport width) unit. The vw unit allows you to set your font size relative to the width of the viewport, making your text responsive.

Let's update our existing code with the following changes:

<style>
  h1 {
    font-size: 10vw; /* H1 size is 10% of the viewport width */
  }
  p {
    font-size: 5vw;  /* p size is 5% of the viewport width */
    color: red;
  }
</style>
Copy after login

If the viewport width is 1000px:
The h1 font size will be 100px
The p font size will be 50px
The font sizes for H1 and p will continue to grow or shrink as the viewport width changes.

Let's see how it looks:
CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

From the GIF above, we can see that using vw works for responsive text but lacks constraints. As the viewport width increases, the font size will keep growing without limit, and similarly, it will keep shrinking when the viewport width decreases.

This is where the clamp() function comes into play. clamp() allows you to set a minimum, preferred, and maximum font size, providing control over how the text scales within a defined range.

The Solution

Using the clamp() function

The clamp() function in CSS allows you to set a range for your font size.
The general format is :

clamp(minimum, preferred, maximum)
Copy after login
  • Minimum: The smallest size your text can shrink to.
  • Preferred: The ideal size, often a percentage of the viewport width
  • Maximum: The largest size your text can grow to.

Let's use the example from above and modify the code with the following

h1{
  font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}

p{
  font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px)
}
Copy after login

Let's see how it looks on the browser:

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Now, the h1 and p elements will be responsive, as their sizes will stay within the defined range, ensuring they don't become too large or too small.

Conclusion

In this article, we have learnt how to achieve fluid typography using the CSS clamp() function. Thank you for reading to this point. I ask that you drop a like and share this article with your peers who will benefit from this.

What are your thoughts on this article? Feel free to share your thoughts in the comments section below.

P.S. I'm currently looking for frontend developer opportunities. If you have any leads or are hiring, feel free to check out my resume or connect with me on LinkedIn. I'd love to hear from you!

The above is the detailed content of CSS Fluid Typography: A Guide to Using clamp() for Scalable Text. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1266
29
C# Tutorial
1239
24
Google Fonts   Variable Fonts Google Fonts Variable Fonts Apr 09, 2025 am 10:42 AM

I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference

How to Create an Animated Countdown Timer With HTML, CSS and JavaScript How to Create an Animated Countdown Timer With HTML, CSS and JavaScript Apr 11, 2025 am 11:29 AM

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more

HTML Data Attributes Guide HTML Data Attributes Guide Apr 11, 2025 am 11:50 AM

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

A Proof of Concept for Making Sass Faster A Proof of Concept for Making Sass Faster Apr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

How We Created a Static Site That Generates Tartan Patterns in SVG How We Created a Static Site That Generates Tartan Patterns in SVG Apr 09, 2025 am 11:29 AM

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan

How to Build Vue Components in a WordPress Theme How to Build Vue Components in a WordPress Theme Apr 11, 2025 am 11:03 AM

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.

PHP is A-OK for Templating PHP is A-OK for Templating Apr 11, 2025 am 11:04 AM

PHP templating often gets a bad rap for facilitating subpar code — but that doesn&#039;t have to be the case. Let’s look at how PHP projects can enforce a basic

A Comparison of Static Form Providers A Comparison of Static Form Providers Apr 16, 2025 am 11:20 AM

Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML

See all articles