Controlling, designing and improving text on the web

Thank you.

Yeah, that was a really good introduction, so I probably don't really need to do mine.

I am on Twitter still.

Mandy, underscore Kerr.

I will tweet some stuff out if you are still using that.

I don't really know.

We'll see how it goes.

It could change at any minute.

Very important thing to note.

This is my dog and his name is Jello, and that will make sense later.

So yes, he's a golden retriever and he's very fluffy.

So a little bit of background.

I like making stuff with text on the Web.

I do a lot of experiments and demos, I mean I've been doing it for a while.

So as a result, I've come to learn a few things about how to manipulate text and when you wanna present it on the Web So that's what I'm gonna talk about.

It's an overview or maybe a little introduction of some of the properties and options that are available to us with text.

Now, when I thought about doing this talk, I thought, oh yeah, it'll be easy.

I'll just talk about text properties and font properties.

There's so many.

It actually ended up being like an hour and a half long, so I had to cut a whole bunch out So it is just an introduction and I am, I'm hoping that at the end, maybe it'll prompt you to go and do some of your own investigations.

So that you can make the most of text on the Web.

So the very first thing we'll jump right into probably the most important is when you are using Text on the Web, you have to choose the right HTML element and you're probably like yes, I know But even just two days ago, I had to tell someone to use a paragraph instead of a div in the ir HTML.

So it still happens.

And it's really, important, right?

There's a lot of different HTML elements you can use.

And we do this for similar reasons that we might use something like TypeScript in our JavaScript, if you are familiar with TypeScript.

And it's so that we can define the shape of our content and that makes it easier to read, to write, and to work with.

And we don't just do this for developers, we do it so that the technology that's consuming our HTML knows what it is and knows what to do with it.

So a really good example of this is the browser, but other technologies like assistive tech, so screen readers, for example, text to speech like Google Home or something like that, reading modes in browsers, and also automated testing really make use of the HTML to know what to do with it There are a lot of different text, HTML elements.

It's like a finite list.

So spend some time trying to learn and familiarize yourself with what text elements are available, or at least do a quick check on MDN before you just reach for a div.

Because if you want good control of your text you need to set a good foundation, and that's the HTML.

So if this is the only thing that you are reminded to do, I will be very happy.

Please pick the right HTML element.

This is only some of them.

There's quite a few more.

So with that very important announcement outta the way we're gonna start with fonts.

Now, fonts play a really big role in how text is interpreted on, the Web and how people feel when they, read what you are, what you've presented to them.

Now, I'm not gonna go through how font face and all of that works.

Instead, I'm gonna talk about a couple of different newish font formats and some font properties.

So again, this is a bit of an intro.

There's so many but hopefully it'll spur you on.

Now, have you seen me talk before?

I apologize, but I'm gonna talk about variable fonts again.

It's my thing.

But they're really important, not just cuz I love them but because they provide us with opportunities.

For those that don't know.

A variable font is one font file that acts like multiple fonts.

So with a standard font, you would have separate individual files . Whereas with a variable font, all the information about something like the different weights exists within the one file.

So the way this is achieved is that inside a variable font, they have an axis, and an axis represents the variation in extremes of a particular style.

So for example, in this case, the weight axis from light to black Now you have your, usual things like regular and semi bold or bold.

They're known as a named instance, but an variable font will also interpolate between those named instances, giving us access to all the values in between.

And what that means is that we can animate between the values and create smooth transitions, which is not something we've ever been able to do before, prior to variable fonts But we're not just limited to one axis.

A variable font can contain multiple, and that interpolation applies to the combination of the axes as well.

Now, you're probably thinking if all of that exists within one file, it's gonna be like massive.

And that's a fair assumption, but in my experience, they're either on par or better than the combination of all of the fonts in your website As an example, Source Sans Pro in WOFF2.

A single weight is 111 kilobytes approximately, last time I checked.

A variable front version of Source Sans Pro-112.

So even if you just had two weights, bold and regular, very common.

The variable font is still better than having both of those in the site.

Plus you get all the weights, all the interpolated weights, so it's a lot more beneficial plus, you only have to make one font request to download because you're not loading in multiple, so you can get performance benefits from them as well Now this terms and conditions apply, it will vary between fonts, so you should always check I'm, don't just take my word for it.

But you can get some benefits with performance from fonts just by using the variable font version rather than the standard.

And Google fonts have a lot of variable fonts you can actually search by them now as well Now with this potential from improvement we can start to experiment with creating better experiences for our users.

