13 Golden Rules of Typography on the Web

(upbeat music) - Good morning everyone.

So, As Jennifer said, I work for Clearleft. We're based in Brighton on the south coast of England. This is my first time in Australia.

This is my third day ever in Australia, so thank you very much.

I've been seeing the sights of this beautiful city of yours. But what did I come here for? Well, I came here to talk about typography, talk about 13 golden rules of typography on the web. Because my day job really is as a UX consultant, which I love, but my passion is typography. I'll make the slides available afterwards so don't worry about scribbling notes or anything. So first of all, I'd like to introduce you to this man. Nine years ago, he presented us with something of a call to arms.

His name is Oliver Reichenstein.

And he infamously wrote that web design is 95% typography, and therefore it's only logical that every web designer should be trained in typography.

And this was 2006.

This was before web fonts or anything like that came along.

And when most of the written web still looks like this, this sort of uninspiring, uninviting, unreadable sameness, he probably has a point, and the web is full of text, at least the bit of it that isn't kittens and porn. Customer reviews, industry reports, social network updates, blog posts, email, newspapers, magazines, it's all text. So why wouldn't we strive to make those reading experiences as good as possible? Well the bad news, in some peer reviewed researched performed by Microsoft and MIT a few years ago, science showed that good typography doesn't improve speed or understanding, which was kind of disappointing.

However, the same study showed that participants significantly underestimated the time to read when they had good typography in front of them, and that meant that good typography is responsible for greater engagement during reading. From which, the researches inferred that, and I quote, "good typography induces a good mood." Let me repeat that.

Good typography induces a good mood, like beer and sex.

So, that's why we're all here this morning, for typography, not beer or sex, not yet.

So let's talk about what good typography is. It's about designing the reading experience. Typography is a craft which perhaps more than any other discipline encompasses the notion of the whole being greater than some of the parts.

The details we as typographist strive to get right, that are frequently mundane, seemingly trivial, and yet when taken together can elevate the experience from tiresome to delightful. So sit back, relax, not too much, as this is gonna get nerdy.

So, rule number one, learn to relinquish control.

Now designing websites is a strange and wonderful thing. Since invention of the printing press, designers and printers have decided on the stock, the paper, the dimensions, the layout of the page, the choice of typeface and the size of the font. And as a scale of print runs increased, there may have been commercial decisions involved there, but aside from very wealthy and influential and demanding individuals, readers of printed material will have had no influence on that medium at all. At the web, the opposite is true.

The designer has no influence on the reader's medium. Not only can the designer not change the reader's hardware or software, the reader can override completely any decisions the designer might send along with the content, and that's how it should be.

It's what makes the web special.

And where a print designer was all powerful, dictating every aspect to the reading experience, the web designer must know to relinquish control into the hands of the reader, and not fool themselves into believing the situation is otherwise.

Now, one of the most important writings on web design, your magnificent host of Web Directions, John Allsopp, used an extract from the Tao Te Ching to make this point beautifully.

The sage accepts the ebb and flow of things, nurtures them, but does not own them.

So the wonderful thing about the web is that it takes many forms, and those forms can be shaped by the reader to their benefit, and that's a strength, not a weakness.

It's a feature of the web.

So we as web designers must be flexible too. Our designs must adapt to the environment of the reader, and the reader must be allowed to adapt the design to best fit their needs. So number two, don't trust computers.

Well, you should probably all know that by now. But what I really mean is, especially with what you saw with Christ this morning, don't trust browser defaults, that's what I'm talking about here, using your own judgement .

If you know what good work looks like, which is what this talk is about, you'll do good work. And remember, just because a computer sized something or spaced something, that doesn't mean it's right.

If you find yourself using a browser's default for anything, line spacing, width, margin, colour, any other value affecting your design, then question it, question what the browser is doing for you. It might be fine.

It might be a bit of, or it might be entirely inappropriate.

So those are the ground rules to approach web design in a write way with a right mindset, the right philosophy. So now let's think about paragraphs.

