Responsive Typography Made Easy: The Magic of Clamp()
A cluttered desk with multiple laptops, tablets, and smartphones of various screen sizes scattered haphazardly
“The key to great design is not in the details, but in how the details adapt to the context.”
In this article:
🤔 Why we need responsive typography.
⚖️ Adaptive vs liquid layouts.
🏆 Which one is best and why.
🗜️What is clamp() and how does it utilise both?
🧑🏽💻 Examples and try it yourself.
🤔 Why do we need responsive typography?
When the World Wide Web hit mobile screens in the 2010s, users were stuck with shrunk-down, impossible-to-navigate desktop sites—and we just had to deal with it. Trust me, the constant zooming in and out was painful. Let’s not even talk about resizing your browser window. Since then, technology has raced to keep up with countless devices and screen sizes, making the web more accessible, readable, and user-friendly than ever. Enter responsive design.
See for yourself ➡️ window93.net
A video of a Windows93 desktop where resizing the browser hides folders and text, showing unresponsiveness.
⚖️ What kind of responsive solutions are out there?
Adaptive vs Fluid layouts.
Fluid layouts are based on scaling text according to screen width. The bigger the screen the bigger the font and vice versa. The problem is of course, tiny text on mobile or narrow browser windows and huge text on widescreens.
Fluid layouts don’t use pixels as they don’t scale up or down, but are fixed. Instead viewport width is used as a unit (e.g font-size: 5vw). The font-size is 5% of the total viewport (browser window) width. For example if the viewport is 1000px wide then the font-size will be 50px (5% of it).
See the video below.
-
5vw - viewport width means make the font-size in px 5% of the total screen width. E.g browser window (1000px) font-size (50px)
Fluid typography using viewport width. 5vw means - if the screen is 1000px wide the text will be 50px (5%)
h1 {
font-size: 5vw;
}
p {
font-size: 2vw;
}Adaptive layouts use fixed sizes based on hitting certain set widths. E.g when a browser window is 1024px wide on a desktop, use size 18px for a paragraph. When it is a mobile 360px wide, use 16px font-size.
This is known as a breakpoint. A breakpoint is a specific width (or sometimes height) in a web page's layout where the styling of the page changes to adapt to different screen sizes. These are used in media queries. This are a CSS technique that allows you to apply these different styles.
Adaptive design with multiple media queries can result in jarring resizing as the layout shifts abruptly at breakpoints, and an increasing amount of code complexity.Not very mindful.
“The middle path is the best path.”
🏆 Which one is best and why?
The Buddha was miles ahead. The best solution is to use both approaches. Fluid font sizing but within an acceptable range. We also need to use breakpoints to make this properly adaptable.
Enter clamp() 👏
clamp(min value, preferred range of values, max value)
clamp(don’t go any smaller, this range is acceptable based on how wide your screen is, this is big enough stop here)
We need to reign in the excesses of having tiny text and huge text, whilst adapting gently to your screen width (viewport width) within a normal-looking range. Legible, accessible, clear. Enter clamp() 👏
