Fluid typography: The clamp() magic
Tbilisi JS Meetup #7, 16/08/2025 📍
Part 1. Let’s find some problems
Expectations
Reality
Our goal
Change the size of the heading so it adapts smoothly and consistently across all breakpoints.
Part 2. In the search for the right approach
Current styles
h1 {
font-size: 3rem;
}
@media (width >= 576px) {
h1 {
font-size: 4rem;
}
}
@media (width >= 768px) {
h1 {
font-size: 7rem;
}
}
Approach #1: Add extra breakpoints and suitable values for font-size 🙂
New styles
h1 {
font-size: 3rem;
}
@media (width >= 460px) {
h1 {
font-size: 3.2rem;
}
}
@media (width >= 576px) {
h1 {
font-size: 4rem;
}
}
@media (width >= 768px) {
h1 {
font-size: 6rem;
}
}
@media (width >= 700px) {
h1 {
font-size: 5rem;
}
}
@media (width >= 992px) {
h1 {
font-size: 7rem;
}
}
Number of breakpoints
Now 🫠
- ≥ 460px
- ≥ 576px
- ≥ 700px
- ≥ 768px
- ≥ 992px
Approach #2: Change the heading size not in a responsive way but in a fluid one.
Responsive font size
Fluid font size
How to make the font fluid?
- JavaScript 🦖
- Preprocessors and mixins
calc() and the vw/vh unitsclamp().
The clamp() definition
The CSS function for setting up the range of values for some CSS properties.
clamp() anatomy
- Minimum (
minValue)
- Preferred (
prefValue)
- Maximum (
maxValue).
clamp(minValue, prefValue, maxValue);
A preferred value enables smooth text size adjustments.
Preferred width (vw)
Relative size (rem)
Unknowns
- y1 = the min font size
- y2 = the max font size
- x1 = the min breakpoint (here the min font size ends)
- x2 = the max breakpoint (here the max font size begins).
Approach with the formula
- More smoother scaling
- Text isn’t too small on mobile devices
- Text doesn’t become larger too abruptly as the screen width increases.
Part NaN: Don’t touch it when it works
Success in fluid approach
- Don’t set the min and the max font sizes in pixels
- Keep an eye on the ratio between the largest and the smallest font sizes.
Problems with pixels
If you set the font size in pixels, the browser’s default text size (16 pixels) will be overridden, and text won’t scale when user settings change.
Reset the root size
html {
font-size: 15px;
}
h1 {
font-size: 1rem;
}
Ratio between larger and smaller values
The max font size must be less than or equal to 2.5 times the min font size 🤯
Why this ratio?
Text with inappropriate sizing doesn’t scale well because it won’t achieve a proper increase due to overlap between zoom and scaling functions.
Who resizes and rescales the UI?
- People with different eye conditions
- Those who want to make font and elements larger for any reason.
Part 4: Polishing the demo
Rewrite the code
Then
h1 {
font-size: 3rem;
}
@media (width >= 460px) {
h1 {
font-size: 3.2rem;
}
}
…
Now
h1 {
font-size: clamp(3rem, 5vw + 1.5rem, 7rem);
}
Final touches: Round the numbers for better code readability ✨
Rounding the numbers
h1 {
font-size: clamp(3rem, 5vw + 1.5rem, 7rem);
font-size: clamp(3rem, round(down, 5vw + 1.5rem, 2px), 7rem);
}
Issues with round()
- A new feature with some rough edges in implementation
- Slows down the performance (so if your laptop freezes, blame everything on CSS).
Fluid typography doesn’t replace responsive typography. The choice depends on the specific case.
Fluid typography pros ➕
- Doesn’t require supporting a large set of breakpoints
- Achieved with a single line of CSS
- You don’t need to create separate design layouts for every screen size.
Fluid typography cons ➖
- The calculation logic for the preferred size is difficult
- Can break browser page zoom functionality
- Text is unpredictable, so the final layout may differ from the expected results.
Fluid typography use cases
Any heading, especially large ones, and texts with noticeable size differences.
`