Now paragraph represents an individual unit of thought. From a typographist's point of view, it's the shortest patches of text which we should design for immersive reading. For when the readers starts to get, moves into a flow state, gets lost in the text. And your reader should be able to absorb the writer's thoughts without difficulty or interruption. That's what we design paragraphs for.

And three factors combined to make a paragraph readable. The triumvirate of line spacing, measure, so line length and text size.

And you can think of them as legs on a three-legged stool. You'll upset the balance of readability if you change one leg without adjusting the others. I'm just gonna pick one of these legs to talk about next. So, number three, used the default font size for paragraph text.

Now device manufacturers will have determined an appropriate initial size for text on their devices, normally 16 pixels.

But be aware that your reader may have adjusted the default size to better suit their needs.

So this is a lady on a train, real photo taken by my friend John Tan.

And you can see she's using a Kindle, which has got between two and three words per line. So she's bumped the text size right, right, right up in order that she can read it.

So you need to bear that kind of thing in mind when you're designing type for the web, because the web enables people like that to be able to read stuff in a way that they wouldn't be able to read otherwise. And if your reader is going to the effort of adjusting the font size, especially the browser default, it'll be for a good reason.

And so yeah, it's true that they can adjust the font size but, also, it's no excuse for setting type too big or more often too small in the first place. Why make them go through the effort of correcting the type size? You're the typographer, it's your job to set the type correctly.

And the default is a size of which browsers were intended to display text.

Now, number four, adjust the type size according to the reading distance.

Now, the ideal size of your text doesn't just depend on your reader's preference, but also on the reading distance.

The further away the text, the smaller it becomes perceptually.

To compensate for longer reading distances or further reading distances, you therefore need to make the text bigger. Our computers, by which I mean desktop screens and maybe laptops, generally read from further away than books, newspapers, and printed matter. Typically we hold books with bent arms, about 35 centimetres away from our face.

In contrast, a tablet screen maybe on your lab is about 45 centimetres away.

And a desktop likely to be even further, up to 70 centimetres perhaps.

As each device is read from a different distance, the perceived text size differs, getting smaller, the further away from the screen, and you need to correct for this.

Now if this sounds familiar, this might be why.

- Okay, one last time.

These are small, but the ones out there are far away. (audience laughing) Small, far away.

Forget it.

- So, a printed book typically held 35 centimetres away from the eyes with typeset typically at around about 10 points gives a perceived text size of 30 arcminutes. Now an arcminute is a measure of size of a perceived object used by ergonomists, and it's actually an angle equivalent to 160th of a degree, which means text size expressed in arcminutes can take into account by the type size and how far away it is.

A study show that when reading, we hold smartphones, even closer than we do books, about 30 centimetres typically.

So, we can use something like sizecalc.com to look at this in a bit more detail.

So to achieve a perceived text size of 30 arcminutes on a phone held at 30 centimetres, we can pluck the numbers in, and that tells us that the text needs to be about 2.6 millimetres tall.

Now, if you play around, you'll find that text on a phone at 2.6 millimetres tall is about 16 pixels, which is nicely justifies the assertion we made earlier that you should use the default text size for continuous reading.

So in the same basis, let's consider screens which are 60 centimetres away.

To achieve 30 arcminutes, which is the angle of comfortable reading, at that distance, you need text to be about five millimetres tall, which, again, if you play around is about 22 pixels on a large display.

So, like father Ted's cows, we have text which is small and text which is far away, but the same perceived size.

Now for a screen positioned about 45 centimetres away, like a tablet, the text would need to be about four millimetres tall, which is equivalent to about 18 pixels on a standard tablet. So all this implies a situation where ideally we want to increase the text size, depending on how far away the screen is, and yet we have no way of determining how far away the screen is from the reader. So we need to turn to some approximations to kinda deal with that.

So first of all, we start out with our default text size. We established that's fine for smart phones. But for tablets, we need to bump the size up to 18 pixels. So typically tablet, starts at maybe 960 pixels, which is equivalent to 60 ems.

So we deal with our media queries in ems, because we're talking type here.

We're not worried about the physical characteristics of the screen so much.