For example, you can have 13 different font weights, like this example.

This is just a fun thing that I made, but.

Designs, which would've previously been a very heavy burden on performance, are now completely possible.

You don't have to trade off design and performance.

And from an interface perspective, this gives us a lot of opportunity for more precise control because I don't know if you've ever been in that situation where the bold is too much and the regular is too light and the semi bold isn't quite right.

A variable font gives you more choices . You're not limited to a specific set of predetermined styles.

You can also make your text more accessible with fonts like Lexend.

This font was designed specifically for people with dyslexia in mind.

It helps to improve reading comprehension by reducing visual stress.

And because it's a variable font you can provide this customization to your users so that they can adjust the font itself to match their unique requirements.

Because everyone's are different.

You can also make cool stuff which I like to do.

And they're editable and selectable and searchable, and you can copy and paste it because it's just text.

It's just text.

And a font.

You can also make Photoshop like text effects without the impact of needing to load in a bunch of different fonts, which is often how you make layered stuff like this.

I put this one in because of the sprinkles.

In yesterday's talk with the documentation, I was like, ah, cookie is so cool.

But confetti cake is better than a cookie.

Anyway, these kinda effects actually can be made even easier now with the next format I wanna talk about, which is color fonts.

Bit newer than variable fonts.

Couple of specs were competing.

The one that seems to have one out is called Colrv1, but it's missing the second O and the U, cuz you know Australia Colrv1.

And basically they're a font specification that allows color added to the font.

They're also compatible with variable font, axes, so you get that fun as well.

This is an example.

This is a font called Rocher Color.

It's an experimental variable font that comes with two axes, bevel and shadow that you can control.

And it comes with 11 predetermined color palettes.

This is not one of them.

This is one I custom made.

But it, comes with quite a lot and it's really easy to access them within CSS.

So we need a couple of things.

First up, the font-palette-values function.

And a Name, I've called it dash, jello.

This is why I was pointing out about my dog's name.

Cuz he's, what I use.

Inside the function, we have the base-pallete property and that refers to the pallete that you want.

So the number of the pallete, in this case it's '7'.

And then in the selector where you wanna apply the text, you have your font-family as normal, and then you reference font-palette and then the name of the function and it will load the color that you want Now, as I mentioned, Rocher color has a lot of options.

As you can see, the variable font stuff there as well.

But if you don't like the predetermined ones that the person who made the font spent a lot of time creating just for you you can make your own.

So it's very similar to what we just did, but instead of base-palette, we use override-colors in the function As you can see in the example, we have an index referencing each of the colors and then any standard color that's valid within CSS.

In this case, there are four starting at zero to three.

But it'll vary between fonts and you can define that however you want.

I made this pink and green one cuz why not?

But you could do whatever you want.

So much like variable fonts, color fonts give us more opportunity.

There aren't that many of them at the moment.

There are some on Google fonts you can filter by, but the more that we talk about them and the more that we think about how we can use them, the more opportunities that we'll have and the more creative applications people will come up with.

This one, for example, is inspired by Arabic calligraphy and it uses color gradients to try and represent the flow of ink in traditional calligraphy.

This one's available on Google fonts.

This one is Variable Color Initials more graphical.

This is my favorite because that is my dog which is the greatest thing I think to ever happen to me, have my dog put in a font.

And as you can imagine, maybe you are, you can also apply this to emojis.

This is Noto color emoji, and it allows you to control the colors within the emoji.

This is available on Google fonts.

So you can see the applications and how you might be able to use these.

So go and have a play, check 'em out, come up with some ideas.

People will make new ones.

It'll be awesome.

So with those formats in mind, the next thing I wanted to talk about was font properties.

Now before I talk about them, it's important to note if the font doesn't support the thing you wanna do, it's not gonna do anything.

So it is important to think about what you want to apply, how you want to use it before you just randomly pick a font to put on your website.

There's a lot more consideration you have to put into to make use of this stuff.

But hopefully you will do that after I tell you about the next properties.

So, the one I wanna talk about is font-variant.

Now, font-variant has five separate properties.

We are gonna look at three of them because I've only got half an hour, and as I said, one and a half hours wasn't really gonna work.

So the first one, font-variant-numeric.

Now you might be familiar with this, if you are high five, to me, this is one of the most underutilized CSS properties that exist.

