Flexible Typography: How to create a fluid design by using the Clamp() function

Nowadays, Creating a responsive website is a trend as responsive website design is an important factor in improving user experience.

Responsive typography is grown increasingly important as it allows text to adjust dynamically based on the screen size it is viewed on. Traditional methods of creating responsive designs have some fixed breakpoints.

Fluid typography is a powerful tool for creating responsive and adaptable designs. By understanding the basic principles and implementing them effectively, one can create a design system that looks great and works well across a wide range of devices and screen sizes. CSS Function clamp() is very helpful in responsive typography as it can be useful to reduce the number of lines as well as complexity of the code you need for smooth, responsive typography.

Also Read: A Total Brief About CSS Preprocessor You Need To Know

What is Fluid Typography ?

Fluid Typography is a technique to define font-size, Height, Width, Margin, Padding according to screen size. Typographic values such as font size, line height, spacing between letters may be adjusted as the screen size increases.

It is an approach that involves using font sizes that can be adjusted based on screen size and device orientation. This approach is particularly useful for websites and mobile apps where users may be accessing content on a variety of different devices with varying screen sizes and resolutions; it can be used in heading fonts, display texts etc.

Fluid Typography VS Traditional Responsive Typography

In Traditional method of making responsive typography, designers utilize fixed breakpoints for: Desktop, Tablet, Mobile and breakpoints are based on browser width.

Problem with traditional responsive typography occurs when variable screen size is according to devices. To eliminate these problems, designers are making more breakpoints in a stylesheet but it leads to more complexity in code.

What is clamp() Function ?

The CSS Function clamp() essentially clamps values between upper & lower bound, it enables selecting a middle value within a range of values between a defined minimum and maximum bound.

clamp([minimum-value], [preferred-value], [maximum-value]);

In use of clamp function, minimum value is useful when minimum value is smaller than preferred value, maximum value is useful when maximum value is greater than preferred value. clamp() function comes with all major modern browser support. Let’s look at an example of a clamp function and how it works.

Simple setup

So to set this up successfully, we will give font size in viewport-width (vw) and viewport-height(vh). We also set up minimum value and maximum value of font-size otherwise content becomes not readable at very small devices. That’s the reason use of clamp() function is perfect because you can set up the minimum value and maximum value in the clamp() function.

A little fancier now

We are setting up padding preferred value 3vw which is 3% of screen size. Minimum value is 12px and maximum value is 85px. So padding is not smaller than minimum value and not larger than maximum value.

Then on the next step setting up font size of heading in H2 tag preferred value 3vw and minimum value is 20px and maximum value is 50px. Also setting up margin preferred value 1vw and minimum value is 8px and maximum value is 25px.

Then on the next step setting up font size of heading in H5 tag preferred value 2vw and minimum value is 19px and maximum value is 35px. Also setting up margin preferred value 1vw – 5px and minimum value is 5px and maximum value is 20px.

This method also works with the same screen height system. Simply you can define typography in viewport-height(vh) instead of viewport-width(vw).