 Welcome to Designing in the Browser. In this series, we explore how to take a design, build it, and then tweak it in the browser using the latest in web technology and design systems. Today, we're talking all about typography on the web. We're talking about type systems and about variable fonts, the new frontier in web typography. It's such an exciting time to be a designer on the web, so let's dive in. You excited, bud? A typographic scale is super important for readability and consistency when designing a website or system. The material design type scale includes a range of contrasting styles that support the needs of your product and its content. It looks like this. Material design components for the web is the web-based implementation of material design. Within it, you can implement the material type system in two ways. The first is by using classes. I have the starter kit pulled up here to show what that looks like. You can set MDC typography on the parent elements, the body class, for example, as we have here. To get those default typefaces, like Roboto or whatever style you set those in the theme, to propagate within that element on the page. So here, I have this set on the body class, and even though in the paragraphs I'm not specifying a typography style, we're still getting Roboto as of typeface. If I remove this class here, you can see that we're removing those base styles from this entire element, including those paragraph styles. Then you can specify more specific class names on individual elements to specify that style further. For example, here we have an H1 or a header one elements with the headline three styling applied to it. So here I've applied this MDC typography headline three class to give it that typographic style. Inside of our class tool, this class palette and dev tools, we can start typing MDC dash typography to sort of get an auto fill for the typographic styles. I talked about this in the previous episode about dev tools. So in here, we can start to play and see what these various typographic styles look like. And this is especially nice if we've set up a theme and we're testing styles on that theme within the page. So if I wanted to do the same thing with paragraphs, I would go here, I would start typing MDC typography and the body one and two would automatically pop up as autocomplete. So I could have a much nicer styling based on the material system using this typographic style and it gives sort of this tracked out style and also a little bit more space inside of that text body there. This allows for separation of logic, which is your data and markup and style. So I can have that headline three style on an H1. So technically it's an H1, which is how screen readers read that, browsers will parse it, but the user will see a headline three style. Same thing with the paragraph, same thing with any other element inside of our page. The second way to incorporate material design typography is by using the module system. So here we have an example on glitch of the material starter kit and inside of the my components file, you can see that I'm applying the headline one style, headline two style, headline three style, et cetera, through mixins. This means that I don't necessarily need to apply classes to every single individual element, but I'm setting the base style for all the H1s, H2s, H3s on this page to be pulling from the MDC typography style. So when we look at the markup here, we simply have an H1 and a paragraph and all of these elements. Without having to adjust classes, but these elements are still getting that style. I could go in here and override this so I can always add a class here to be MDC typography headline three, and that's because I'm still having the option of having these additional classes here. And so if I refresh this, you could see that we're getting the headline three style, even though we have the H1 set. Roboto is a nice default, but we don't want every app to look the same. So let's customize our typeface in sizing. Luckily, there's a massive free resource of typography ready for the web called Google Fonts. So you can access Google Fonts by going to fonts.google.com. And on this website, we have a variety of fonts so you can adjust what you're looking for. You can change what the sentence is. So here we have a sentence that shows you uppercase, lowercase, you get your ascenders and descenders, but if I wanted to write disco is the best pup, then this is the text I'm looking for. If I had a headline, for example, I'd want to be looking for a specific text or a specific phrase. Then I can adjust that and test with that phrase. You could change the size of what that looks like. You can select various categories. So I could look for maybe only sans serif typefaces. And now I'm looking at only sans serif typefaces. You could break this down, look for handwriting typefaces. And you could see a lot of interesting handwriting aesthetics on here. But I'm going to stick to sans serif. You can also set font properties. So you could look for a number of styles if you need a lot of various types of styles. So here I'm setting only typefaces with 13, 15, 17, 18 plus styles. These are really robust typefaces and fonts. You can set the thickness of this font. So that could be something that's really thick and wide or thin. A width is another option here. So you could set these wide typefaces or something that's a little bit more narrow. Slant is another option. So how much you want that to be slanted? So the idea is here, there's a lot of font properties that you can adjust to your needs. So let's roll through here and look at all of our different options. We've got some nice ones. Maybe we want to use, let's say, Firasans. This looks like a nice typeface. Let's use this specimen. So I'm going to click on the plus. This will select the family. And now we can add this to our font. I've copied the font and now I want to use that in a custom theme to see how it propagates in our components. So in order to do that, I can open up the material theme builder. So here I've got that opens up. I'm going to hit create a new theme in the bottom right corner. And it's going to open up this new glitch project where I can then play with the colors, typography, et cetera, in this theme. I'm going to open up the my theme file. And this is around going to replace the robot typeface with my Firasans typeface. I also want to update this within the MDC typography font family. So I'm going to say Firasans is what I want to use here as my typography font family. And then I'm going to open this new window so I can see what that looks like. So here it is a subtle change, but now I have Firasans as the new updated headline. If I wanted to make this something that was completely different, then I can make it a fantasy typeface or something like that. So if we want to go into Google Fonts just to find a very different typeface, let's select display. Let's pick this stencil one. I'm going to add that to the specimen. And when you open this, you can see what the load time looks like for these two typefaces. If that load is heavy, then we can select the specific typeface weights that we need. And then that's going to be what we're sending. But I no longer want to use the first typeface. I only want to use this embedded stencil, Syra stencil one. I'm going to copy and paste this into my theme. And this only has one weight. So we don't have to worry about that specifying that. And I'm going to copy this text here and update this to Syra stencil one. Going to go back to my theme builder and refresh. It's going to take a minute to update that typeface. And here we go. I have this Syra stencil one theme. Legibility here might be a little difficult on smaller sizes. So just be aware of that when you're choosing your typefaces. Now, if I really wanted to adjust these typefaces individually, instead of adjusting all the typefaces and the entire application to use the same typeface, we can use SAS maps for that. So I'm just going to get rid of the rest of the theming in here so you can see very clearly what I'm doing. And I'm pasting in these style overrides. So for all of the button styles here, I'm setting the font size and the text transform to be none. So they're not uppercase anymore. I'm setting headline one styles to be that font family that I want to use instead of making this global. I'm only going to set it on the H1, the H2 and H6. And then I'm adjusting the font size and weights here. Although here the weight doesn't really matter because we only have one weight. So let me remove that just to show you have the option to use weight, but it doesn't really make sense here. So now in this application, when I refresh, you can see in this theme summary on the left-hand corner, I have the H1, the H2 and the H6 using this Cyrus stencil one typeface, H2H4H5 and the body copy using our Roboto typeface as the default. And then the buttons no longer have that text transform uppercase. So you really have a lot of control over these individual styles for your various headlines, captions, the rest of the typography on your page by using SAS maps within your material design theme. Mixing typography can really create a nice separation of hierarchy in your UI. And there are a lot of great resources out there to help with font pairings using the free Google Fonts. One of those is fontpair.co and here are a few of the featured pairings. I love this page because it showcases various Google Fonts in UIs that have been laid out with color, style, et cetera. And you can see how they look really nice, which ones look nice together in terms of weight, style, width, slant, et cetera. So I'd recommend looking these up and playing around with the font pairings yourselves, making those decisions inside of the Google Fonts tool. The tools are out there for you and it's really up to you and your creativity to decide the aesthetic of your application. Now let's talk about a very cool and relatively well-supported new technology sweeping the web font nation, variable fonts. Variable fonts let you compress, express, and finesse your designs. The primary change is that variable fonts let you access all of the variations contained in a given font file via CSS and a single app font-based reference. That means there are a ton of creative and potential performance benefits to using this new font format. Before, in a complex design, a user would have to load every font variation as a separate file, italic, bold, thin, et cetera. That meant either a really heavy page to load or the designer would have to scale back the design to only a few fonts. With variable fonts, the user only has to load one or two Roman and italic font files to be able to use a variety of styles. Note that using a variable font doesn't always guarantee a smaller font load. For example, system fonts will always be speedy and lightweight. We're using only a few font weights, but for complex designs, variable fonts can make a very big difference. Variable fonts are also interoperable, allowing for more customization and expression. You're not limited to font weights of 400, 600, and 800 anymore. Now you can use 325 or 615. And weight is just one potential axis. You can also specify slant and so many more various axes based on that font. Nobileflex is an example of this. This typeface lets you specify various weights and play around with that on this scale slider. The spacing and tracking of the typeface, we can have it really tracked out or really tightly tracked. The height of the typeface, so that's gonna be the ascenders of that typeface, sort of scrunching down to be more closer to the X height on that line. The ascenders here that are going to be extending even further. So if you look at that L, the Fs in this, the B sort of extending even further. The descenders, you can specify how tight or how far away from the baseline you want those to be as well. This diacritic distance, this is gonna be like the top of the eye for example, a mono space. You can have this font become a mono space typeface. Now you only have to have one typeface as your mono space and your regular serif or sans serif. I think that's super cool. And then curvature. The curvature of this text can also be adjusted here. So this is an exciting thing to see. All of these various axes on a single font face. Variable fonts are smart and can even apply their own optical size adjustments. For example, a variable font at a small size can track itself out, make itself a little bit bolder, a little bit easier to read. Here's an example of that from Mandy Michael. I've opened up DevTools so that I could resize the browser here. And as I'm resizing, you can see that this typeface is starting to become a little bit more bold, a little bit easier to read at the smaller typeface here. This first paragraph here is getting incrementally smaller as is the header. So you can see that we have these optical adjustments that can be made for larger browsers and smaller devices too. A larger browser's a thinner typeface might be easier to read. At smaller browsers, that's gonna be hard to read. Google Fonts has a beta API to help you along with using variable fonts today. Here's an example of that beta API. I made a little demo on Glitz to show you what it's like to use this beta API if you wanted to get started with it yourself. So the first thing that we have to do is include this typeface via the Google Fonts CDN. So that's the link here. And now if we want to use all of the weight options in the font variation settings, we would have to have the weight and then at 200, this dot dot specifies values in between 2,900. So here I'm including all of the values from 200 to 900. So we'll be able to interpolate between them and what that look like. Here we have that typeface applied to a header. And so I'm gonna inspect it to show you what it looks like behind the scenes here. We have this font family set of Crimson Pro. And here I have font variation settings of weights, the weight axis at 625. And you can adjust this up and down. If you hit shift and the up and down arrow keys inside of your dev tools is sort of a shortcut to let you adjust these values. So you can see here that I'm adjusting these values from any value. This is at 275 now. It's getting very light all the way up to 900. And it'll be able to interpolate all the values in between and change to any of the weights in between those values. So you can get really specific and finesse just the perfect weight that you want for your application. This is only one simple axis of weights but the possibilities can get really extended. Like Nabatoflex, Decovar is an example of how many options and axes can emerge from one variable font. Here is the website that showcases all of the different styles of Decovar. All of these different options and variations here on the type network. The coolest thing here is you can select various skeletons and these are all axes on which you can transform this type face. You can also set different types of terminals and then also set the amount of sort of expression on those terminals as well. You could have a slab font. You could have these really beautiful curved out serifs and really start to play. You can have so many different types of type faces within one font file. This is why variable fonts are so exciting. You can really have so much control over every little aspect of that type face inside of your application. So it creates this ability and opportunity for expression for finessing and even for some performance benefits when you do have a lot of complex typography on a website. Typography is such an important part of your application's aesthetic, hierarchy, and usability. By pairing type faces nicely together and using a type scale, we can help guide our users and make the content easy to understand. Variable fonts are also really exciting and provide so much more creative freedom and even better performance for end users. I hope that you've enjoyed our show and learned something about using web fonts for today and tomorrow. What are some of your favorite web fonts? Leave a comment below, we'd love to see them. Until next time, say bye.