It is particularly useful for product interfaces, admin systems, literally anywhere you have a lot of numbers because fonts often come with glyphs that are designed specifically to represent numbers and number formats in different ways.

Fractions are a really good example of that.

There are a lot of options for font-variant-numeric.

I don't actually think this is all of them . We're not gonna go through each one.

We'll look at a couple a bit more closely.

The most common, if we look at the middle, we've got tabular-nums.

This is really useful when you have numbers that you want to take up the same amount of space and align on the baseline of the text.

As the name implies very useful for tabular data . The top one lining-nums is often the default these days in fonts.

The numbers align on the baseline, but the individual characters don't necessarily take up the same amount of space.

As a result, you tend to see these more in like body copy, cuz it's similar to how normal text works.

And then the bottom one, old-style-nums, less common.

Again, more, more common in body text because the numbers have alternate heights and widths and they more closely represent lowercase characters where you can see like the nine goes below the baseline, that's the descender.

Not as common, but sometimes the default.

Now, if you look at a table with tabular-nums, everything aligns both vertically and horizontally.

Much, easier to read than old-style-nums where everything's like all over the shop.

You can still read it, but it's just harder and we don't wanna make things hard for people.

We wanna make things easy for people.

So switching to tabular-nums, when you have things like this, will make the content much more legible.

Another example is fractions.

Fonts will often come with these custom designed glyphs for fractions diagonal and stacked are the two options.

Stacked is typically more for mathematical equations, stuff like that.

But essentially if you type one forward slash two, when you have this turned on, it will switch to the appropriate glyph . Now say you want to have multiple, cuz you might want fractions and tabular-nums.

You can do this with a space separated list.

Pretty straightforward.

As far as browser support goes, it's actually pretty good.

Most of the major browsers support, font-variant-numeric right now.

If you need further back support, you can use the font-feature-settings property Each of these values for font-variant map to an open type feature that has a code that's four characters long.

In this case, diagonal fractions is frac.

This applies to the other examples I'm gonna give you and you can find them on the MDN page for the font-variant property that you are interested in.

If you're wondering why not just use font-feature-settings.

The reason for this is that it's more of a low level property.

It's discouraged.

It's okay for, supporting browsers for fallback, but font-variant-numeric will give you more easily understandable code and more predictable output.

So you should definitely use the font-variant property over font feature settings.

So the next one is ligatures, which is my second favorite, third, also my favorite.

So ligatures are when you combine two or more letters into a single character or glyph, it's typically done to help with readability.

But also sometimes it just makes it look better.

It essentially tries to resolve collisions between two characters.

Very conveniently for my demos, if you have two Fs or an F and an L together.

These are the options.

Not all of them.

We are gonna look at common-ligatures because it's the most common.

And also sometimes they're turned on by default as particularly at smaller font sizes, because when you have letters that collide at a small font size, it becomes more difficult to read.

So as an example on the left, it's turned off and you can see that the F and the L and the F are separate distinct characters, whereas on the right they are joined together and it opens up particularly in that F and the L.

Now, if we have a look at a demo, You can see these places where they're colliding as separate individual characters.

If we switch it and it to the ligatures, it's easier to read.

There's a better flow.

It's more legible.

And it just looks a little better.

Now.

The one thing I would say about ligatures is it can be contextual.

You often find they're turned on a lot in code fonts.

I hate them in a code font.

I think it makes it harder to read, so context does matter when you're applying ligatures, so don't just turn 'em on willy nilly Now the last one I wanna talk about is font-variant-alternates.

Very similar to ligatures, except instead of combining characters, it'll switch to an alternate version.

Now the support for this isn't as good as the other two.

I think it's just Firefox and Safari at the moment, but hopefully the other browsers will support it soon . Again, a bunch of options.

This is not all of them.

It's a little different to the others because most of the available options are functions.

And the reason for this is that when it comes to alternates, there can be more than one.

So it's not a simple matter of turning things on and off.

You have to specify which alternate you want on . The example we're gonna use is swash because it's my favorite.

A swash is basically like that swooshy bit on the text.

I'll share it in minute Similar to our color fonts example we have the font-feature-values function.

Now, instead of giving it a name, we actually put the font name in here that we want to turn the feature on for.

So in this case it's MonteCarlo.

Then inside that you can put the features that you want to turn on.

So we are gonna do just swash, sorry, @swash, and then the value inside of that is the four letter code within the font to turn on that particular alternate.

It does vary between fonts.