So, this is our first media query for tablet, and it bumps the text size up to 18 pixels. Similarly, for a large screen, we can bump it up to 22 pixels.

Now, we've made a whole bunch of assumptions here, not least of which is getting how far away readers are from the screen, and we're also using broad approximations to correlate the screen size with the device type and reading distance, and that's all we have available to us.

It's the only tools we as typographist on the web have got. And as Nick Sherman wrote on this A List Apart article, typography is a physical discipline, but your computer doesn't know it yet.

So number five, adjust the font size if the typeface requires it.

Now the browser default is always the best place to start for text size, but typeface is very significantly, even ones which are all suitable for reading in paragraphs. And so your choice of typeface may require you to adjust your paragraph text size up or down from the default. So if we look here, if we look at Helvetica there in the middle, Helvetica has quite a generous x-height.

So the lowercase letters are relatively large compared to the uppercase letters.

And that's as commonly used as a default typeface, and it's very similar to San Francisco, the new typeface that Apple uses.

We can employ it as our benchmark.

Compared with Helvetica, Altis on the left has an even taller x-height.

So to match the apparent type size of Helvetica, we'd have to set out just a bit smaller.

And conversely, if you look at Futura, next to Helvetica, it's got a really small x-height, and so you'd have to set Futura significantly bigger to match this perceived type size of Helvetica. And when we're deciding how much to adjust, the typeface have two approaches.

You can do it by eye and you can just bump the type size up and down by a pixel until the lowercase letters look about the same size. It's not an exact science, but any nudge in the right direction is gonna help your reader.

It's also possible to use the internal font metrics to calculate a size adjustment, to make one font appear the same size as another. And the theory is to adjust the font size so the x-heights are the same.

Now the relative height of the lowercase letters to the uppercase counterparts is referred to as an aspect value, which is equivalent to the x-height divided by the font size.

And it's that value we can use in some calculations. So typical aspect value is a half, meaning the x-height is half that of the type size. And the beauty of type is there's no such thing as an average typeface, and it's those differences that we're trying to deal with here.

So we can use a calculator like this one I made to break out the aspect value.

So here with Futura has an aspect value of .417. And that will give us a whole bunch of numbers like this, the aspect values for the different typefaces. And we can actually do the simple equation to calculate what the type size adjustment should be, where we take 16 as our paragraph size, multiply it by the aspect ratio of Helvetica, divide it by the aspect ratio of your target font, and that gives you the type size that you need to be using instead to make Futura, Altis, Lato look the same size as Helvetica.

And so you end up with something like this where you've got four typefaces, all set at different sizes, but yet all look the same size.

It's pretty niche stuff, but when you think of the difference there, Futura 20 pixels compared with Helvetica at 16, that's a big difference.

All right.

Let's move on from paragraphs to tables.

So, set tables to be read.

Tables are a bit of buck bell sort of a passion of mine I suppose. They seem to be woefully neglected wherever you go, particularly on the web.

It might be because it's quite hard to deal with tables when you're just getting data coming out of a CMS. You haven't got much control over what you can do with that necessarily.

That's one of the issues that we have as web designers to deal with, is that we don't necessarily know what we're typesetting. It's just data coming out of a CMS.

What we can do is general rules, but it's not always the case.

Sometimes we do have the luxury of knowing precisely the words, precisely the numbers that we're typesetting.

So, tables come in many forms.

Some are just simple numbers, others are complex mixes of numeric data and textual information, and some require reading row by row, and others are scanned in columns.

And tables, they're varied, financial statements, time tables, multi-language dictionaries, tables of content, numerical conversions, feature comparisons. There's masses of them.

And despite all of this, every table shares two simple design principles. They should be readable and support a sense of the data held within them. So they shouldn't be prettied up to satisfy some sense of aesthetic when simply looked at.

Tables are to be read.

That said, a well-designed table can, in my opinion at least, still be a thing of beauty, but with the form following the function.

And your tables are not pictures of data.

They're catalogues of data to be perused.

