Most 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 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 a 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 coloring it. It's still not clear enough if it's three or two groups, but if we just

move the second group of bits 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. 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

de-emphasize 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 de-emphasize 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; it 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 it 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 subscribed 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 de-emphasize 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.

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 type 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 type 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 app to follow accessibility

guidelines, so users should be able to adjust the font size if they need to. Secondly, this rem 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

The 80% of UI Design - Typography

The 80% of UI Design - Typography

Scripts