Often they're standardized, but if they've got a lot, you'll need to consult the font documentation for that, and then the '1' turns it on.

Now in the selector, you specify font-variant-alternate you put your swash function and then pass in the value that you wanna enable and that will do something like this.

So on the left it's off.

Nice on the right.

Super nice, real swishy, fluffy jello which is why it's my favorite.

Cause it looks good, right?

Looks beautiful.

You can make super fancy designs like this more practically.

People tend to combine it with other CSS selectors first-letter to make that first character look really fancy.

Or maybe you might do a drop cap or something like that.

You see this a lot in print typography.

But it's a lot easier to do with something like font-variant-alternates.

If you're reading the text, this is called jello ipsum.

And it's what I use for my demos when they're long.

A more common use case is also switching out to alternate characters.

Ampersands are a common one.

There's a lot of different ways to create an ampersand, and if you don't like the default one, you can switch out to a different one.

This font actually has 60 so you know, lots of options.

This is also useful for languages where there are different ways to represent the same character.

So lot of use cases for them.

Now there's a lot of features.

I've talked about a very small number.

This website, the complete CSS demo for open type features will give you CSS examples and fonts that you can use to experiment with.

So highly recommend you go and check it out.

So the next thing I wanna talk about is some text properties.

Before I do that though, what's really important when you're working with text on the Web is understanding the difference between inline and block direction.

Previously, you may have referred to this as horizontal and vertical, but it's been renamed, rethought to work with different languages a little bit better.

So inline elements display one after another in the direction that a sentence runs and block elements display one after another, perpendicular to the flow of text within a line.

So for English, inline direction is left to right.

Block direction is top to bottom.

You read left to top to bottom.

In Arabic, you would read right to left.

So the inline direction is right to left and the block direction is top to bottom.

In Mongolian.

I could not find an example of Mongolian text or someone to validate that it wasn't saying something bad.

So we've got blocks.

If you can do this for me, please come see me later.

In Mongolian, the inline direction is top to bottom and the block direction is left to so you can see how it varies between languages.

So this matters because if you have things like text-align, they can be impacted by the direction.

So for example, if you say text-align left, it will do as you've instructed and it will align everything left.

Now, you might not actually want this for Arabic.

You might actually want it to be aligned right.

But because you've said do the left, it'll do the left.

So this brings us to logical properties.

Now, they were introduced to help us control layout through logical means rather than something like direction.

There are a lot of different logical properties.

As an example, we'll use start for, this text-align.

If you say text-align: start, it will align English to the left and Arabic to the right because it will align to the flow of the writing direction of that text.

This is a lot more flexible, so you should be moving to this where relevant so that if you want to translate things later or change things, it's just gonna work for you.

Be kind to your future self.

Don't make things difficult.

And you'll see these kind of a lot more in newer specs like Flexbox and, stuff because it's, more logical as the name implies . So onto spacing elements.

Now you are probably gonna know these spacing elements.

I'm not gonna lie, they've been around for a long time, but I have a point which I will get to, so bear with me.

word-spacing, not commonly used, but as the name implies, allows you to add space between words.

Positive and negative space.

Don't do that middle example, it looks terrible . Same with letter spacing.

It allows you to put space between letters.

Now, important to note is that if you enable things like letter and word spacing and you've enabled something like kerning or ligatures, it'll be disabled because when you've put letter spacing, there's no collisions between characters, so you don't need the ligature.

So important to know how turning on and off features can impact how your text is rendered . Now the other example, line height, very similar except instead of horizontal space, it increase or decreases the vertical space between the baselines of text.

Now you can use this to do things like this, which in print a lot.

Adding space between uppercase letters so that they're easier to read.

They're hard to read if you don't add the space.

But the reason that I wanted to mention it is because if you've got a website, this used to happen to me all the time at my previous work . Somebody will be like, Hey, I wanna put in a seasonal link, like Christmas and sale, and all of a sudden it's real crampy and people will be like, oh, you gotta take a link out.

You gotta change the font size . You gotta adjust the margins and the padding.

Or you could change the letter spacing and the word spacing just a little bit.

Because sometimes in our interfaces when we've got a lot going on, we've got restricted space.

You just need a little bit of extra space to stop that button from wrapping or that text from overflowing a container.

And that's where things like word spacing, letter spacing, and line height can come in really handy cuz you might only need a little bit.

So don't forget that they're there.

Now when it comes to spacing a really common problem, is that standard text box will almost always have space above and below the text.