As Jan Tschichold, a typographic master, wrote in his book, "Tabular matter can be a charming," I should read this in a Swiss accent, but I'm not going to, "can be a charming an artistic exercise "in now way less interesting than any other area "of typesetting." And just as you wouldn't design body text with the aim as fitting as many words onto the page as possible, so you shouldn't treat a table like that.

You might want to reduce the text size a little bit. You might be tempted to do that, but it should still be readable without the reader having to squint really close in order to pull the data out of the table. They should be able to interpret the table from their normal reading position.

There's a few fundamental principles to making tables readable.

First of all, just as you wouldn't centre align, a page of paragraph, don't centre align text within tables, left align it.

Right align numbers to help your reader make easier comparisons of magnitude when running down columns.

And if you're making comparisons of magnitude by right aligning numbers, you need to make sure that the precision is same, so it's the same number of decimal points.

And then make sure that you've got the headings matching the data.

So right align headings for numbers, and left align headings for text.

Now right aligning numbers is your first step, but aligning to the decimal point is even better, especially when you've got mixed data like this. This enables you, because they're all lined up to decimal point, to be able to see which is smaller and which is greater just at a glance.

And taking that even further, you should align, you should use different characters to layout more complex tables in a useful way. So you can see we've got characters are lined up around a multiplication symbol, and then also, in the right hand column, aligned to the colon there.

And back in HTML4, there were these attributes, which would enable us, in theory, to do this, align to a character where that character is a multiplication symbol, but it was never supported.

It turns out HTML wasn't fully supported, although they did say in respect that this was optional, and I guess all browser manufacturers saw it optional and thought, "Fuck it." There will be a way to do it in CSS.

This is languishing in a CSS text level four, so CSS4 module.

It's fair to say there's no support for that either. So, perhaps I was being slightly idealistic in terms of laying out two individual characters. It can be done, you just end up needing to create more columns in your table, which sort of takes away their usability a little bit, but anyway, there we are.

This is a fairly complex table.

It's a tool.

It's designed to be used.

And it works because white space is being used to group and separate.

And I've never really seen this kind of attention paid to tables on the web.

What I do see a lot of however is this kind of crap.

Typical spreadsheet styled table, set full width with borders, fills, typographic terms for background colours, and centred alignment.

Now you probably heard the phrase perfection is attained not when there was nothing more to add, but when there's nothing longer, nothing more to take away.

Now that's a bit of a cliche, but I don't think it could be applied more to table design. There's no need to make a table look like a spreadsheet. You might think this makes for a pretty picture, but it does nothing for the readability of the table. Tables should be designed, not painted and decorated.

So how do we fix this? Well, first of all, let's remove that stretch and size all the columns to the data.

Now, in 1983, Edward Tufte introduced this concept of data ink.

Data ink being the non-erasable core of the graphic, so the ink used to actually print the data. And then there was non-data ink, which is the ink used to represent all the other stuff, the labels, and the fills, and the edges.

And the idea is to remove as much of the non-data ink as possible while still leaving the graphic usable.

So let's get rid of those background colours and borders, and the bolds, and all that crap.

There we are.

So next up, as I said earlier on, let's left align the text, let's right align the numbers, and align the headings with the data.

Starting to come together.

Now we need to space that out and put in some grouping so we can start to make sense of the table. Finally, we'll use some tabular lining numerals, consistent precisions, and remove some of the repetition, and we end up with this.

So this to me is a much more usable version of what we had before.

You've got all of the data grouped.

You can scan down the columns.

You can easily see the biggest grossing movies and so on in this particular table, and you can easily focus in on the films of Bill Wilder for example.

So, in summary, these are what we just did in terms of making that table usable.

From tables to display text.

Number seven, set text at display sizes even on small screens.

So when I say display text, you can think of it as being like a bill board. At the beginning of the talk, we established how scientific studies...

You're getting it? Yeah.

How scientific studies have shown how good typography can improve your reader's mood. And if you set your display text at large sizes, it stands the reason that you even have an even bigger effect on your reader.

And when I say large, I mean at least three times the size of your body text. And when you're talking about text that big, your readers are gonna see it first before they read it.

