Typography on the web. Yandex lecture on FrontTalks 2018
After a short break from the lectures, we begin the New Year sprint. Like a year ago, it will consist entirely of materials from the large FrontTalks conference, which Yandex held in Yekaterinburg. Let's start with the speech of Anton Kastritsky - a developer from Yandex.Market. Anton showed on examples how and from what interfaces are collected, and also told about the texts, their design, accessibility and performance in the context of modern web applications.
- My name is Anton, I work as an interface developer in the Yandex.Market partner interface team. Today I want to talk about typography on the web.
Before that I want to tell a little story about how it happened that this topic is close and interesting to me.
One day I thought that maybe not everyone understands how to work with text, fonts, and display on the web. And perhaps the very first time I thought about it was when I wanted to get into Yandex. I was interviewed, I had a section with layout. I love the layout, nothing complicated, I like it. It was necessary to impose a component, I did everything, great. In the description of the task it was written that it was necessary to set the fonts, there was Arial, Helvetica. Well, no problem, I wrote Helvetica, Arial, sans-serif. Everything is as it should be. But the interviewee did not agree, said that I have written incorrectly. I was embarrassed by this, I thought that Yandex is a large company, they probably expect a lot from me. Know what system fonts are, what safe fonts are. I told them how they work and why I wrote everything down as it is.
The interviewer did not immediately agree with me, but as a result we came to understand that it was necessary to write Helvetica, Arial, and not vice versa. So I got to Yandex. Began to interview, found this puzzle, corrected. So come to work with us, we have great.
Before going to the typography, let's talk about what the text.
Text is a tool that helps us suggest something to the user about his subsequent actions. A huge part of the content on the Internet - the text. Despite the fact that such services as Instagram, YouTube are now popular, people consume a lot of multimedia content, the text also takes up a huge amount of space on the Internet, and people still read it. It is very important.
Who works in companies where there is a copywriter or a writer who is engaged in texts? Almost half. And who thinks out the text for the application itself? Also half.
Sometimes it happens that the designer gave you the design, you started to do it. But there were several unforeseen states, and you have to think out the text yourself. Almost everything, wow. In such situations it should be a shame. I got the impression that the developers underestimate the role of copywriters in the company, look down on them and present them somehow.
Just a bunch of art ladies who sit in the office and very skillfully simulate work. In fact, it is not.
Copywriters are like this prophet, who is trying to show a girl developer how it really should be, and she tries in every way to ignore him.
The role of copywriters is very important. They can have a direct impact on the product, offer more harmonious solutions, interactions, mechanics. A person, having read the text on the page, can perceive your product quite differently. Their role is really very important, you should always listen to them, and not like this girl who tries to work and not pay attention to what this prophet is telling her. Try to listen to your copywriters and feel free to ask them questions.
It is also very important not only what you write, but generally write in general. I want to show a real life example. We had a component where the user needed to add a phone number.
A huge page with settings, everything is as usual. There was a label, a number, an “Add” button, the user clicked on it, and a phone number appeared.
After he successfully entered a phone number, he had to click on the gray check mark to save.
When we started to conduct UX testing, we learned that a very small number of users even guessed that it was necessary to click on the gray button to save the phone number. What have we done? After the user successfully entered the phone number, we ticked the checkbox in yellow, and the user could save it.
We re-tested UX. Slightly more people figured out how to save a phone number.
At this point, it may seem to you that our users have some problems with interacting with our interfaces, they use them somehow.
But in fact, the problem is not with the users, but with us, because we could not clearly convey to them what we want from them. Therefore, today this component looks a little different: everything is also pressing the button, but now it has a pop-up with explicit “undo” and “save” buttons.
After he has successfully entered a phone number, the “save” button lights up, and the user can independently understand whether he wants to save it or not. If he clicks outside the popup, the popup will be hidden, and he hasn’t added a number yet.
From this we can conclude: do not be afraid to write obvious things. We - the developers spend a huge amount of time on the Internet, we see a lot of different GUI options, how to do the same thing. But not all of our users have this experience. So let's make simpler and more intuitive interfaces that will be easier for the user to figure out on their own.
Let's talk about the mapping as a whole. It is easy to guess that all the mapping rules came to us from the print.
It is important to replace that I am a developer, and I do not know how to do it beautifully. I know how to do it so that it works, and when everything is good, and it works productively. Therefore, I will not talk about serifs or different types of fonts. I will, but later.
There are a lot of text content and services on the Internet, where users log in exclusively for the purpose of reading something.
It seems to me that one of the most convenient services is Medium. I think everyone knows him, they come in, read the news, especially on the subject of the frontend. The service really delivers content that is easy to read. But I will give you a counterexample that we all used.
I do not know a single person who visits Wikipedia and reads anything with pleasure. It seems to me that this is not a readable option, although this can be corrected by following only two or three rules.
The first is to have about 10 words in a line.
We need to limit the width of the text content to about 80 characters. This rule can remind your linter settings, because the display of the code, and the code itself, as well as the text on the sites, is written so that it can be easily perceived by a person, not a computer.
The second is the line spacing. When your lines are too close to each other, users already begin to experience difficulties with the perception of this.
And make the font a little more, for ease of perception. Wikipedia now takes on a look that is already noticeably easier to perceive.
And also, if the space on the screen is very important to you, you can add hyphenation.
This may not always work correctly with the Russian text, but it can help save a couple of lines.
Do not forget that there are many spelling rules in Russian. It is necessary to get rid of such things as hanging prepositions, to make sure that there should be large hyphens where necessary, and so on. This can help you tools such as "Typographer" . Just run through your text and that's it.
If you have static text, you can add a babel plugin to convert it when you build your application. If your text is stored in external storage, this npm package may be useful.With it, you can convert the text before sending it to the client.
How is it that we can use different fonts on the web?
Adult developers may recall that long ago we had to add different images if we wanted to somehow transform the appearance of the text on the pages. Later we got the font tag. And today we use the font-family property, where we list the fonts themselves in the order in which we want them to be applied. If suddenly the browser does not find and does not recognize one, it will simply go further along this list and take advantage of the following.
Already today we have a large number of properties to transform the display of the text.
And I can not fail to mention such a thing as variable fonts.
This helps us further transform the display of our interfaces. Today, support is already quite good.
About this technology has been written a huge amount of information on the Internet over the past couple of years, that we will not dwell on them now.
There are a lot of fonts. But I wanted to come up from an engineering point of view and divide them into several types.
I think everyone who read the specifications, and not only, know that there are system fonts that are pre-installed in the OS out of the box; there are installed fonts that the user has installed; as well as downloadable or web fonts, this is all that the user downloads by going to your application.
I can not fail to mention secure fonts. How is it that they appeared with us? Previously, we could not expect that the user had one or another font, so at the very beginning of the 2000s, Microsoft offered a list of six fonts that were present on all systems from the very beginning of the last decade, and developers could use them with a clear conscience knowing that these fonts are already present in users and do not have to send extra requests.
And here we see the same Arial. Looking ahead: someone already knows that Helvetica is a system font on macOS, it has been there for many years. Therefore, in the story I mentioned at the beginning, I said that we should write down Helvetica, Arial, and not vice versa.
After that, I noticed a lot of this entry on a variety of resources, and I was wondering where it came from, how it happened that people could make such a basic mistake. After all, we learn this when we start learning CSS.
I was very surprised when I realized that it came from such a fairly respected resource as w3schools, sent them a bug report, but they still did not fix it, oh.
And now back to the fonts. How can we connect fonts? We have CSS and JavaScript.
We can declare a custom font-face and specify several formats from which the browser will select and download the first one it knows.
- WOFF2 is best compressed and supported by all modern browsers.
- WOFF shrinks a little worse, but it has excellent support.
- EOT is needed exclusively for older IE. - TTF, it also has good support, and by downloading it, we can install it on the OS.
- SVG, which is deprecated, in my opinion, is currently supported only in one or two browsers.
We also have such a cool CSS function as local, with its help we can check whether the font is present in the user's OS. But you do not need to rely on it. Even if the fonts have the same name, it does not mean at all that it is the same font. Therefore, if you use it, be careful.
After you have declared the font, do not forget to specify several folds, in case the browser fails to download it.
I think many people know that we can specify a Unicode range for fonts, and after the font is downloaded, it will be used exclusively for the specified characters. For example, you want only English text to be displayed in this font, or only numbers, etc.
This also allows you to significantly reduce the traffic that we send to users.
Above, we can split the font into two separate files, in one there are only Latin characters, and in the second - Cyrillic. We gave them the same font-family name, so that the browser would understand that these are parts of a single font. Now, if we have only Cyrillic characters on the page, the user downloads only the second file, which reduces the traffic that the user downloads.
As a result, it is not so difficult to engage in sabsetting, there are GUI and CLI tools for this, it is easy to find them and deal with them.
The support today is pretty good. Do not hesitate to use it.
Do not forget about the great saying “Measure seven times - to register once”, otherwise you can get into a rather inconvenient situation.
We can also load fonts using JS, we have the FontFace API for this, it looks quite similar.
We declare a new font, load it, it loads asynchronously. Once it has loaded, we can add it to the page.
At first glance, this approach may seem useless, unless you are engaged in a service for the sale of fonts. But by the end of the report you may change your mind.
Well, we have a service, we added several fonts to it. And our user comes to our page, and meets with such a picture.
How did that happen? The HTML has already arrived, the styles have been loaded, and the fonts have not yet arrived, and here the behavior of the browser may vary. Some of the browsers block text rendering, it would seem that there is no text, but in fact browsers describe text with their own, transparent font, because they need to know how much space on the page the text takes so that all the indents are similar. When the font is loaded, the text will be redrawn with your font and displayed in the browser.
It would be great if we could unify the behavior of the browser in such cases. After all, some browsers can draw text with transparent fonts, while others can fold text. To do this, we have only one line of code.
Basically, only block or swap will be useful to you from this Block will force the browser to wait and render the content on a page with a transparent font, because it is quite possible that you have some very beautiful custom font that does not look like anything. Therefore, you do not want the user to see the text, so let the user wait. It will not wait forever for just three seconds, after which it will use the following font and will wait for full infinity until yours arrives.
Or swap, when the browser immediately takes the next foldable font, draws content with it, and waits an infinite time for your font to arrive.
To date, the support is quite good, it can already be used. After all, CSS is not JS, if suddenly the browser does not understand something - no big deal, it will ignore this rule and move on. In such a case, we get the same behavior as before.
Great, we prompted the browser, now we have the same behavior of almost all non-legacy browsers.
But we did not solve the problem itself. How come the fonts come so long? Long ago, when I was not working in Yandex, I made a small landing page, nothing special, but a lot of pictures and a little bit of styles.
I encountered such a problem that the font came literally at 6–7 seconds, and this is just with throttling the network on fast 3G, although the first render was already displayed for about 2.5 seconds, and the user just looked at a blank page.
Blue HTML is loaded on top, followed by purple styles. And where is our font?
Here he is. How did that happen? We have a slight clarification, even if we declare our font at the very beginning of our styles, the browser will send a request for it only after it downloads all the CSS, completely parses it and sees that there is text on the page that needs to be drawn with this font .
It would be great if we could tell the browser: listen, I’ll definitely use this font, and download it right now.
So we can. This is called a font download. We can tell the browser in just one line that we need to download this particular font and send a request for it before we send the request for styles. Now the waterfall of requests looks different.
Our text with the correct font appears along with the rest of the content for about 3 seconds. This does not speed up our site, but the user can immediately begin to navigate this content. And this is good.
link preload only works in fairly modern browsers, and you should use it mainly with woff2, if not, then just woff. Because the request is always sent.
Another good practice with preloading: you only need to specify one file that the browser will understand. If you start reading about it on MDN, then you will see something similar.
You should never do this, because in this way we will send many requests for fonts of each format, although the browser uses only one. Why did they add eot format here, which is used only for IE, which is no longer developed or supported even by Microsoft? It is unlikely that they will tell us.
Such code should look more like this.
Perhaps you have other tasks that need to be performed when initializing your application? For example, important metrics that need to be measured when the page loads, and you do not want to immediately send a request for fonts, and download other assets.
There is another approach for this - replacing fonts. After all, we can load fonts in JS, and after the font is loaded, just add a class to the page where we describe the font to display the text.
But here we face a problem. The fonts are all different, and letter spacing may differ, as well as the distance between words. This problem would also be good to solve. To do this, we have a Font style matcher, with which we can impose one font on another, and having played a little with different CSS properties, make sure that they will be displayed as similar as possible, now we can copy the behavior of the default font and make sure that after as we load a custom font, the content on the page does not begin to “jump”.
Do we even need web fonts? Maybe our users are not so important what font we use.
To answer this question, you need to answer three smaller questions. Is the font part of our brand? In Yandex, of course, yes, therefore we cannot refuse our Yandex Sans. Perhaps it works differently in your companies. Maybe your custom font is much easier to read the text on the page? Or maybe you just want to use one font on all devices?
If all the answers to these questions were no, then you are most likely to refuse web fonts. Secure fonts have only one drawback, they are not very attractive. And what can we do about it? There is a solution, and these are system fonts. Each OS out of the box has pretty nice nice fonts and you can use them.
There is such a great value, like system-ui, with which the browser will simply start using system fonts by default, but it is still in stage 2, it has poor support, and it breaks everything on Windows, so we will wait.
It's okay, we can list the very native fonts that are in the systems. If one browser does not, it will go on and find the one that it has. This is a fairly popular pattern, it is used by such well-known services like github, Twitter, Medium. You may also find this interesting and useful.
Also the services that I listed are those where the guys who originally wrote bootstrap worked. It happened.
I am very pleased that at this conference many people talked about such things as accessibility, which is great, we need to take care of this, this is the work that is divided between the developer and the designer.
But what about visually impaired people? Maybe someone is not so good at distinguishing colors or just seeing poorly?
I hope it’s not a discovery for anyone that the Internet is full of all sorts of contrast checkers with which you can find out how easily the text is read on the page. We are developers, we do not want to go to other sites every time and check it manually, it would be great to automate.
Yes, for this we have ax and pa11y , accessibility test runners, which you can add to your build or CI checks. Both of them are mostly more suitable for screen readers. pa11y can also tell you with contrast.
Once the designer asked me to add a small plate to the page. Who likes it, who thinks it is easy to read? There are several hands.
I did not really understand how it happened, and decided to figure it out. Recently, if you open the color picker in your dev tools, in any Chromium browser you will see a new line - contrast.
It can be opened, and you will see an arc, with the help of which you will understand, the browser itself will tell you on what background and with what color the font was rendered. You will also see an arc in a range of colors, lowering and selecting a color that is under the arc, here you can see that two green check marks appear below, which the browser tells us is easier to read.
Visually, everything has not changed very much, but it may be worthwhile to talk about it with the designers and make sure that the text will be easy to read even by visually impaired people.
I can not fail to mention bad practices when working with fonts.
About five years ago there were many popular articles that we can store our fonts in localStorage, the page will load and take them from there. There is still a big mystery for me, how did it happen that people came up with such a thing. Indeed, in any case, when you first enter the site, there will be no font, the user will have to download it, he can simply cache it in a regular cache, a service worker will be put in today, but not.
Another reason why this is a bad idea: first of all, localStorage was not intended for this, it is the usual key-value-storage, but what's worse, synchronous. While we are reading from there, the browser cannot do anything, so let's not clog the streams and put our fonts in there.
Another approach is inline fonts. This is when we zainlinivaem font in the head of the HTML-code page. There is a controversial issue, because it is not cached. But maybe this will help you if your services have a high bounce rate. For example, you are developing an application for the funeral home - I do not think that people go there more often than once a year.
Another practice that can be questioned is iconic fonts. Strange situation: people use icon fonts, download 200 kilobytes with a hundred different icons, although they use only five on their websites. If you come to this, you probably need to sabsetit and cut out all unnecessary. But then the designer will come to you, ask you to change one icon - you have to regenerate the entire font, and users will have to completely download it again, although svg has been supported everywhere for a long time. It seems to be the ideal technology for this approach. svg also allows you to get to individual parts of the icon with your own CSS handles and selectively paint or animate them.
And the strangest thing, I even had to add it. Font for logo. There are still people who download a separate font, just to display the logo on the page. Again - svg.
Try to listen to your copywriters. They, like you, are interested in making the best product. Therefore, our final product is the result of joint work: us, copywriters, designers, and managers. Let's work together.
Do not be afraid to write obvious things. Not all users are as skilled and experienced as we are. Keep track of the readability of the text. This is a work that is shared between you and the designer. And if your designer doesn’t follow that much, perhaps you should remind him of that.
Probably, you can refuse your custom fonts, reduce traffic, speed up the speed of displaying your content on the site. But if you suddenly can not - see options such as loading and replacing fonts. Thank!
- My name is Anton, I work as an interface developer in the Yandex.Market partner interface team. Today I want to talk about typography on the web.
Before that I want to tell a little story about how it happened that this topic is close and interesting to me.
One day I thought that maybe not everyone understands how to work with text, fonts, and display on the web. And perhaps the very first time I thought about it was when I wanted to get into Yandex. I was interviewed, I had a section with layout. I love the layout, nothing complicated, I like it. It was necessary to impose a component, I did everything, great. In the description of the task it was written that it was necessary to set the fonts, there was Arial, Helvetica. Well, no problem, I wrote Helvetica, Arial, sans-serif. Everything is as it should be. But the interviewee did not agree, said that I have written incorrectly. I was embarrassed by this, I thought that Yandex is a large company, they probably expect a lot from me. Know what system fonts are, what safe fonts are. I told them how they work and why I wrote everything down as it is.
The interviewer did not immediately agree with me, but as a result we came to understand that it was necessary to write Helvetica, Arial, and not vice versa. So I got to Yandex. Began to interview, found this puzzle, corrected. So come to work with us, we have great.
Before going to the typography, let's talk about what the text.
Text
Text is a tool that helps us suggest something to the user about his subsequent actions. A huge part of the content on the Internet - the text. Despite the fact that such services as Instagram, YouTube are now popular, people consume a lot of multimedia content, the text also takes up a huge amount of space on the Internet, and people still read it. It is very important.
Who works in companies where there is a copywriter or a writer who is engaged in texts? Almost half. And who thinks out the text for the application itself? Also half.
Sometimes it happens that the designer gave you the design, you started to do it. But there were several unforeseen states, and you have to think out the text yourself. Almost everything, wow. In such situations it should be a shame. I got the impression that the developers underestimate the role of copywriters in the company, look down on them and present them somehow.
Just a bunch of art ladies who sit in the office and very skillfully simulate work. In fact, it is not.
Copywriters are like this prophet, who is trying to show a girl developer how it really should be, and she tries in every way to ignore him.
The role of copywriters is very important. They can have a direct impact on the product, offer more harmonious solutions, interactions, mechanics. A person, having read the text on the page, can perceive your product quite differently. Their role is really very important, you should always listen to them, and not like this girl who tries to work and not pay attention to what this prophet is telling her. Try to listen to your copywriters and feel free to ask them questions.
It is also very important not only what you write, but generally write in general. I want to show a real life example. We had a component where the user needed to add a phone number.
A huge page with settings, everything is as usual. There was a label, a number, an “Add” button, the user clicked on it, and a phone number appeared.
After he successfully entered a phone number, he had to click on the gray check mark to save.
When we started to conduct UX testing, we learned that a very small number of users even guessed that it was necessary to click on the gray button to save the phone number. What have we done? After the user successfully entered the phone number, we ticked the checkbox in yellow, and the user could save it.
We re-tested UX. Slightly more people figured out how to save a phone number.
At this point, it may seem to you that our users have some problems with interacting with our interfaces, they use them somehow.
But in fact, the problem is not with the users, but with us, because we could not clearly convey to them what we want from them. Therefore, today this component looks a little different: everything is also pressing the button, but now it has a pop-up with explicit “undo” and “save” buttons.
After he has successfully entered a phone number, the “save” button lights up, and the user can independently understand whether he wants to save it or not. If he clicks outside the popup, the popup will be hidden, and he hasn’t added a number yet.
From this we can conclude: do not be afraid to write obvious things. We - the developers spend a huge amount of time on the Internet, we see a lot of different GUI options, how to do the same thing. But not all of our users have this experience. So let's make simpler and more intuitive interfaces that will be easier for the user to figure out on their own.
Display
Let's talk about the mapping as a whole. It is easy to guess that all the mapping rules came to us from the print.
It is important to replace that I am a developer, and I do not know how to do it beautifully. I know how to do it so that it works, and when everything is good, and it works productively. Therefore, I will not talk about serifs or different types of fonts. I will, but later.
There are a lot of text content and services on the Internet, where users log in exclusively for the purpose of reading something.
Link from the slide
It seems to me that one of the most convenient services is Medium. I think everyone knows him, they come in, read the news, especially on the subject of the frontend. The service really delivers content that is easy to read. But I will give you a counterexample that we all used.
Link from the slide
I do not know a single person who visits Wikipedia and reads anything with pleasure. It seems to me that this is not a readable option, although this can be corrected by following only two or three rules.
The first is to have about 10 words in a line.
We need to limit the width of the text content to about 80 characters. This rule can remind your linter settings, because the display of the code, and the code itself, as well as the text on the sites, is written so that it can be easily perceived by a person, not a computer.
The second is the line spacing. When your lines are too close to each other, users already begin to experience difficulties with the perception of this.
And make the font a little more, for ease of perception. Wikipedia now takes on a look that is already noticeably easier to perceive.
And also, if the space on the screen is very important to you, you can add hyphenation.
This may not always work correctly with the Russian text, but it can help save a couple of lines.
Do not forget that there are many spelling rules in Russian. It is necessary to get rid of such things as hanging prepositions, to make sure that there should be large hyphens where necessary, and so on. This can help you tools such as "Typographer" . Just run through your text and that's it.
If you have static text, you can add a babel plugin to convert it when you build your application. If your text is stored in external storage, this npm package may be useful.With it, you can convert the text before sending it to the client.
Fonts on the web
How is it that we can use different fonts on the web?
Adult developers may recall that long ago we had to add different images if we wanted to somehow transform the appearance of the text on the pages. Later we got the font tag. And today we use the font-family property, where we list the fonts themselves in the order in which we want them to be applied. If suddenly the browser does not find and does not recognize one, it will simply go further along this list and take advantage of the following.
Already today we have a large number of properties to transform the display of the text.
And I can not fail to mention such a thing as variable fonts.
Link from the slide
This helps us further transform the display of our interfaces. Today, support is already quite good.
Link from the slide
About this technology has been written a huge amount of information on the Internet over the past couple of years, that we will not dwell on them now.
Fonts
There are a lot of fonts. But I wanted to come up from an engineering point of view and divide them into several types.
I think everyone who read the specifications, and not only, know that there are system fonts that are pre-installed in the OS out of the box; there are installed fonts that the user has installed; as well as downloadable or web fonts, this is all that the user downloads by going to your application.
I can not fail to mention secure fonts. How is it that they appeared with us? Previously, we could not expect that the user had one or another font, so at the very beginning of the 2000s, Microsoft offered a list of six fonts that were present on all systems from the very beginning of the last decade, and developers could use them with a clear conscience knowing that these fonts are already present in users and do not have to send extra requests.
And here we see the same Arial. Looking ahead: someone already knows that Helvetica is a system font on macOS, it has been there for many years. Therefore, in the story I mentioned at the beginning, I said that we should write down Helvetica, Arial, and not vice versa.
After that, I noticed a lot of this entry on a variety of resources, and I was wondering where it came from, how it happened that people could make such a basic mistake. After all, we learn this when we start learning CSS.
I was very surprised when I realized that it came from such a fairly respected resource as w3schools, sent them a bug report, but they still did not fix it, oh.
Link from the slide
And now back to the fonts. How can we connect fonts? We have CSS and JavaScript.
We can declare a custom font-face and specify several formats from which the browser will select and download the first one it knows.
- WOFF2 is best compressed and supported by all modern browsers.
- WOFF shrinks a little worse, but it has excellent support.
- EOT is needed exclusively for older IE. - TTF, it also has good support, and by downloading it, we can install it on the OS.
- SVG, which is deprecated, in my opinion, is currently supported only in one or two browsers.
We also have such a cool CSS function as local, with its help we can check whether the font is present in the user's OS. But you do not need to rely on it. Even if the fonts have the same name, it does not mean at all that it is the same font. Therefore, if you use it, be careful.
After you have declared the font, do not forget to specify several folds, in case the browser fails to download it.
I think many people know that we can specify a Unicode range for fonts, and after the font is downloaded, it will be used exclusively for the specified characters. For example, you want only English text to be displayed in this font, or only numbers, etc.
This also allows you to significantly reduce the traffic that we send to users.
Above, we can split the font into two separate files, in one there are only Latin characters, and in the second - Cyrillic. We gave them the same font-family name, so that the browser would understand that these are parts of a single font. Now, if we have only Cyrillic characters on the page, the user downloads only the second file, which reduces the traffic that the user downloads.
As a result, it is not so difficult to engage in sabsetting, there are GUI and CLI tools for this, it is easy to find them and deal with them.
Links from the slide: first , second , third , fourth
The support today is pretty good. Do not hesitate to use it.
Link from the slide
Do not forget about the great saying “Measure seven times - to register once”, otherwise you can get into a rather inconvenient situation.
Link from the slide
We can also load fonts using JS, we have the FontFace API for this, it looks quite similar.
We declare a new font, load it, it loads asynchronously. Once it has loaded, we can add it to the page.
At first glance, this approach may seem useless, unless you are engaged in a service for the sale of fonts. But by the end of the report you may change your mind.
Well, we have a service, we added several fonts to it. And our user comes to our page, and meets with such a picture.
How did that happen? The HTML has already arrived, the styles have been loaded, and the fonts have not yet arrived, and here the behavior of the browser may vary. Some of the browsers block text rendering, it would seem that there is no text, but in fact browsers describe text with their own, transparent font, because they need to know how much space on the page the text takes so that all the indents are similar. When the font is loaded, the text will be redrawn with your font and displayed in the browser.
It would be great if we could unify the behavior of the browser in such cases. After all, some browsers can draw text with transparent fonts, while others can fold text. To do this, we have only one line of code.
Link from the slide
Basically, only block or swap will be useful to you from this Block will force the browser to wait and render the content on a page with a transparent font, because it is quite possible that you have some very beautiful custom font that does not look like anything. Therefore, you do not want the user to see the text, so let the user wait. It will not wait forever for just three seconds, after which it will use the following font and will wait for full infinity until yours arrives.
Or swap, when the browser immediately takes the next foldable font, draws content with it, and waits an infinite time for your font to arrive.
Link from the slide
To date, the support is quite good, it can already be used. After all, CSS is not JS, if suddenly the browser does not understand something - no big deal, it will ignore this rule and move on. In such a case, we get the same behavior as before.
Great, we prompted the browser, now we have the same behavior of almost all non-legacy browsers.
But we did not solve the problem itself. How come the fonts come so long? Long ago, when I was not working in Yandex, I made a small landing page, nothing special, but a lot of pictures and a little bit of styles.
I encountered such a problem that the font came literally at 6–7 seconds, and this is just with throttling the network on fast 3G, although the first render was already displayed for about 2.5 seconds, and the user just looked at a blank page.
Blue HTML is loaded on top, followed by purple styles. And where is our font?
Here he is. How did that happen? We have a slight clarification, even if we declare our font at the very beginning of our styles, the browser will send a request for it only after it downloads all the CSS, completely parses it and sees that there is text on the page that needs to be drawn with this font .
It would be great if we could tell the browser: listen, I’ll definitely use this font, and download it right now.
Link from the slide
So we can. This is called a font download. We can tell the browser in just one line that we need to download this particular font and send a request for it before we send the request for styles. Now the waterfall of requests looks different.
Our text with the correct font appears along with the rest of the content for about 3 seconds. This does not speed up our site, but the user can immediately begin to navigate this content. And this is good.
Link from the slide
link preload only works in fairly modern browsers, and you should use it mainly with woff2, if not, then just woff. Because the request is always sent.
Another good practice with preloading: you only need to specify one file that the browser will understand. If you start reading about it on MDN, then you will see something similar.
Link from the slide
You should never do this, because in this way we will send many requests for fonts of each format, although the browser uses only one. Why did they add eot format here, which is used only for IE, which is no longer developed or supported even by Microsoft? It is unlikely that they will tell us.
Such code should look more like this.
Perhaps you have other tasks that need to be performed when initializing your application? For example, important metrics that need to be measured when the page loads, and you do not want to immediately send a request for fonts, and download other assets.
There is another approach for this - replacing fonts. After all, we can load fonts in JS, and after the font is loaded, just add a class to the page where we describe the font to display the text.
But here we face a problem. The fonts are all different, and letter spacing may differ, as well as the distance between words. This problem would also be good to solve. To do this, we have a Font style matcher, with which we can impose one font on another, and having played a little with different CSS properties, make sure that they will be displayed as similar as possible, now we can copy the behavior of the default font and make sure that after as we load a custom font, the content on the page does not begin to “jump”.
Slide Link
Do we even need web fonts? Maybe our users are not so important what font we use.
To answer this question, you need to answer three smaller questions. Is the font part of our brand? In Yandex, of course, yes, therefore we cannot refuse our Yandex Sans. Perhaps it works differently in your companies. Maybe your custom font is much easier to read the text on the page? Or maybe you just want to use one font on all devices?
If all the answers to these questions were no, then you are most likely to refuse web fonts. Secure fonts have only one drawback, they are not very attractive. And what can we do about it? There is a solution, and these are system fonts. Each OS out of the box has pretty nice nice fonts and you can use them.
Link from the slide
There is such a great value, like system-ui, with which the browser will simply start using system fonts by default, but it is still in stage 2, it has poor support, and it breaks everything on Windows, so we will wait.
It's okay, we can list the very native fonts that are in the systems. If one browser does not, it will go on and find the one that it has. This is a fairly popular pattern, it is used by such well-known services like github, Twitter, Medium. You may also find this interesting and useful.
Also the services that I listed are those where the guys who originally wrote bootstrap worked. It happened.
I am very pleased that at this conference many people talked about such things as accessibility, which is great, we need to take care of this, this is the work that is divided between the developer and the designer.
But what about visually impaired people? Maybe someone is not so good at distinguishing colors or just seeing poorly?
Slide Link
I hope it’s not a discovery for anyone that the Internet is full of all sorts of contrast checkers with which you can find out how easily the text is read on the page. We are developers, we do not want to go to other sites every time and check it manually, it would be great to automate.
Yes, for this we have ax and pa11y , accessibility test runners, which you can add to your build or CI checks. Both of them are mostly more suitable for screen readers. pa11y can also tell you with contrast.
Once the designer asked me to add a small plate to the page. Who likes it, who thinks it is easy to read? There are several hands.
I did not really understand how it happened, and decided to figure it out. Recently, if you open the color picker in your dev tools, in any Chromium browser you will see a new line - contrast.
It can be opened, and you will see an arc, with the help of which you will understand, the browser itself will tell you on what background and with what color the font was rendered. You will also see an arc in a range of colors, lowering and selecting a color that is under the arc, here you can see that two green check marks appear below, which the browser tells us is easier to read.
Visually, everything has not changed very much, but it may be worthwhile to talk about it with the designers and make sure that the text will be easy to read even by visually impaired people.
I can not fail to mention bad practices when working with fonts.
About five years ago there were many popular articles that we can store our fonts in localStorage, the page will load and take them from there. There is still a big mystery for me, how did it happen that people came up with such a thing. Indeed, in any case, when you first enter the site, there will be no font, the user will have to download it, he can simply cache it in a regular cache, a service worker will be put in today, but not.
Another reason why this is a bad idea: first of all, localStorage was not intended for this, it is the usual key-value-storage, but what's worse, synchronous. While we are reading from there, the browser cannot do anything, so let's not clog the streams and put our fonts in there.
Another approach is inline fonts. This is when we zainlinivaem font in the head of the HTML-code page. There is a controversial issue, because it is not cached. But maybe this will help you if your services have a high bounce rate. For example, you are developing an application for the funeral home - I do not think that people go there more often than once a year.
Another practice that can be questioned is iconic fonts. Strange situation: people use icon fonts, download 200 kilobytes with a hundred different icons, although they use only five on their websites. If you come to this, you probably need to sabsetit and cut out all unnecessary. But then the designer will come to you, ask you to change one icon - you have to regenerate the entire font, and users will have to completely download it again, although svg has been supported everywhere for a long time. It seems to be the ideal technology for this approach. svg also allows you to get to individual parts of the icon with your own CSS handles and selectively paint or animate them.
And the strangest thing, I even had to add it. Font for logo. There are still people who download a separate font, just to display the logo on the page. Again - svg.
Try to listen to your copywriters. They, like you, are interested in making the best product. Therefore, our final product is the result of joint work: us, copywriters, designers, and managers. Let's work together.
Do not be afraid to write obvious things. Not all users are as skilled and experienced as we are. Keep track of the readability of the text. This is a work that is shared between you and the designer. And if your designer doesn’t follow that much, perhaps you should remind him of that.
Probably, you can refuse your custom fonts, reduce traffic, speed up the speed of displaying your content on the site. But if you suddenly can not - see options such as loading and replacing fonts. Thank!