Fluid typography is one of those concepts in web design that I feel like is still in its infancy. Not many people know about or use it but it's actually among the most powerful tools for building better responsive websites.
In essence, fluid typography breaks away from fixed typography sizes at certain breakpoints and instead embraces a dynamically calculated font-size for the current screen size.
You can think of fluid typography sizing as being a function like y = mx+b where y is the size of the font and x is the current screen size.
Anyways, the tip I want to point out here is that we can build fluid typography systems using a very special CSS property called clamp.
clamp is actually a function in CSS and it accepts 3 parameters: a minimum size, a dynamic size, and a max size.
You can read more about clamp on MDN but basically what you need to know about it is that it constrains a CSS property's value to a range between two numbers. You can sort of see already how this will be used to build fluid font sizes.
Alright, so to build fluid typography systems, we need to know two things about our fonts:
- What size it will be on small screens
- What size it will be on large screens
In other words, what's the smallest font size and largest font size for this particular style. Let's say we're styling our h1 for example and the smallest it should be is 48px and the largest is 64px.
With that knowledge, we can generate a clamp function that will return a dynamic font size between 48x and 64px.
I prefer to use this fluid typography generator for getting my clamp functions.
To use it, enter in your two font sizes as well as the breakpoints for your smallest screen size and largest screen size.
You'll then have a clamp function you can copy and use for your font-size property and now you won't have to worry about specifically setting font sizes for each breakpoint in your design.