They're gonna get an initial impression, and that's gonna elicit a kinda subconscious emotional reaction in the reader, and it enables you to set a mood for the content which is to follow.

So here's a quick story.

This is a magazine called The Great Discontent. It's published online and in print.

And the print edition was designed by Frank Chimero. A few years ago, Frank gave a talk at Kerning Conference in Italy, about how he was working on the print design while Ryan Essmaker, co-founder of the magazine, was designing the website version.

And they needed to collaborate because the website was gonna influence the print, and the print was gonna influence the website. - So we worked through this, worked through this, worked through this.

We just finished the design maybe last week. So I'm actually flying out of here and go on the press and do the press check. So you've been looking at mock ups.

And Ryan is starting to think about the website at this point.

We kind of had this, "Oh my god, duh" moment where we realise that we were both idiots, because if we would've realised this one little piece of information when we started, this whole design process would have been so much easier, and I'm gonna show it to you, and you can laugh at me for not realising this, but here it is.

These two things are the same shape.

This magazine, when it unfolds, it's a little bit smaller than a cinema display, but spread magazine is pretty much the same as the horizontal panel of the screen I've been looking at.

Duh Frank.

So, thankfully, that makes Ryan's job a lot easier. Because what he has right now is this, and we've worked together to make this, which means that on the website, maybe we can just do this.

- And what they have now on the website is this. It's beautiful, simple, impactful.

You can clearly make an impression when you have a canvas as large as this one, a 27-inch display.

Can you really have that kind of impact on a screen so small it fits in your pocket? Well, arguably, yes you can.

So here's that magazine, the very same magazine held up in front of my iMac back at home.

And that headline text there, Alison Sudol, is set in 72 points so to achieve the same physical size, which is roughly 25 mils on a large screen, you would set your headline text to about 98 pixels, which is pretty big, and that's what we've got in the web view that we saw before.

So back to our friend, the Size Calc.

Given a typical viewing distance of about 70 centimetres, we can calculate the perceived size of that type to be 123 arcminutes.

Now, consider a small screen version of the site. The headline is set there at 48 pixels, which if you measure it with a ruler, it's about 12 millimetres tall on the phone. And as we said earlier, smart phones are read from much closer than desktop displays.

So you plug those in, and a small screen 30 centimetres away, 12 millimetre tall text gives a perceived size of 137 arcminutes.

So that's compared to the 123 of the cinema display. So, that text, that headline text on the small screen is effectively bigger than even in the magazine, because smart phones are held so close to your face, as some usability testing we did at Clearleft, which was quite revealing.

That phone is filling your reader's field of vision so you can set a mood, and you can induce a reaction, even on a tiny thing like that.

And this is Mark Porter from the Guardian.

And he says about good designing being firstly making people want to read, grabbing their attention, then you can tell their story.

And here's some examples in the Guardian of what amounts to display text on tiny screens. Now, let's think about some of this display text. We should resize display text as you would an image.

So when you're setting body text and heading sizes, you'd often use a scale, and you would set those sizes using rems, something like that.

So, they are hooked and linked to the browser default size, but they're independent of the device itself. Display text, however, by its purpose and relatively large size, that needs to be seen first and read second.

So it's a picture of text.

And when it comes to pictures, you're likely to scale all your scene setting imagery with the size of the device.

When you think what we do with large photos and hero images and stuff, they're all scaled relative to the viewport, the size of the window or the device.

And with CSS3 came a new set of units, which are locked to the viewport.

And you can use these viewport units, VW in this case, wherever you might otherwise use any unit of length.

So, you can use them like pixels or ems or percentages. In this case, the value of one is equal to 1% of either the viewport width or the viewport height. So in one fell swoop, you can set the size of your display text to be proportional to the screen width.

And in this case, we're setting the heading size to be equal to 13% of the width of the viewport. So, different size screens, the text scales accordingly.

so text is bigger there, but we haven't done anything different.

There's no media query.

It's just that VW unit.

But what happens on the landscape, rather than portrait screens is this.