In this example, what we intended is that the space between the adjacent items and the text is exactly 28 pixels, but because of that space in the text box, it's going to look more than it's gonna be more than you intended.

This is often why our designs and our implementation don't look the same.

So what we actually want is that one at the bottom where the text is cropped, right at the characters.

But this doesn't happen because of leading , this is a typographical thing.

There's a lot of reasons why it's there.

It doesn't really matter.

What matters is how we deal with it on the Web.

And the way we do it at the moment is by using negative margins to crop out that space.

And there are some libraries that do this for you, like capsize, really great The problem is that this needs to be calculated manually per font because it changes between fonts and it can introduce some unintended side effects.

So I wanted to mention this property.

It's called leading-trim . It's draft so you can't use it.

Sorry, boo.

But I'm telling you so that you can get more people to want it and implement it . Essentially what it does is you can define where you want the text to be cropped at the top and the bottom.

So in this case, cap and ideographic refer to the cap height.

The line across the top of the text and ideographic is the ideo graphic baseline, which is line at the bottom of the descenders.

So the bottom of the Y.

This is better because it's not font specific.

It'll consult the font, find out what that information is, and it'll crop it for you So obviously removes the unintended side effects of negative margins and it'll work if you have to change the font, all that kind of thing.

Please go and like I just, this is the issue.

Go there.

I really want this.

I remember hearing about it in 2000.

And it's still not, ready yet.

So obviously it's difficult to do this kind of thing, but this, would be amazing for component libraries and stuff like that.

So the last thing I wanna talk about is rendering text.

Now you might be wondering why I've not talked about the flash of unstyled text and stuff.

And the reason I didn't is cuz there's a lot of talks on that.

I wanted to mention briefly font-smooth.

font-smooth lets us control the anti aliasing of text and you will probably see it a lot in CSS libraries or frameworks.

And that's why I'm mentioning it because it's typically applied to the body of the page to fix all of the text.

This is actually being deprecated.

W3C doesn't encourage you to use it.

It was implemented so that because browsers weren't very good at subpixel rendering and it was trying to resolve that, but you don't really need it anymore because that's fixed and they discouraged the use.

So I'm not gonna tell you not to use it.

It's a legibility versus aesthetic thing, it can have accessibility issues because of the blurring of the text.

You can lose some of that contrast that you work so hard for hopefully.

Where particularly at smaller font sizes.

So I've linked at the end some articles, the issue to allow you to make your own decision, but it's definitely not something that you necessarily need.

Last I checked Google Fonts don't even have it.

So if they don't have it, you probably don't need it.

And the last property I'm going to mention is text-rendering, which is not actually a CSS property.

Sorry, not actually a CSS spec.

It's an SVG standard that browsers let you apply to HTML elements and they pretty much do what the name implies except for maybe that last one, which is a bit confusing.

optimizeSpeed will optimize speed over things like legibility.

So it'll try and render things quickly.

And that means it'll disable things like ligatures that we've talked.

optimizedLegibility does the opposite of that, and it'll prioritize special features like kerning and legibility over speed.

geometricPrecision aims to draw the text as precisely as possible so it can scale up and down with no loss like an SVG because it's an SVG thing.

When you use these, depends on the context that you have.

Like what, you're applying it to.

And the reason I wanted to mention it is because you can actually get quite good performance benefits from optimizeSpeed, but it's at the expense of legibility.

And I'm always on the side of legibility as much as important as performance is.

Just remember that those options are there that you can experiment with them if, speed or legibility is really important to you.

I wanted to finish up by saying it's really easy to think of text as something that's just there.

Something that you just chuck on the page and you're restricted to, to however it ends up.

But really what we wanna do is spend a little bit more time on our text cuz it's the most important thing in our page We want more care and consideration for how we make use of the options, the properties, the features at our disposal.

Because there's a lot more ways that we can control text now than we ever have had in the past with CSS, and a lot of it's happened more recently.

It's easy to forget about them and it can make a big difference to how your text is consumed.

Which is important.

It's the most important thing.

So next time you are designing or coding, make sure that you are thinking about what HTML element to use, what features the font that you're using offers to you, how you can apply them to make the text more readable and more legible.

Because if you do this, If you make the most of those options, then your text and content will be much better for the users and they'll now be able to get the most out of it as well.

And if you can use things like accessible fonts to give control back to the users so that they can make it better for their unique experience as well.

Thanks very much.