most of the uis are just text and buttons with some icons to help users take necessary actions so mastering typography is that 20% of the design that gives you the 80% of the results let's start by removing all the font styles from this very popular UI on the left sidebar we broke the selected tab that's definitely bad for user experience we have no idea where we are right now same thing for the buttons on top now coming to the feed itself there is no hierarchy and point of focus so it's tough to tell what we are looking at it's just a bunch of text looking at the original shows the impact of typography in UI design let's try to build it from scratch the most obvious thing is to make the title bigger and a bit Bolder than the rest of the elements did you notice the Gap here it's not Gap margin or padding it's the line height doing its thing but more on that later for now we have a UI that is almost there but we can make it better right now this whole thing looks like one single block of information like we are telling the user hey you better read this as well but we know that the title is connected to the thumbnail and users should look at these two together before moving on to the other elements in short we don't just want the title to stand out we also need it to stand on its own separate from this group to do that we need to understand how the human brain recognizes shapes and patterns what do you see here how can we separate them into two groups we could space them out like this but people might still get confused between one group of six circles or two groups of three circles so let's try size this is also confusing some might see this as three groups instead of the two we intended let's try color it's still not clear enough if it's three or two groups but if we just move the second group of bit down it becomes very clear that it's two groups instead of three you can validate this by showing it to your friends or colleagues now let's retrace our steps before we go back to fonts you are going to need size color and spacing to group or separate elements technically spacing falls under the law of proximity but it's used for the same purpose to group or separate elements speaking of laws you can also use shape to group elements but it doesn't help us in this case how however we do have font weight more on that later for now let's get back to the UI we were designing earlier from what we just observed we already have these three properties to emphasize and separate the title from this group all we need is color but which color white on black is already at the max contrast possible so to emphasize this we need to deemphasize that the easiest way to do that is by tweaking the lightness value and seeing what works best in our case 60% lightness is the sweet spot for keeping the text readable and still emphasizing the title this is a pretty brilliant technique in UI design you know who else is brilliant the sponsor of this video they are exceptional at explaining complex topics in simple ways brilliant offers interactive lessons in math science coding and much more all crafted by an award-winning team of researchers and professionals from Top tier institutions the lessons are filled with interactive problem solving activities that let you play with the concepts a method proven to be six times more effective than watching lecture videos one lesson I really liked is thinking in code it's packed with essential coding elements from loops and variables to nesting and conditionals making it a great starting point for your coding Journey if you're already familiar with the basics you can jump ahead and explore more advanced topics brilliant literally has everything and you can try it all for free for a full 30 days just visit brilliant.org or click the link in the description plus you'll get 20% off an annual premium subscription if we zoom out a bit we'll see this color trick being used everywhere the most important elements have the highest contrast and then to deemphasize other elements they just played with the lightness value but this is a bit different we will come to it later in the video for now you just have to understand the hsl color function and how it's used in UI design it's short for Hue saturation and lightness this is the type of color you want like red green or blue it's measured in degrees on a color wheel starts at zero with red 120 is green and 240 is blue think of it as picking the base color saturation controls the intensity of that base color a saturation of 100% gives you the most intense version of the color and 0% turns it into a shade of gray and finally we use lightness to control the brightness at 50% you get the base color at zero it's black and at 100 it's white so Hue represents color values that range from 0 to 360 saturation is the intensity measured in percentage and lightness is a percentage that controls the brightness to assign a color we use these values inside the hsl function like this for this video all we need is the lightness value after all this video is about font Styles not colors that's exactly what we did here this has a lightness of 100% And this one has 60 using the same concept we can wrap this inside a card and give the card 10 or 20% lightness we can also use color just focus on the light value this color is too bright for the card so let's bring it down to 10% let's apply the base color to this group and see if it works we'll check that in a minute but first we need a lighter color for the title because the base color won't work in this case 90% looks good but the base color is a bit dark for this group so I'm going to bump it up to 70 and see if that does the job I think it will work but let's zoom out and see how looks on a real UI we want to check if the title stands out and if the group is legible ideally you'd test this with real users but you can also show it to friends or colleagues for feedback and by the way this is just using a lighter color to highlight the active tab lighter Shades appear on top making them more important before we move forward with the rest of the video Let's improve this UI using the basic concepts we've learned we have a list of channels the user is Subs subcribed to how can we provide a better user experience firstly there is no hierarchy everything just looks like a blob of text secondly this button needs to stand out let's zoom in some size and weight to emphasize the title then a darker color and smaller size to deemphasize the username a lighter color to highlight the button but the button doesn't look quite right here let's move it to the right and wrap everything inside a card it's looking much better now the button still looks a bit bulky though let's reduce the font size to match the username it looks good but remember we're zoomed in we need to check if it works at the original size the username might be hard to read it could use some weight and so could the button I'll leave it to you to judge the design for now let's shift gears these are all the font sizes you need to design 99% of apps and uis and if you want just these three combined with weight and color are enough to build an entire UI how many font sizes do you see here these all have the same font size of 16 pixels except for this one the impact of weight and color on font size is pretty wild so you don't need many sizes to create hierarchy combining size weight and color can do the trick I'm not saying you should create a typ scale like this but this won't help you much either you'll probably need something more like this yep that's it everything you see is 14 pixels except for the title and the two headings it's the same on this video page everything is 14 pixels except for the title and the channel name for your project just pick a base font size either 14 or 16 pixels regular weight and 100% lightness I'll get to light mode in a minute but let's finish this first once you've picked your base font try designing everything with that size and when you absolutely need to go two pixels up or down from there that's it that's your typ scale to make things easier assign them as Global variables this isn't a CSS video but here's how you can do it first set the font weight then the font size and line height and finally the font family any popular font will work just fine you can get them for free from Google first convert the pixel unit to a rem value we want our apt to follow accessibility guidelines so users should be able to adjust the font size if they need to secondly this m value is very important remember this Gap this is crucial for the title to stand out and stand alone in most cases we don't need to manually add a gap or margin the line height takes care of it automatically acting as the margin bottom for text elements so your Global variables might look something like this and that's it this is all you need to build a top tier UI but keep in mind not all H1 elements will share the same font style code for document hierarchy but style for visual hierarchy you might think this is the obvious solution but it should actually look something like this use your common sense to judge what the user will focus on and emphasize that text once you're happy with the design zoom out and view the entire UI font size is a relative unit meaning it depends on its neighboring elements right now both are competing for attention let's try a bigger font size and see if that works big bold fonts can often be too harsh on the eyes so let's bring the weight down and see if that works it looks good but this is a dynamic number so we need to account for that as well don't just design for visual hierarchy design for functionality too let's now wrap things up by converting this design to light mode it's much easier than you think let's start with these three colors white gray and black as I said earlier all you need is this L value so always use hsl instead of hex or RGB the background is pure black so the light mode will be pure white but if you look at the L value we just did a simple calculation there subtract the L value from 100 and that's all you need to do with these colors too let's do the same thing with this UI which has a lot of colors in it some used for gradient backgrounds and others for text labels and buttons here's what those colors look like on a light background without any modifications and if we subtract the L value from 100 they'll look something like this now all you have to do is switch out the colors with the help of CSS variables I could keep going but remember this video is about font Styles not colors you can check out this color generator on my website this could help you break out of the typical gray color scheme the link will be in the description just below the like And subscribe buttons