Fluid typography
(and its role in design systems)

• Reid Miles
• Paul Bacon
• Elements of Typographic Style by Robert Bringhurst
• Clearleft
• Creative Boom
• Utopia
• Retrofitting Fluid Typography
• Utopia starter for Figma
• Utopia blogpost about fluid type scales
• UCL Design System
• Storybook

So, today I'm going to talk to you...

Oh, I am aware that this is the last talk, so I am between you and free beer.

If you're online, maybe you're already on the beer.

Nothing wrong with an afternoon Saturday beer.

Of course, you might be Saturday morning where you are.

No judgment here, that's fine too.

I'm going to talk to you about fluid typography and its role in design systems.

So, I'm going to try and keep you awake.

So, I thought I'd start by showing you these magnificent blue note jazz album covers.

Now, I'm not the world's biggest jazz fan.

I do have an appreciation for it, but I do love these covers.

You may have heard of a designer called Reed Miles.

He's a great jazz name, but he's not a musician, not even close actually.

But he is most famously associated with the designs of the blue note covers.

Some of his designs are in here, but actually most of these ones were designed by a chap called Paul Bacon in the 1950s.

They set the scene for Reed Miles' work.

Now, of course, the sound of blue note jazz is as distinctive as the album covers themselves because they feature some of the very best jazz musicians that the world has ever known.

The thing about jazz, especially from this era of the 1950s, the bebop era, is that so much of it is improvised.

The way that that happens is there's a set of agreements amongst the players up front, whether that be time signature, a chord sequence, maybe a melodic hook, a set of agreements and foundations.

Then they're away and they can improvise.

Just as these harmonics are foundational to jazz improvisation, so we have in our world tight spacing color being foundational to systematic design.

So long as you have those agreed fundamentals, you can start improvising yourselves and you can riff on designs and keep those designs in harmony with one another.

Now of course, type, typography and type scales is often associated with music or compared with music, spoken of in the same sort of sentence sometimes.

A scale as defined or explained by Robert Bringhurst, a Canadian poet and typographer who wrote what some consider the typographer's bible, the elements of typographic style.

He described a scale simply as a prearranged set of harmonic proportions.

This is the classic type scale.

The interval is 1.2.

That means that each subsequent larger type size is 1.2 times the previous size.

If you've been to an online type scale generator ever, you'll know we also describe type scales in terms of musical terminology.

So this interval, 1.2, is also known as a minor third.

The reason these are mathematically equivalent is because the E flat is 1.2 times the frequency of the E as you would be able to see in Katie's oscilloscope.

Now, I think the question we need to ask ourselves is why do we have a type scale at all?

Why do we even have different sizes of type?

Let's go back to some basics.

Well, the answer is typographic hierarchy.

Hierarchy helps readers understand the text and users understand the user interface.

It helps us understand what's most important, what's least important, where new ideas start and begin, where new features start and begin.

We also know that in modern web design, we have different size text for the same thing on different size screens.

So why would we do that?

Well, one of the reasons you would want to do that is if you think about a paperback book.

Paperbacks are almost all the same size.

The text is almost all the same size and that's because they're used in the same way.

We hold a paperback around about 30 centimeters away from our face and read it, those of you who remember reading paper books.

A reference book such as this, the text is much, much smaller.

It's mostly much smaller so you can fit more text on the page.

If you've got text twice the size, you need four times as many pages.

Because the text is smaller, we get in close to read it.

A cookery book, however, the text is much bigger because we might have it propped up in the kitchen much further away from where we are.

It's further away so we need to make the text bigger so we can read it more easily.

To put it another way.

Okay, one last time.

These are small but the ones out there are far away.

Small, far away.

You can consider text size as an angle rather than a physical length.

If the text is further away to appear at the same size, the same angle, it needs to be bigger.

As some of you may know, that's actually how deep in the CSS specifications a pixel is defined.

It's defined as an angle, not as a physical length.

Let's consider our readers.

They might be sat at a desk with a large desktop screen positioned far away, maybe 60 centimeters or so, arms length perhaps, away from their eyes.

Whereas they may be using a phone and phones are small.

They're held close when we're reading them.

These might be, you could consider these the maximum and minimum extremes of the reading environment typically.

That would explain why we want to change the size of our text depending on the size of the screen.

We might also want to use a completely different type scale for different size screens.

Why might we want to do that?

Well, if you use the same scale on a large screen as on a small one, you start to lose the contrast between the headings.

With these small and large screens here, the text is all the same size for the headings and so on.

Yet, they look different.