the proportion of the text is now completely different on the landscape screen, and you've change the way that the design hangs together. So you've got this inconsistency there.

So what you really want to have is that.

So the same text size gives you the same proportions in a design , but you still want that text to scale with the viewport size.

So, instead of VW, which I've seen people starting to use, is vmin.

And that still scales with the screen size, but it chooses the smaller value of width or height. So just to give you a bit of context with a simple background image.

Using vmin, the balance between these two is similar, but the VW, and suddenly you've obliterated the design with massive text, too big text.

So, influence the way people feel through type. I've been talking about how visitors to your webpage see the display text before they read it, and so this is your chance to choose a typeface that immediately expresses what the text in the entire website stands for, bearing in mind that you can create an ambiance and subtly change the emotional state of your reader. Now a conscious mind perceives type and interprets what it sees to understand what the word say, but type also communicates with our subconscious. Like all visual stimuli, type taps into the amygdala, which is our ancient part of the brain, hardwired in our systems of survival and protection, and they're buried deep inside each hemisphere. And one of the main functions in these systems is a formation of associations between our senses and our biological needs. So when we experience something round, and soft, and sweet, good to eat, or something hard and jagged, is bitter, or dangerous, the amygdala holds onto that association.

And each time the same experiences repeated, the association is reinforced, and through the amygdala, becomes instinctive. Now, this is important.

So this is Sarah Hyndman.

She describes herself as an expert in multi sensory typography, ad she's experimented on conference audiences. - At a recent event, I've got 100 members of the audience to eat two identical jelly beans.

They ate the first jelly bean while they were looking at a round-shaped typeface, and they ate the second jelly bean while they were looking at jagged angular-shaped letters. The audience members rated their jelly bean eaten to the round-shaped typeface as tasting 17% sweeter, and they rated the identical jelly bean eaten to the jagged-shaped typeface as tasting 11% of sourer.

So the fonts actually altered how the sweets tasted. And I find I get the same results with crisps. I can make them taste saltier and crunchier, depending on the typeface.

- So your choice of typeface can, it would seem, directly affect the sense.

And if you can affect the senses, you can influence the way people feel.

You can influence the way people feel with a choice of typeface.

So this is a huge opportunity for us.

And so you need to think how you might want your readers to feel, because you might be able to make them more conducive to feeling a particular emotion.

Maybe feeling inspired like the stop smoking campaign, intrigued like the Makeshift magazine here, reassured, or tense.

This is the headline font for a London 2012 Olympics. I like it, but it puts me on edge.

I'm not quite sure what they were trying to do with it. And quite what this Walk in the Park feels like with those butterflies.

I have no idea.

But that's the power of type for you.

It's suggestive of something.

So typefaces can set up expectations, and you are probably expecting this to say something more like this.

And similarly, black letter is not normally associated with children's books.

And your display text should connect people with the spirit and personality of the website and establish a relationship with the story that you're telling.

So number 10, don't be reverential, dogmatic, or ordinary. So don't abdicate responsibility and opt for inoffensive blandness.

Talking about setting big text here.

So just go the whole hog and do something with it, but be appropriate.

This is Beatrice Warde.

She was an American communicator on typography. That's how she described herself.

And she introduced the idea that typefaces are the clothes that words wear.

And just as we judge people on the clothes that they're wearing, whether we like it or not, we make judgements about the text based on the typeface on which it is set, even if we are not type people who would be able to identify one typeface. We're still gonna make subtle judgement based on associations.

So if you're choosing the same typeface as everyone else, especially if you're trying to make an impact, it's like turning up to a party in the same dress or to a meeting in the same suit, shirt and tie, or with the same facial hair, tight trousers, and hobnailed boots.

So what do you want your site to be perceived us? Youthfully, enthusiastic, business-like, cutting-edge, sensible, fun and informal, from the future, hipster. Would this headline set in Bree draw you in the same if it was set in Helvetica? Perhaps not.

Alright, so all those fancy fonts are all well and good, but what about the bandwidth budget? If we just get a bit of context or sense of perspective here.

