Part 5: Dynamic Typography Redux: clamp() on it

Jason Pamental
Web Typography News
7 min readMay 19, 2020

--

This week has a big update to the typographic scaling that features some very new CSS about which I’m pretty excited. It’s featuring a new way of defining low, scaling, and high values for things like font-size that removes a bunch of complexity from how I was handling this before. What I appreciate is that we can keep the different sizes we have defined so far for small, mid, and larger size screens — and just layer in the new scaling technique where it’s supported (which is pretty much every shipping browser these days). We’ll right away have font-size and line-height that scales nicely across the whole range fo screen sizes without needing a single media query. Let’s dig into a new approach to making our typography dynamic.

Clamp()-ing on to a new approach

Over the past couple of years I’ve focused on scaling typography based on a technique called CSS Locks, which I wrote about a while back in the newsletter. Conceptually it focused on starting on smallest screens with the smallest size you wanted a piece of text to appear, and scaled that text up along with the screen size until it reached a maximum size specified. But this depended upon breakpoints and a lot of pretty complex math. Recently however support for a new technique has become supported in all the shipping browsers that provides a much simpler approach.

Scaled typography on small screen and large
Large and small screen views of the scaled chapter title

--

--

Web Typography News
Web Typography News

Published in Web Typography News

A collection of web typography tips from my weekly newsletter. You can sign up for the newsletter via email at http://eepurl.com/ghd9b9 or find out more about Jason’s talks and writing at https://rwt.io

Jason Pamental
Jason Pamental

Written by Jason Pamental

principal designer @ Chewy.com. tinkerer, typographer, teacher, speaker. http://rwt.io, author:Responsive Typography (bit.ly/rwtbook). walker of Leo.

No responses yet