Easy responsive typography - video

CSS layouts made simple - video

Play "Easy responsive typography" on YouTube.


The reason for this video

This is an extra to the main no script podcast.

As part of the podcast we are live designing and developing the show's website. This is so as the show progresses we can highlight the huge number of significant advances that have been coming to the web platform recently (mostly HTML and CSS).

Ahead of our episode on typography (where there will be too much to cover) I thought it might be helpful to do a quick walkthrough of the responsive typography that's already been set up.

As with much of the podcast we are presently learning how to move to the more flexible intrinsic web design approach.

I hated having to set font sizes for different devices with media queries. It got ever more time consuming and ineffective as the range of devices available grew.

Adding more breakpoints as most page builders did only made site's harder to change, bloated and still unable to serve users of the future.

Fortunately, CSS has given us a function called clamp. With this, we can get the browser to do all the hard work for us. We just set our minimum and maximum size parameter and it will do the calculation to see the right size is served to the user.

Even better, we don't really have to write it or understand it. There are free copy and paste tools out that create custom property we can use in our designs

Utopia - Fluid Type Scale Calculator

The one I used here is Utopia.fyi.

It is made by James Gilyead (a designer specialising in typography) & Trys Mudford (a really smart frontend developer) and is supported by Clearleft a UK agency co-founded by Jeremy Keith.

I have tried other tools, but I like Utopia best because:

Also mention in the video is Typescale.com and the new unit for the text-wrap property:- balance and pretty which help balance text and reduces widowed words.