If you exaggerate the size of the headings, then actually those two designs start to look more like the same design, even though they are different.

You start to be able to distinguish more easily on that large screen where the headings are and how they are different to each other.

Whereas you can do that with the smaller differences on a smaller screen.

It's just the way that brains work.

When you're designing, you can consider one type scale for your minimum viewport size, i.e. when the things are close and the small screens, and a different scale for a maximum viewport size, or when that screen is further away and bigger.

In our case of our small screen, this is the one that we looked at earlier on, we have an interval of 1.2.

Then on the maximum screen, the larger one, we have an interval of 1.3, which means the text sizes ramp up quite dramatically and they get bigger and bigger and bigger.

Here's an example of a real world responsive web page designed with two separate type scales.

We have one designed for small screens and then another different scale with bigger increasing text designed for the larger screen.

At some point between the two, the CSS is swapped so that you either get the small text or the large text.

In theory, that CSS is swapped out at the point the design breaks, which is why I consider that is why we call them a break point.

It's great you've got the same underlying HTML.

That doesn't have to change.

Of course, now you've got two fractured situations.

You have got, in effect, two designs to maintain.

Also this approach, as you probably know, is quite blunt.

You might end up with a relatively small device, like this one in the middle, showing a typographic scale that's really designed for something bigger.

At that screen size that's in the middle there, it's starting to fail.

A common solution is to add another break point and a third design for a medium sized screen.

You might consider this, at least a few years ago, we might have considered this as designing for a tablet.

Like I said, this fractures the situation even further, so now we have three designs to look after.

Anyway, what scale should I use for that middle one?

How big is a medium sized screen?

How far away is it?

With all these different tablets, it's like, "Well, what do you do?

Start designing for every single permutation and combination?"

Of course you don't, because you're going to end up with loads of break points and media queries in an effort to handle them all.

That's what the new creative boom website has done.

This was released around about Christmas time last year.

It's a lovely design, but it has got five break points.

For the most part, this works well for the reader.

I think it could be a bit improved at the small end, but let's not worry about that.

To manage it must be a bit of a nightmare.

Five break points means six different designs.

In this case, each one, apart from the very smallest, is a fixed width design.

This might be a magazine, and it's a very good one, but the web designer is trying to exert print-like control over everything, and the web's not like that.

The web is not delivered in fixed dimensions, at least not fixed dimensions that really we can design for in advance, because your readers have more control over their reading environment than you do.

That is the beauty of the web.

That is absolutely how it should be.

I'm not here to tear down creative boom.

It's a really good website.

The design's lovely, and it does work quite well, but it must be a bit of a nightmare to actually look after.

But seemingly, five break points are better than two.

Are 10 break points better than five?

Would that be better?

What if you had an infinite number of break points?

Will that be better?

Instead of snapping from one type scale to another, you seamlessly adjusted your typography for each and every screen and window size.

I have noticed that this slide was preempted on the t-shirt there by Dave, which is nice.

So that infinite break point you might call fluid typography, which for me is a combination of fluid type and fluid spacing.

Let's look at fluid type and see why it makes things easier.

Earlier on, we looked at these two type scales, one tailored to your minimum size and one tailored to your maximum size of screen.

We can use these pairs of numbers to describe those scales.

We have our viewport size.

We have our base body font size.

This is the text size of the paragraphs.

The smallest is 17, and it won't go smaller than that.

The biggest is 20, won't go bigger than that.

Then we have our multipliers, our intervals, to give us our two different type scales at the two extremes.

To get fluid type, what we need to do is interpolate between those for any given screen or viewport size.

This graph shows you how that might happen in numbers.

Each column of dots there is a type scale.

We have our type scale mapped to our type sizes for our maximum, and then on the left-hand side for the minimum.

Then somewhere in the middle is a brand new type scale, a bespoke type scale purely for that size of viewport width, whatever that might be.

Now, to put it in practical terms, you just design the extremes.

You design the extremes for your minimum size, and you design the spacing and the type size for your maximum size.

Then maths just does the middle bit, because computers are good at maths.

That's not AI bullshit.

That's just normal mathematics.

You can get this.

Yes, only designers and maybe some developers sit there resizing browser windows to marvel at their responsive behavior.

Hopefully, this example shows you that no matter the viewport size, the typography will always look appropriate and always adapt an infinite number of times.

Just by designing those two extremes, you haven't actively designed anything in the middle.

To get that right, it obviously takes skill and time, but that's what designers will pay the big bucks for.

How does this manifest itself?

When it comes to the CSS, we only need this.

This one declaration here that says, "Set the font size to be step zero on our type scale."

