Getting started with Variable fonts on the web

variable fonts allow us to do really cool stuff like you can see right here and they also potentially offer us a way to improve our site's performance variable fonts and just fonts on the web in general are a really big topic so we're not going to be doing a nuanced Deep dive into them we're just going to be looking at a general introduction to them and how you can start using them on your own sites so to do that we're going to be looking at what variable fonts even are we're going to look at different places that you can find variable fonts to use in your projects we're going to learn how you can actually figure out what all the different controls for them are because it can change from one font to the next and to do all of that we're going to be looking at how we can actually use one of them inside of a project including the differences you might see between a regular font and the variable font with font face because it's a little bit different so just before we get into the code really fast I want to explore what variable fonts even are and you can see here I have a variable font called Alaska and it actually has three different versions I have a variable version a wofff2 version and an OTF version so this would be the web font that's my variable font and that would be for desktop use so if ever you download fonts and you have multiple different things that's sort of what's going on and we're going to start looking at the web version here which is the typical like standard one that you normally see where you just have uh the different versions of it so you have like I have a contrast and then the hairline contrast a condensed one and this font is one that has a lot of different options so I have condensed ones I have expanded ones I have italics not italics different versions of the italics different weights from light to Black and all of these combine together and that makes for a lot of files as we go down here and it actually makes for 221 separate font files which is in a little bit insane and you wouldn't want to use all of those on the web and if we compare that with this variable font ttf here it is one file it's still a very heavy file we're going to talk more about file weights and stuff like that a little bit later on but you can see here it is coming in at a massive uh over you know one almost one and a half megabytes which is probably too heavy to really use on the web but it has those 221 Styles and more basically all included in that one file so that's pretty cool and it would be later using this than the 221 other ones that were all around 30 to 40 KB but that's sort of the idea of a variable font we want a font that has a whole ton of styles all built into a single file instead of spread out across a ton of different files or separate files now we saw with that that we could have a one file instead of having tons and tons of files but there's more to variable fonts than just that and this is a site access Praxis that is really good at seeing what some of those are and we're going to look at some really quick examples so here and actually this is really nice because you can drag and drop your fonts into it so let's change this over to my Alaska so I can drag that Alaska font in right there and it switched it over so this is using Alaska and you can see that I have different options here and here's all like the fun things you can do with that where I'm not using a whole bunch of different ones but I'm actually going in between a whole bunch of different stuff and we have our italic here and the contrast we'll probably show up if oops if we have more weight so we can see that there's like some changes going on and there's lots of like you know moving around but there's more than just that a lot of traditional fonts are like that but let's say we look at this font right here which is kind of cool it's called Jam regular and here it looks like one of those sort of grimy ones but what's really cool with it is you can actually like here sort of like it's called the bang control it's sort of more bold or less bold which isn't the most exciting but then we can crumble things and you can see the letters are actually like disappearing a little bit right so that's like sort of more faded out old type versus like this was just typed on a crappy keyboard almost so you have these different controls for that the splatter some like a whole bunch of splatter less splatter pieces uh and then there's the punch which fills in like these empty spots so that's pretty cool uh so we're getting more controls out of a font than would typically be something we'd ever see so that's you know I find that really exciting where if we go on this horse right here with this time one where you can actually like animate it to make it look like it's running or we see these with these guys down here as well you yeah we can move them around a little bit and have some fun with them or even like this lizard can look like he's running and there's all these different options that come up with variable fonts and there's some really creative ones you can play around with these I don't know if these biker guys can move uh or not yeah look at that they can pedal around and stuff but you get a lot of different controls some fonts have very limited you might have a weight and an excite which is kind of interesting too but here you get like tons and tons of controls that do all sorts of different things for the font and it's opens up a completely new door to being able to do typography on the web and so they're really cool but how can we actually find some of these to start playing around with so what I've done is I'm starting this simple project here where we're going to explore our variable fonts within each one my class of variable font there I just have a little bit of text it looks nothing fancy on the screen and I've just used grid to place the text in the middle so we haven't really set up anything else other than that so far and then we'll dive in and I'll set this all up with an actual variable font look how we can explore the different pieces of it and break it all down and that raises the question of where can I find a variable font to use on my projects so you can actually get them from a lot of different sources including Google fonts and if you just search variable fonts you'll find some there as well the Google font versions of them there's a few things that I'm not a huge fan of but it is definitely an option one place I like is vfonts.com variable fonts here any website I mentioned will be linked in the description and what I like about this one is you can go to your licenses and you can sort by license so if you don't mind having a paid font you could go by paid ones in this case there's free for non-commercial use or free for commercial use which is really cool and we can click on there and you'll see there's lots of little sliders and stuff we're going to get to those in a minute but for this demo I'm going to be using Kiev type here which is was really nicely created it was a series designed for the kfcd identification and it's completely free to use so we can go over here to behance and this is where the font is hosted and where you can get it from you can see the people that helped create the font or who are responsible for ordering the font and making it free so a big thank you to all of them and on this it gives you all the different examples it's it's a really cool font that we can use and if we scroll all the way down you will find both a link to download the font and if you do want to help support what's going on in Ukraine there is a link to that as well and so right here you can download the cap type it goes to a Google drive folder you can just download it from there and then unzip the file now once you've downloaded the font just unzipped the zip file that you got from there you'll notice that there's a few different options in there we have any icons you have a no variable and a variable so this is like Alaska it's very common if you download a variable font you get both a non-variable and variable version of it just so you know and in this case they've also included some icons and just if we do look in here there's the web the ttf and the OTF so for web we can see here I'm just going to look at this really fast because file weights are important when it comes to fonts on the web and you just primarily actually want to focus on the wo ff2 and the reason we only really want to focus on the wofff2 is browser support for that it's pretty amazing these days um if you really wanted to you could look at and compare it to the woff as well but the file sizes are very very similar between them and you're looking at every font in this case coming in let's say 35 to you know some of them are over 40. so in that range 35 to 40 KB each now if I jump back over and I go look at the variable gx1 that we have here you'll see there's three different ones one's for the saws ones for the serif and one is for the tilting here and they range in weight by quite a bit we have 361 for this one 189 and 210 and you'll also notice that they're true type fonts and by being true type that means they are quite a lot heavier and in this case I want to set up using the Sans and the Sans font weight you can see this is 361 and that's basically the same as using is it less than 10 so maybe eight font files of the other one which seems a little bit excessive and this is the the first thing with variable fonts you do have to make that trade-off of am I going to be using enough of like the different variations of it to make it worthwhile if you're just using a regular and a bold and maybe an italic it might not even be worth getting into the world of variable fonts but if you need to have the controls that we're going to be looking at here then it becomes very very important and one of the issues here too is because these are ttf files and from my experience most variable fonts that I've downloaded are coming as ttf and not as wofff2 which has much better compression and there are online conversion tools that can convert fonts for you from one to the other you do have to be careful with them though because many of them will actually strip away all of the powers of a variable font from it which is not a good thing though there are some solutions out there though there are a few that we can use and I'm going to be looking at one in this video and there's also some command line tools I'll link to some stuff in the description talking about those where you can set up and make the pro you know you can sort of do a lot of control over what's going on through those but there a lot more complicated to set up so we're just going to look at the simplest solution in this video so the site that I have found that does allow us to convert ttf to wof2 is one here it's called everything fonts.com that has the converter for it once again will be linked in the description and basically with it all you need to do is pick your font file and so here I can grab and choose the size that I want click open and then we can just click convert once again it's going to download a zip file and you can just unzip your file and keep on going from there now here's my on zip file and now we're coming into something that's a little bit better we have 126 kilobytes which is a pretty reasonable size again we're looking before at 35 to 40. so we're in the range of like four font files and that's typically where you find that sort of trade-off happens if you need three or less it'd be less heavy at least to be using the traditional font files but once you get to like four or five different weights and and styles that you might be using then the variable font can be better plus there's less Network requests too because we only have one thing to download now what I'm going to do is in vs code I'm using Veet so just follow whatever structure you need for your own project but I need to put it in my public here I'm just going to make a new folder called fonts and then I can just bring in that into my fonts folder one thing always with these they always give them kind of weird names so uh or you know sometimes the font names are a little bit long so I'm just going to shorten that a little bit so it's a little bit easier to work with and now I can start using this within my project so what do we want to do is first we need a font face declaration so what I've done here is set it up and you'll notice maybe one thing that's a little different than what you might normally have seen is the font weight and I'll talk about this in a second and where those numbers are coming from but otherwise it's a pretty regular font Place declaration now if you look online you might find a couple of different things about the format so one of them would be a format with variations here which is telling the browser that it's actually a variable font and we could leave that like this and it would work perfectly fine the problem with variations is actually been deprecated the new one is to leave this off and to come over here and it's Tech and then in the tech we would write very variations like that the problem with this is this is what the new standard is but it's not actually supported yet as far as I can tell and if you put this in here it will invalidate the entire font face declaration so for now I'd recommend you could even leave it like this and I think it would be safe but from all the testing I've done this is still working even though it's been deprecated browsers should continue to support it so we can leave it like that for the moment and then as far as these font weights and figuring out where this comes from there's different tools that we can use access Praxis that we saw earlier is one of them but another tool that we can use is this one right here which is uh wakame fondue where you can pick your font file and in this case I'm just going to use my saws ttf it's going to be the same thing if you have your wofff2 that you've converted you upload it and it's going to give you all the information for that font and if you scroll down a little bit further further to this testing area you're going to get a few extras here so I'm just going to increase the font size if we come here now we can see we have a weight a contrast and a midline axis that we can play with and so my weight is a standard one of the standard axes and there's a few different ones we'll talk about those in a second but you can see if I play with my weight it goes up and down and it goes from a scale of zero to a thousand and different variable fonts will have different scales for weight for italics for the custom ones and even like you can see here we have a midline scale that actually goes from negative a thousand to zero so you unless your font comes with documentation which I do not find is very often you need to use one of these tools to find these because in this case we have three if I was using Alaska we'd have other ones that would be different from this if I was using another variable font it might only be weight there's lots of different things they can come in and every font is unique so you need to find a way to find out what axes are available to you now as I mentioned weight is one of the standard axes we also have italic we have slant we have width and we have Optical size those are all the standard ones and for the most part they're either they are mapped or are meant to eventually be mapped to regular CSS properties and so for weight we can actually see that and that means that here I can write the range that I want to be available from that if I put 500 here I believe we'd be capping it at 500 but in this case my font weights go from actually I said 100 but the weight goes all the way down to zero so we don't want to cap anything we want to say we have from zero to a thousand and what that means now is when I'm using those fonts let's go and set this up with the demo that we have here and I'm just going to scroll down because I added that class of variable fonts so variable font if you remember I had that over here so just so we can sort of separate the two and just focus on the variable font stuff here so here we can do font family and I'm just going to use the font family key of size like I put right there we can see it's coming in and then we can play with different font weights and so I could do a font weight of one and you can see it's actually there and we can go up to 500 and I can go all the way up to 1000 and we have all of those available to us I've just made the font a little bit bigger to make it easier to see what we're doing and play around with uh but yeah font weight is one of those ones we can just do it as a regular property because it's one of the standard axes and we can map out the different options for it up here and the standard axis so that we can always do that where we can map the availabilities when we declare within our font face declaration where things get a little bit more interesting is when we get into the custom axes and how do we even know if something's a custom axes or not well there's the ones that I mentioned those are the standard ones but you can also tell just by looking at the name of it where weight gets a wght and it's all lower case contrast is Con T uppercase and midline is uppercase if it's uppercase it's a custom axes if it's lowercase it's a standard one so that can help you a little bit too because the ones that are custom axes we have no CSS property that can actually control that like font weight we have to do something using we have to do it all actually with our font variation settings and there's a little bit of a downside to font variation settings but it's not too bad but we'll see what it is and how we can get around it as we go through this and so to be able to use that inside of parentheses I'm going to put c-o-n-t and then I can write in the number that I want here and you can see that has changed what this is looking like completely where I've added contrast to it and I can bring this down to a 50 and have a little bit which would technically be more than the zero even though it's probably hard to tell at that point but you can sort of come in with these varying levels of it and just like my font weight here I have every number from like basically from one up to a thousand including like 337 if I wanted that for my font weight so we're not limited to the numbers like you would get in a traditional font family we're really opening up to anything within that range now in this case I am doing my contrast but you might want to have your contrast and the other one I had was my midline and so that's an midl and then I can put the number and I just have to remember the range on this one was from negative a thousand all the way up to zero so I can do that you can see it sort of changes the the in between sections on the letters and and plays around with it a little bit so I put that back to zero or I can go back to negative a thousand and it's where we get that fun sort of effect that we can play around with a little bit here if we wanted to I could also declare my font weight without doing it here I could include that here with the w g h t and then put my a thousand there and that would also work work personally if it's something that can be declared with just a regular font weight I find that a little bit easier to do so whether you do it here or as just a regular font weight like we had before is really up to you I tend to like just having font weight as font weight because it's a property people are generally familiar with and I'm more familiar with so it's just you get used to using that and just so you know if we had both so wght and I put 100 here just so we have a different number you'll see that this one is winning and it's not winning because the order because even if I come down here and I set the font weight afterward this is still going to take over so the font variation setting is more important in a sense than the font weight is so it's really up to you and how you want to work with it and what you find easier and yeah there we go that's how we can set all of those up and of course I mentioned that there's one annoying thing with these is just having to declare it because if I wanted to change something here you're sort of you know you have these different things all set on here so if you're relying on inheritance or something like that and you want to change one of them you actually have to redeclare all three and let's let's look at setting this up a bit on my body just as an example uh so if I go on my body and we just say uh let's put the Kiev songs all the way up here as well so we're declaring all of that there so we can see they're coming through everything's being inherited from here but maybe on this one I actually want my midline to be zero for the regular body stuff so that's all being inherited into my variable font H1 over here and when I want to use that I might not want to change this I might want to only change the midline so let's say we change this one over to that negative a thousand the problem here is this contrast isn't actually coming through anymore so if I did a contrast of a thousand here or we did eight or you know what this would be more obvious if I do this one at negative a thousand and then I bring this one down to zero we should have a high contrast on here and to bring that one in because this one really stands out you can see this is what it should be looking like but if I don't include both of them it's treated like that one isn't actually set anywhere and it goes back to the default uh right because there's just we're redeclaring that entire property so that can be a little bit annoying and to experiment and play with this a little bit what we're going to do is move over and look at how we can animate these as well because that's another fun thing that does open up doors and there's something as fun as the animations are there's a bit of a gotcha with them as well uh not in gotcha but just something to be careful with so here why don't we put our font weight down to the one which is the smallest it can get to and we're also going to here have our midline at zero and our content zero just as sort of a default starting point and then here what I can say is on my font weight I want this one to go up to the font wait to increase up to a thousand and then here are my font variation settings I'm going to change the midl to be negative 1000 so we can see we get a little animation going on when we hover on top or not animation it's jumping we want it to be animated so just like anything else we can do a transition of my font variation settings and we can just choose a time and now we're actually animating between them on one of the axes but we're not doing the font weight so this is a time where maybe you want to bring the weight down or of course we could do and transition both it's up to you so we'll just do font weight at 500 milliseconds here as well and then we'll get both of them animating and while that's working with the font weight being here we're just gonna I think it's a little bit more concise if we actually take it off and set these all up here uh just just sort of highlight how we can work here so I'm going to do the font weight of one here and so we can put our weight a thousand there we get the same result with only a single transition and the advantage with that and working this way is if you are going to be playing around with these numbers a lot because then we can set them up all as custom properties so here what I've done is I've put these all to custom properties with the values we had and then I've just redeclared it down here using the custom properties the advantage of doing this is we can don't have to retype everything out like we were doing here all we need to do is choose the one that we want to change so maybe you only want to change your wait so my font weight becomes a 1000 and then in this case it's going to be animated but even if you weren't animating it you could just come and redeclare in you know my headings are using this variable font and then my you know paragraphs are using this this other weight and things like that so this is not just for animations but it could be something you use and then we could also say that my midline so we just come in with font midline and in this case my negative a thousand and then we get that sort of same animation that we had going on just before and we're not worried about redeclaring this or skipping out on and having to repeat ones that we were repeating before we just have to use the custom property along the way and set things up and get them all working and you can play around with that and have some fun with it and I'll do all sorts of creative things or of course just use it to increase the performance on your site and if you're looking at variable fonts as an option on helping with the responsiveness of your site sadly I mean they're really useful but making typography responsive can also be its own struggle and whether it's variable fonts or regular fonts and if you're interested in simple ways to make typography more responsive you can check out this video right here and with that I'd like to thank my enablers of awesome Jan Johnny Michael Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your point of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 38,108

Keywords: Kevin Powell, css, front-end, frontend, html, web development, variable fonts, variable fonts on the web, variable fonts css, variable font animation, variable font tutorial

Id: 0fVymQ7SZw0

Length: 21min 44sec (1304 seconds)

Published: Thu Mar 02 2023