DEV Community

Cover image for CSS Fluid Typography: A Guide to Using clamp() for Scalable Text
Emore Ogheneyoma Lawrence
Emore Ogheneyoma Lawrence

Posted on

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

Table of content

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>


Enter fullscreen mode Exit fullscreen mode

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

Image description

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>


Enter fullscreen mode Exit fullscreen mode

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:
Image description

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)


Enter fullscreen mode Exit fullscreen mode
  • 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) */
}


Enter fullscreen mode Exit fullscreen mode

Let's see how it looks on the browser:

Image description

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!

Top comments (13)

Collapse
 
martinfjant profile image
Martin Falk Johansson

Be careful when using this, since it might fail accessibility requirements if it's not possible to zoom the text! smashingmagazine.com/2023/11/addre...

Collapse
 
dumebii profile image
Dumebi Okolo

Nice ๐Ÿ”ฅ ๐Ÿ”ฅ

Collapse
 
devyoma profile image
Emore Ogheneyoma Lawrence

Thank you ๐Ÿ™

Collapse
 
ricardogesteves profile image
Ricardo Esteves

Cool!

Collapse
 
devyoma profile image
Emore Ogheneyoma Lawrence

I'm glad you enjoyed reading it
Thank you ๐Ÿ™‚

Collapse
 
diyanyagari profile image
diyanyagari

nice bro ๐Ÿ”ฅ

Collapse
 
devyoma profile image
Emore Ogheneyoma Lawrence

I'm glad you enjoyed reading it
Thank you ๐Ÿ™‚

Collapse
 
obinna_cfba2283268b69bf0d profile image
Obinna

Really helpful css trick. Thanks ๐Ÿ‘๐Ÿพ

Collapse
 
devyoma profile image
Emore Ogheneyoma Lawrence

Glad it helped you Obinna

Collapse
 
ikennae_ profile image
Ikenna Eze

Nice one bro ๐Ÿค๐Ÿผ

Collapse
 
devyoma profile image
Emore Ogheneyoma Lawrence

I'm glad you enjoyed reading it
Thank you ๐Ÿ™‚

Collapse
 
haghft profile image
Mahdi Tehrani

Nice bro ๐Ÿ‘Œ
TNX ๐Ÿ™

Collapse
 
devyoma profile image
Emore Ogheneyoma Lawrence

I'm glad you enjoyed reading it
Thank you ๐Ÿ™‚