If our type scale goes from zero, which is our body size, you might want minus one, so one for small text up to however many larger headings you want.

You can just do this.

It's like the paragraph, set it to font size zero, and however big the environment is, the screen is, it's still using type zero, but we're calculating what that is.

Similarly, the headings might be on different steps on the scale.

We say, "Make an H1 step five, make an H2 step four.

Use a utility class if you want to create a step three under certain circumstances."

This is all you need is your CSS to do that.

You're just deciding on a scale of naught to five how big do you want the text to be.

All the complex interpolation is done under the hood.

I know what you're thinking.

You're thinking, "Where does the value of that custom property actually come from?

How does that make the text responsive?

Do I have to do some mad maths?"

Well, I'm glad you asked because I can help you with that.

Introducing utopia.fyi.

This was developed by James Gilliard and Tris Mudford at Clearleft, company I've founded, design agency in Brighton.

It's free, no strings attached, not trying to sell you anything other than a way of thinking.

I feel okay presenting this to you.

We use it all the time.

Lots of other people do as well.

I'll just show you how to use this and how it can help manifest that fluid type.

Utopia includes a calculator and crucially a code generator.

You used utopia by passing in those values that we looked at earlier on.

There's your screen size, your body text size and your type scale for your minimum and maximum.

Then it gives you a set of type scales and the CSS that works with it.

These seven lines of CSS, these handle all the fluid typography for all the steps that you specify on your type scale right across the two extremes of your design space, just these seven.

It looks a bit complicated, but the point is you can just copy and paste it.

It's foundational.

You don't ever have to change it.

If you have this, then that's all you need to use those custom properties I was showing you earlier on where you say, "Make all paragraphs text size zero on the scale."

Now there's probably quite a few technically minded people and accessibility people in the audience.

You might have seen, yes, this uses clamp function.

When you're using clamp with type sizes, that can be problematic.

However, you'll also see that it's using rems rather than pixels.

Anytime a user wants to change their default text size, that's handled automatically within this.

Also on the circumstances where clamp does cause a problem, which is basically extreme type scales on very large screens, Utopia will give you a warning if you're setting yourself up for that particular situation.

It's fairly rare, but it is possible, but at least you have the warning to maybe not be quite so radical.

Also you can just switch to old school CSS locks.

There's an option to do that.

Instead of clamp, it's a more complicated, but again, just copy and paste one's job using pre-clamped CSS if you like.

It's got some options to use containers rather than viewports, plus also exporting as post CSS or SCSS as well, which Tris has introduced more recently.

There's lots of stuff flexibility there in terms of how you want to use this output.

The important thing is seven lines, in this case, of CSS pasted once as a foundational thing you never have to touch again, then gives you the power.

Let's think about designing a basic component in a design system or just on a web page.

If the designer and the developer, who may or may not be the same person, are talking to each other and they're both thinking fluid design, the decisions are really quick.

It comes down to, again, that heading on a scale of naught to five, how big do you want it to be?

Similarly, the paragraph text, the button text on a scale of naught to five, how big do you want it to be?

That's as far as the conversation really needs to go.

The rest of it is handled because you've got fluidity, you've got responsiveness all built into the back end of it.

You just need this simple bits of CSS to make that happen and it will just work.

There's no media queries there.

There's nothing like that.

You might notice something else about the cards.

The spacing changes too.

Rather than jumping at a certain break point, the space can fluidly interpolate between your minimum and maximum as well.

Now, in isolation, it might not be so impressive, but across a whole page, the difference is clear.

In this example, each piece of space is accounted for and totally fluid.

That keeps everything in tune regardless of the screen size.

Going back to our friend, Brinhurst, again, he says, "Add and delete space in measured intervals."

Those measured intervals will ordinarily be related to type sizes.

Space in design should have this connection to type size almost always.

You could use the exact same custom properties to set your space, the same type sizes.

Set a margin to be type size zero, something like that.

For spacing, you'll probably need some finer grain control.

Utopia has a spacing generator as well.

This is based on the type scales that you set in earlier on.

It uses type scales as that basis.

Instead of a scale, a modular scale from naught to five or whatever, it uses t-shirt sizes.

Those are based on multiples of the base font size.

In this case, it sets out small as being the base font size.

Large is two times that size and so on.

If we look back at these cards, we can just use a space property instead.

This is saying use the small space property that we set up earlier on.

That automatically makes the padding around the larger card bigger than the smaller card.

That's it.

You're just doing it with one line.

Again, that conversation is just as simple.

In terms of t-shirt sizes, what do you want the padding to be?

