Fluid responsive typography: easy when you know how

I wrote a tiny CodePen to show how little code you need to get your typography scaling smoothly with the viewport: Simple Utopia typography demo

Resize your browser window and watch the heading and body text gradually change size.

You don’t need to be a hot-shot developer to get this working. Anybody who has access to their website’s CSS can do it. I’m not even a developer – I’m a designer. I rarely type any code at all. The Utopia type calculator generates the code for you to copy and paste into your website’s CSS file.

Unlike some other clamp solutions, Utopia abstracts the maths away from specific HTML elements. Instead we create a set of related step values which can then be referred to by multiple elements. It’s a more systematic approach.

I hope this shows how quick it can be to implement simple fluid responsive typography on your website. If you’d like to learn more about how fluid type scales work, watch our introduction to Utopia video.