Responsive Typography With Clamp
Published: 2023-11-16 16:06:08

 by [Henry Agu](https://blog.openreplay.com/authors/henry-agu)

<blockquote><em>
As a FrontEnd Developer, one of the most tiring things to do is to specify the property of text elements for different screen sizes using `media-query,` which leads to a large (Cascading Style Sheets) CSS code file. This article will show you how to make website texts responsive without having to use `media-query,` thereby saving time and space.
</em></blockquote>


Before diving into CSS `clamp(),` the tool we'll be using, let us look at the meaning of "clamp" for a clearer understanding. Clamp according to the [Merriam-Webster dictionary](https://www.merriam-webster.com/):

<blockquote><em>A clamp is designed to bind, constrict, or press two or more parts together to hold them firmly.
</em></blockquote>

This is no different from CSS `clamp()`; it holds three values together, which guide the browser on what CSS property value to render based on the value stated in our `clamp().` It clamps a value between the maximum and minimum bounds. The `clamp()` function is powerful and versatile; it eases responsiveness and is not just used for fonts alone but can be used on images, videos, etc.. for this article, we will be focusing on the typography use of the `clamp()` function, exploring its syntax, use cases and practical examples to demonstrate how it can be harnessed to create responsive designs that scale elegantly.

<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>

## How CSS Clamp Works On Responsive Typography
Using the `clamp()` function for the `font-size` of our elements allows it to be fluid based on the specified viewport. This is a great way to ensure that our web page texts scale properly across different screen sizes, and this approach reduces the `media-query` codes we get to write. Let us now look at the syntax of the `clamp()` function
```css
font-size: clamp(minimum, preferred, maximum);
```
From the above syntax:
* `font-size` refers to the CSS property that carries the `clamp()` function.
* `minimum`: This function tells the browser that the value is the smallest font can have and should not go lower than that. For example, if the minimum value is set to "10px", the `font-size` of our text on the smallest of screens will not go below "10px" because the browser reads it as the minimum font size.
* `preferred`: This is the center value of the `clamp()` function. It sets the viewport width that our font exists in; this width will be used when it fits in the range of the minimum and maximum values. `clamp()` texts are fluid according to their `view-width(vw)`. Therefore, our preferred value should be a dynamic unit such as `vw`.
* `maximum`: This is just the direct opposite of the `minimum`; it represents the highest value the font should take, which is not to be exceeded. The maximum value will be applied if the preferred value exceeds the maximum font size.
Let's now assign values to our `clamp()` function above and see our result.
Here is the HTML
```html
<body>
 <h1>This font is scalable</h1> <!-- Large font size -->
 <h2>This font is scalable</h2> <!-- Medium font size -->
 <h3>This font is scalable</h3> <!-- Small font size -->
 <h6>This font is scalable</h6> <!-- Smallest font size -->
 <p>This font is scalable</p> <!-- Default font size -->
</body>
```
And here is the CSS
```css=
/* Styling for different heading levels */
h1{
  font-size: clamp(25px,8vw,100px);
}
h2{
  font-size: clamp(18px,7vw,85px);
}
h3{
  font-size: clamp(14px,6vw,70px);
}
h6,p{
  font-size: clamp(10px,5vw,20px);
}
```
This is the output below:
![--](https://blog.openreplay.com/images/responsive-typography-with-clamp/images/image1.gif)
 
## How CSS Clamp Works With Relative Units
In our example above, the `font-size` is responsive; it scales according to the `vw`, which is what we want, but there is an issue: if our web page is zoomed in or zoomed out, the `font-size` stops being responsive. So to solve this, it is important to add a `rem` unit to the `vw,` which ensures that the `font-size` is readable and scales accordingly to the `vw`. Let us add a `1rem` unit to each of our `font-size` to understand this better
```css
h1{
  font-size: clamp(25px,8vw + 1rem,100px);
}
h2{
  font-size: clamp(18px,7vw + 1rem,85px);
}
h3{
  font-size: clamp(14px,6vw + 1rem,70px);
}
h6,p{
  font-size: clamp(10px,4vw + 1rem,20px);
}
```
Now, the `font-size` increases and decreases accordingly whenever we zoom in or out.
![--](https://blog.openreplay.com/images/responsive-typography-with-clamp/images/image2.gif)
How `clamp()` works with relative units differs, especially on the preferred `vw` indicated in the `clamp()` function. The combination of `rem` and `vw` can lead to font sizes that are comfortable to read across various devices, screen sizes, and orientations.

<CTA_Middle_Design />

## How To Use Clamp on Line Height And Letter Spacing
Using the `clamp()` function, we can also make the `line-height` and the `letter-spacing` of our font responsive across different screen sizes and browsers while maintaining its readability. Here is how to use `clamp()` on `line-height` and `letter-spacing`:
### Line Height Using Clamp
The `line-height` property is commonly used to set the distance between two parallel lines of text by defining the height of each line of text. The `line-height` property is significant for maintaining readability and aesthetics in your typography. Here is an example of how to use `line-height` property in `clamp()`:
```css
.top_section h1 {
 font-size: clamp(40px, 8vw + 1rem, 100px);
 line-height: clamp(0, 10vw + 1rem, 60px);
}
```
In the example above, the `line-height` of the `h1` element starts at the minimum of 0 and scales up to the maximum value of `60px`, ensuring the text remains readable while adapting to a different screen size.
### Letter Spacing Using Clamp
The `letter-spacing` property controls the amount of white space between characters of a word. It is used to increase or decrease the space between characters in a text element, which helps in the visual appearance of that text. Here is an example of how to use the `letter-spacing` property in `clamp()`:
```css
.top_section h1 {
 font-size: clamp(40px, 8vw + 1rem, 100px);
 letter-spacing: clamp(2px, 10vw + 1rem, 10px);
}
```
In the example above, the `letter-spacing` within the `h1` element starts at the minimum of `2px` and scales up to the maximum value of `10px`, ensuring that the spacing remains appropriate while accommodating various screen sizes.
Now we know how to use the `clamp()` on both the `line-height` and the `letter-spacing` properties, let us combine both in this example below.
This is the HTML
```html
<body>
 <div class="top_section">
  <h1>START PAGE</h1>
  <h6>Welcome To Start Page</h6>
  <button>Get Started</button>
 </div>
</body>
```
And this is the CSS
```css
body {
 margin: 0 auto;
 width: 85%;
 padding: 0;
 font-family: "Inter", sans-serif;
}
.top_section {
 display: flex;
 flex-direction: column;
 text-align: center;
 align-items: center;
 justify-content: center;
 height: 100vh;
}
.top_section h1 {
 font-size: clamp(40px, 8vw + 1rem, 100px);
 letter-spacing: clamp(2px, 10vw + 1rem, 10px);
 line-height: clamp(0, 10vw + 1rem, 60px);
 margin: -10px 0;
}
.top_section h6 {
 font-size: clamp(14px, 8vw + 1rem, 20px);
 letter-spacing: clamp(2px, 10vw + 1rem,5px);
 line-height: clamp(0px, 10vw + 1rem, 60px);
}
.top_section button {
 background-color: #000;
 color: #fff;
 padding: 10px 30px;
 cursor: pointer;
 font-size: clamp(10px, 8vw + 1rem, 20px);
}
```
This is the output below:
![--](https://blog.openreplay.com/images/responsive-typography-with-clamp/images/image3.gif)
 
We can notice how the `line-height` and `letter-spacing` scales appropriately.
## Fallback Values For Older Browsers
Although the browser support for CSS `clamp()` is pretty good across all modern browsers, you may want to set fallback values for clamp in case the website is running on a browser that is yet to support `clamp().`Doing so will help us ensure that our responsive design remains functional and visually acceptable for users on those browsers. Here is an example of how it can be done
```css
/* Fallback for browsers that do not support clamp() */
h1 {
 font-size: 70px;
 color: red;
 letter-spacing: 10px; /* Fallback letter spacing value */
 font-family: "Raleway", sans-serif;
 /* Modern browsers that support clamp() */
 font-size: clamp(20px, 8vw + 1rem, 70px);
 letter-spacing: clamp(1px, 0.3vw, 10px);
}
```
This is the output below:
![--](https://blog.openreplay.com/images/responsive-typography-with-clamp/images/image4.gif)

We can notice that when we turn off our `font-size` with CSS `clamp()` on our developer tools, the browser will immediately fall back to the other `font-size` specified.
## Conclusion
In this article, we talked about responsive typography, CSS `clamp(),` and how to make our `font-size,` `line-height,` and `letter-spacing` responsive using CSS `clamp()`. We will stop here for now, and I urge you to do more research and discover more about CSS `clamp()` using the foundation I have given you.