An individual font, an individual web font is almost certainly smaller, much smaller in file size than a photo on a page.

It's certainly a lot smaller than an advertising tracker and significantly lighter than a JavaScript framework. But in combination, font files are gonna add up. So first of all, you need to limit obviously the number of fonts you actually need. Make sure you serve them as WOFF2s.

You can save 30% over a normal WOFF.

So straight away, that's a big saving there. And this is how you can stick a WOFF2 with a WOFF backup, for those older browsers who don't support WOFF2 yet, like most of Internet Explorer.

And you want a subset.

So that means removing as many of the characters from that font as you can without incurring this kind of problem here where we have that abomination in this chap's name. That's nasty.

So, subsetting, good.

Subsetting too much, bad.

Alright, optimise page render timing.

This is really important.

And we have a big problem with web fonts as you've almost certainly experienced.

This is what browsers do currently, while we wait for fonts to load.

All the information is there.

The content is there, but you're not allowed to see it, not until the font is loaded.

I'd rather see the page with backup fonts so I can start reading while I'm waiting for the web fonts to load.

For me, stuck in some really slow Wi-Fi somewhere, I'm looking at nothing.

So there's some CSS for that font display.

It's starting to get some support.

And it just gives us back control over what we wanna do with the fonts, and there's five options with this.

Fallback is the one you want.

So that has that text invisible for only for 100 milliseconds.

And if a font hasn't loaded or being brought out of a cache by then, it will flip to the back, to a system font, while the rest of that font is still loading. And it gives it three seconds for the web font to load. And if it hasn't loaded within three seconds, the page that you're looking at will stick there with the system font.

Then when you go to the next page, it will use the web font that it downloaded if it did downloaded it in that time.

The current behaviour is probably block where we're block rendering.

You don't get to see anything until the font is loaded. So this gives you control back now.

This is stuff that we're currently using JavaScript for, but a nice simple font display which just goes in your, in your rule, in your app font face rule there, font display fall back, easy.

Another thing useful to do is to preload the critical font.

So just the critical font, so that would be the font for your body text perhaps, or if there's some other areas on the page which you have to have that web font loaded. The downside with this is that it blocks the page rendering completely, until that asset, till that font is downloaded, but it might be a useful thing to do for you. In the meantime, yeah, we result to JavaScript for doing these things.

So finally, I'm gonna just touch on variable fonts. I'm guessing most of you probably have come across these by now, but learning to use them I think is important, and it's important to do that sooner, rather than later. So just a super quick explanation, in case you haven't heard of what these are. Essentially, technology was introduced around about this time last year.

It enables a single font file to behave like multiple fonts.

And that single font file will be significantly smaller than the sum of those multiple fonts.

It does this by defining variations within a font. So here we've got variations across two axis, width and weight.

Here we got 36 different fonts here, but served by one single file.

And of course you got all the points in the middle. Just on two axis, this speck will allow you to have a million different variations.

Add in a third axis, a third different thing that's varying, and you've got a billion possibilities.

And the cool thing is within this design space of axis variation, you have these things called named instances where each instance will appear to users of design software or any software as a separate font.

For example, regular, light condensed extra bold extended.

And that's working already.

So here's a screenshot of a variable font in keynote, and the keynote that I'm using on this machine here, Avenir Text Variable.

It's a single font file, but you can see it has these named instances. So it has in there eight sort of predefined fonts from within that whole axis or variations.

So that's working right now.

Variable fonts are here and with us, and on our computers.

The very latest version of Photoshop too comes with variable font, a few actually.

They're just content fonts so they're not fully usable, which is part of an issue.

So acumin variable this is, and we can see it has all of these named instances. Imagine how many font files you would have to have or you can see, but that's just one font file.

Now, whether that's a bit too much, I don't know. Probably not, really, because you might buy a super family with, I don't know how many are there, 60 plus.

But also within Photoshop, you've got this stuff going on over here.

So you have these sliders for the different axis, which is just width and weight and slant in this case. And so not only have you got those named instances, you can now, within Photoshop, use these sliders to get anything in between the full position right across those design spaces.

