how to systemize your typography

How to systemize your typography. Now I recently made a video about why you should create a design system and how to get started with building one. So if you're new to this topic then watch that video first because I go into a lot more detail on this topic in that video and you'll get some really important preliminary information on this topic. This video is about how to systemize your typography. Basically how to create a design system for your typography. So for creating a typography design system we can basically break it down into four major things we have font families font sizes letter spacing and line height and in this video we're gonna go through all of them first you need to pick some good font families now there's two possible scenarios here one your client or company could already have some fonts that they've hand-picked for themselves and if this is the case congratulations your work is already done just use those fonts and pretend you made a creative decision the second more likely scenario is that your client or company doesn't have any fonts that they've picked for themselves and it's your job as the designer to pick some fonts for them. So let's discuss how we can do that. Now developing an eye for picking good typefaces can take years especially when there's quite literally hundreds if not thousands of fonts to choose from out there. Most of them existing solely just to hurt you. Now I made another video on font selection and typography and how to choose good fonts. I'll link it somewhere in the description so go watch that as well because I go into a lot more detail in that video and if you're not a typography expert, if you don't know anything about typography and font selection, then that video will teach you everything you need to know to get started picking fonts even if you've never done this before, even if you are a complete beginner in typography and fonts. So if you're interested, check that out as well but to give you a quick actionable summary let's say there are a couple of simple techniques you can use to choose good fonts even if you're not a typography expert first you need to pick a category of fonts and this is just to narrow down your options instead of trying to pick between the hundreds or thousands of fonts out there you can narrow your choices down to just one category and then just pick from there so we have four categories to choose from first serif fonts and these are great for formal professional corporate kind of websites second sans serif fonts and these are great for if you're going for some casual more friendly kind of vibe or even if you just want to remain completely neutral we also have display fonts and these are awesome for headline text absolutely amazing for headline text if you want to make your headlines pop a bit more make them look more designed then display fonts are a great choice but please do not use them for body text they're terrible for body text if you want to use them just use them in large headlines that's it finally we also have monospace fonts and these are very rarely used in practice or at least very sparingly this is mostly just for programmers tech brands and people who have very strong opinions on keyboard layouts maybe like the folks on our slash arch Linux now of course exceptions do exist but in general those are the industries where I see monospace fonts used most often Now think of the industry in which your brand operates think of the vibe that you going for in your design And then just pick a category of fonts that matches that Then you can just go over to Google Fonts or some other font directory filter the fonts by your chosen category, and then just pick one that looks good to you. Now, a couple more tools for choosing a specific font. I recommend choosing fonts with 10 or more styles. Now, styles are just font weights along with their italic variations. so something like regular 500 and regular 500 italic both of these are styles google fonts lets you easily filter fonts by the number of styles that they have so you can just use that it makes this very easy and the reason why i go with fonts with 10 or more styles is that usually and this is not a hard rule obviously exceptions always exist but usually what i've found is that the fonts with more styles are often more well designed because the font designers have just put more attention and care into designing the product. In other words, the more styles a font has, the more likely it was designed by someone who didn't just give up halfway through. And besides, you're going to need different styles like bold, italic, light, and other styles if you want to build a complete proper website. Because if you don't have a style, your browser will try to compensate for it and that does not look good. Trust me, it does not look good. So for example, if you don't load the bold style of your font, your browser will try to compensate for it. And the way it does that is it literally just increases the thickness of each character, just to give off the illusion that it's bolded. But this is usually very different and often worse than the original bold styling of the font as defined by the font's designers. So here I'm showing you an example with the Poppins font. Both of these texts use the Poppins font and both of use the bold 700 font weight. So both of these texts are supposed to be bold. One of them is bold and the other is different let's say. You see the difference between both of these texts? That's why we want to have multiple styles to choose from. Font styles designed by the font's actual creators are going to look a heck of a lot better than any styles just compensated on the fly by our browsers. And also as a quick caveat, if you want to support different languages then make sure that the font you choose supports that as well. Most of you are just going to be using English but if for some reason you want to support a different font as well or a different language as well then you need to make sure that the font you choose supports that as well or pick a separate font for that language. And always add fallbacks in your CSS to use system fonts if your custom fonts can't be loaded for some reason. So that way your users don't have to deal with a broken website. Now here's one final highly professional, highly professional trick that I'll leave you with for picking good fonts. Steal them from your competition. And this one is pretty simple. Just browse a bunch of websites in your industry and see which fonts they use. You can figure out what fonts a website is using just by heading into the browser dev tools or you can also use some browser extensions. There are browser extensions out there that can tell you what fonts a site is using. So look at what fonts people are using in your industry and you'll get a good idea of what kind of fonts you should pick for your own brand What category what styles etc etc You can see what the standard is in your industry and then just pick something similar you don need to copy their exact fonts just enough to get away with it legally no but the point of studying the competition like this is that this way you'll get a clear idea of what kind of fonts to go for how to use them in your brand where to use them in your website and in your design what kind of fonts you should pick what styles you should apply etc etc so it's a very great way to collect that kind of information so that's all i have for picking good fonts but one final guideline that i'll leave you with is that if you're building some internal app that's only going to be used by companies managers and employees and internal team then you probably don't need a custom font at all because look internal apps are not going to be seen by the public at all. They're not going to be seen by our actual customers, by our actual users and custom fonts take time to load and you can instead just use a system font and use that time to speed up the app instead. Now if you're building some marketing material, some landing pages or some other public facing websites then custom fonts make a lot of sense but if you're just building an internal app that's never going to be seen by the public, that's only going to be used by the company's own employees and internal team then i really don't see any value in using a custom font just just use a system font speed up the app and call it a day anyway that is all about font families next we need to discuss font sizes and this is one of those places where an exponential system makes sense we want to have more options at the bottom of the scale like 12 pixels 14 pixels 16 pixels, 18 pixels, but not so much at the top of the scale. Like for instance, we don't need to, we don't want to waste any time arguing between, I don't know, 64 pixels and 66 pixels for some large headline text or something because the difference is so small, right? Now there's no mathematical formula or ratio that you can use to automatically calculate these for you. The best results will come from hand picking these values yourself. Or you can just copy this scale and pretend you handpicked it. This is a good typing scale. It gives you enough options to create great typography but it also doesn't give you so many options that you become paralyzed and you can't make decisions. It doesn't slow down your workflow at all. Now one final important, very important caveat before we finish this section. Don't use M units to define your font scale. M units are relative to the current element's font size which means if you use M units you're just gonna get inconsistent values in your design. So only use pixels or rems and honestly just use rems. Rems are the best when it comes to accessibility and responsiveness and things like that. So my suggestion use rems to define your typing scale. Now we have font families and we have a scale of font sizes. Next we need to discuss letter spacing and line height and this is going to be very short and sweet because I'm not going to give you any values to just blindly copy. I'm I'm going to teach you the rules behind how we can use letter spacing and line height to make your typography look better. And once you understand these rules you can just basically pick the best values for line height and letter spacing for your own specific designs It very simple When it comes to letter spacing you want to have tighter letter spacing in large headlines and it just makes your headlines look a lot better. It's not a huge difference but it is a very noticeable difference. Now when it comes to regular body text you can use the normal letter spacing there or just make it slightly wider depending on what font you're using. And as for line height large headlines don't need a lot of line height so you can keep it pretty short there and as for regular body text you want to have more line height over there just to make it more readable now there's a very simple rule to follow when it comes to line height line height should scale inversely with your text size this means that for larger text you'll use less line height whereas for smaller text you will use longer line height and if your text is very long then you want to use even more line height over there just to make it more readable because too little line height and your readers won't even know where the next line begins from they'll just end up reading the same line twice and that's not a good reading experience at all so for longer lines use more line height and for shorter lines you can use less line height all right now to wrap all that up we've covered everything you need to know to create a design system for your typography you need font families and now you know how to pick them so choose them wisely or just copy smarter people. And again I made a much more detailed video on how to choose good fonts and I'll link it somewhere in the description for you so check that out as well and it will teach you everything you need to know to pick elite fonts. If you know nothing about font selection and typography it will teach you everything you need to know to pick some really amazing fonts. Anyway next you need a consistent scale of font sizes and for that you now have a very functional scale you can use in your designs. It gives you enough options that you can build very creative designs without necessarily limiting you in any way and also not giving you so many options that you overwhelm yourself and just get stuck in analysis paralysis or something. After that you also need line height and letter spacing and these will need to be slightly adjusted based on the specific font that you're using because each font has its own intrinsic letter spacing and line height as well. So these will need to be slightly adjusted based on whatever specific font you're using and that's why instead of giving you some values to just blindly copy I instead just showed you the logic and the reasoning behind how and why we pick certain values for line height and letter spacing and now you can just use this logic to pick the best values for your letter spacing and your line height yourself in other words now you have some simple and sweet rules for your letter spacing and line height that's gonna make your typography look like it was made by someone who knows what kerning is. So that's basically all you need to systemize your typography. But look all of this is just me rambling to a camera. Until you actually put this into action none of it matters. So go out there and implement this. The next design project that you build, create a typography system for it using everything you learned in this video. Impress the designers, confuse the developers and that's how you learn and grow as a designer. Anyway that is all for this one. Like, subscribe. If you want to work with me check out my website link in the description. Thank you for watching and bye bye.