Extra small, medium, large?

What do you want it to be?

It'll flex automatically across your minimum and maximum design space.

Spacing can sometimes be much more dramatic than that.

With Utopia, you can generate these value pairs so that on a small screen, we have our spacing as medium.

Then we say, "Well, actually, we want it to grow to large on the larger screen."

That's still relative to your type size as well.

You can get more exaggerated changes, which gives some more flexibility with the design.

In fact, Utopia lets you do even more exaggerated ones than that.

You can start as extra small at the small end and then make gigantic spacing to excel or go the other way if that's at all helpful.

All the flexibility is in there.

Again, we can see one of the uses might be padding around the text, give you more breathing room on the larger screens.

This padding, again, is just one line.

With this property here, it says, "At a minimum extreme, make it small.

At a maximum extreme, make it 2XL."

Again, we've just got two t-shirt sizes to reflect that padding.

The conversation between designer and developer is really, really simple.

Also, the design process.

Once you've worked out what you want these to be as a designer, it's a simple conversation.

It's not making the design simplistic.

It is all related to type, which is how you would design anyway.

It's just making it simple.

The idea is that these tokens, these spacing ones can be used anywhere really that you have any kinds of spacing, padding, margins, borders, grid gaps, and transforms even, anything that takes a pixel or a rem.

Here's the Creative Boom website again.

Obviously, I couldn't help myself.

I had to rebuild it.

I've got nothing to do with Creative Boom, but you know.

I rebuilt an article page using the fluid layout and typography that we've just been looking at.

There's no media queries here.

There's no breakpoints.

It's completely fluid from small to big, trying to map the designer's intent in the process.

Although I did build this from scratch, it does show that you can retrospectively apply fluid typography to a design, but it's much easier and quicker to do it from the beginning, as it is with lots of things.

Accessibility and so on is not a bolt-on.

It's something you think about from the beginning, and so is fluid type.

I did a bit more detailed write-up of how I went about doing that.

That's on my blog, which I've got a link to at the end.

For all this to work, it's vital, like I keep saying, that the designer and developer are talking the same language.

You both need to be talking in type steps and t-shirt sizes for spacing.

As Tris, one of the developers behind Utopia, said, "A common language, in particular, reduces doubt around the understanding of design intention."

Nothing gets lost in that conversation.

To help that, James and Tris, who are the developer and designer behind Utopia, have created some plug-ins and some design files for Figma.

These are free.

You'll be able to find them to get you started with the process within Figma as well, to help the designer be working in that same process.

Again, that conversation, that language is the same between everyone.

They've written on the blog exactly how to use them and so on.

Going back to jazz, as I said, the players agree on a time signature, a key and chord structure and a melodic hook.

Those are the foundations that allow them to improvise in harmony with each other, play together, improvising new passages of music, but staying coherent.

As I said, that harmonic structure in jazz is mirrored by spacing, type and color in design.

These are the agreed standards from which everything else flows.

Again, it takes time and skill to get foundations right, but once you have foundations right, then you can just build and build on top of that.

Like Miles Davis, you are free to improvise.

Let's just briefly look at how fluid typography might get implemented in a real-world design system.

This is the design system Clearleft helped put together for UCL.

We worked with their team there to do that.

If we look in, we'll see there's foundations.

You won't be able to read it unless you write the front on the left-hand side, but there's color, accessibility, icons, writing, space, typography, the sorts of things that you would expect in a design system.

In the typography page, here are the type steps that we were talking about earlier on, how they're defined for this particular website, and similarly, space tokens as well.

When we look at a component like our friend the promo card, we can go and have a look at Storybook where the code is held and see how this manifests itself.

Here, you have some simple HTML with some utility classes saying step three, step one.

We've just got those utility classes there saying how big those bits of text should be.

Dead simple.

Then the CSS handles the spacing.

Again, we've got a padding of going large to extra large, medium to extra small, sorry, to extra large, and space of medium happening there.

This is all the fluidity.

That's all there is with these.

There's no worry about how that's going to be handled.

There's no media queries built into this for that component.

It's all handled by that foundational seven lines.

Well, probably twice that because you've got the spacing, but you get the idea of CSS that sits in a much more foundational part of it.

When they're designing components like this, the conversation genuinely is what t-shirt size for that spacing on a scale of 0 to 5, what's the type size?

You get that responsive design just built into the component.

By building fluidity into the foundations, the designer and developer of future components can play together and riff off that simple shared language, that shared foundation.

You get consistency, you get ease of use, all the promises that a design system might bring.

That's it from me.

Thank you very much. [applause]