Again, that's with us now.

So variable fonts are here.

So there are predefined axis of variation.

There's weight and width, we just talked about, and they come with these four-letter tags.

Well, as web designers, we do need to know about them, unfortunately. But these map to CSS properties, most of which will be familiar to you.

And with CSS Fonts Level 4, they've got a few extra values that they can take to be able to deal with the extra sort of complexity extra freedom that variable fonts can give us.

There's a new one at the end there, font optical sizing, which I find quite exciting.

And with optical sizing, you can get this effect. So this is a font called Amstelvar, and it's an experimental font developed by David Berlow of Font Bureau, for Google Fonts actually.

And so this is one font, not two.

As you make the text bigger, the font changes its design automatically, which is the optical sizing at work.

And that's not the only axis of variation that this font has.

This is the optical sizing, but it also has built in this for example, which is just changing the way the serifs look, which is something you might want to do or might not want to do, but it's there within the font.

These are not different fonts.

it just comes built in.

And there's other fonts like this, which has an axis of variation of a turtle's head going in and out of its shell and so on. Again, experimental, but it sort of brings icon fonts up to a whole different level.

And these are not the...

Obviously you uncovered a turtle's head variation in CSS.

You can still access it this way with this setting that the designer has come up with. So font variation settings is a property that we use to change the variation.

Now, this is why I have to confess that the font weight and font stretch and stuff that we saw earlier on is still not really supported properly, if at all, and you need to do this.

So, this is how you change the weight and the width and the optical sizing, and that's where those four letter text come in. But to use a variable font, you just stick in your font face file as normal and give it a format of WOFF variations or TTF variations.

And you can back it up with a regular font for those browsers which don't support variable fonts yet. And you can do that by adding separate rules like you do at the moment.

But here, our first one is still the same font for both. And you can do this.

This is Safari.

This is working right now in Safari.

It's not development version.

It's like the version, the latest version of Safari, including on the phone as well.

So this is all one font.

This is Amstelvar again.

There's about five different styles there, working within a browser, just using the one font.

So it is with us.

And one of the reasons for this is because Adobe, Microsoft, Google, and Apple have all worked together on this.

You've seen Apple is a bit further ahead, but Microsoft is working on it with its operating system, and Adobe is there as well with Photoshop and so on. So just thinking about this previous screen. What it means is that because we've got that single font file, it's already loaded, we can use these media queries and we can set different variation settings. So this is subtly changing the width of the paragraph. Not of the paragraph, sorry.

The width of the, of the font for a paragraph.

And for smaller screens, we can make it slightly narrower for example. It might be the kind of thing you want to do. Another thing you can do is change the grade for maybe when you've got inverted text, or you can detect, say, a low-resolution screen which tend to look a bit bolder than high-resolution screens.

So you can change the grade and make that font ever so slightly lighter so they look the same.

So one of the things to talk about, well, to have a go on is here, Axis-Praxis.

It's a website for playing with OpenType variable fonts. So just, just get to grips with that, because I think it is important.

There's huge file size savings to be made.

It's coming along.

The main problem we have is that there are no fonts here.

There are literally four commercially available fonts in the world, which is font variations currently.

There's quite a lot of experimental ones, but there's a bit of chicken and egg going on. Font people are waiting for the software to catch up. Software is waiting for font people to catch up. So we're in a little bit of sort of a hollow there, but we're close.

Anyway, here we are These are your 13 golden rules that we came across, that I talked through.

And I'm out of time but I just wanna say one thing. If you found those guidelines useful and you like 168 more, I've written them all in this book.

I've hold 20 of these over from the UK in a very heavy suitcase.

I don't really wanna take any home, but I know it cost an awful lot of money to send stuff to Australia, so I thought I'd bring some with me.

You can go and buy them online.

Get 25% off using that code.

But like I said, I've got 20 which are gonna be selling on the reception desk. I'll sign them if you want me to deface your book. That'll save you $20 in postage, so you might wanna think about that.

Thank you very much.

(audience applauding) (upbeat music)