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

Sajid

타이포그래피의 중요성과 UI 디자인에서의 역할

대부분의 UI는 텍스트, 버튼, 아이콘으로 구성되며, 타이포그래피는 디자인의 20%를 차지하지만 결과의 80%를 가져온다.

인기 UI에서 글꼴 스타일을 제거하면 사용자 경험이 저하된다는 것을 보여준다.

타이포그래피가 UI 디자인에 미치는 영향을 보여주는 예시를 제시한다.

제목을 크게, 굵게 만들어 다른 요소와의 계층 구조를 설정한다.

줄 간격(line height)을 이용하여 요소 간의 간격을 조절한다.

시각적 그룹화 및 요소 분리 기법

사람의 뇌가 형태와 패턴을 인식하는 방식을 이해해야 요소를 그룹화하거나 분리할 수 있다.

간격, 크기, 색상을 사용하여 요소를 그룹화하거나 분리하는 방법을 설명한다.

크기, 색상, 간격을 사용하여 요소를 그룹화하거나 분리하는 방법을 강조한다.

근접성의 법칙(law of proximity)을 언급하며, 간격을 사용하여 그룹화 또는 분리하는 방법을 설명한다.

형태를 사용하여 요소를 그룹화할 수 있지만, 이 경우에는 적합하지 않다는 점을 언급한다.

색상을 활용한 강조 및 UI 디자인 기법

크기, 색상, 간격을 이용하여 제목을 다른 요소와 구분한다.

명암 대비를 조절하여 특정 요소를 강조하는 기법을 설명한다.

명도 값을 조정하여 텍스트 가독성을 유지하면서 제목을 강조하는 방법을 보여준다.

명도 값 조절을 통해 중요도에 따라 요소를 강조하거나 덜 강조하는 방법을 설명한다.

HSL 색상 함수(Hue, Saturation, Lightness)와 UI 디자인에서의 활용 방법을 설명한다.

구독 채널 목록 UI를 개선하여 사용자 경험을 향상시키는 방법을 보여준다.

계층 구조를 설정하고 버튼을 강조하여 UI를 개선한다.

크기, 무게, 색상을 조절하여 제목과 사용자 이름을 강조하거나 덜 강조한다.

요소를 카드로 감싸고 버튼 위치를 조정하여 UI를 개선한다.

폰트 크기, 무게 등을 조절하여 UI를 최적화하고 사용자 테스트의 중요성을 강조한다.

폰트 크기 및 타입 스케일 설정

대부분의 앱과 UI 디자인에 필요한 폰트 크기를 제시한다.

무게와 색상을 조합하여 계층 구조를 만들 수 있으므로 많은 폰트 크기가 필요하지 않다고 설명한다.

기본 폰트 크기(14 또는 16픽셀)를 선택하고, 필요에 따라 2픽셀 단위로 조정하는 타입 스케일을 제안한다.

접근성을 고려하여 rem 단위를 사용하고 글꼴 크기를 조정할 수 있도록 한다.

CSS 변수를 사용하여 글꼴 스타일을 설정하는 방법을 간략하게 설명한다.

라이트 모드 전환 및 색상 조정

다크 모드 디자인을 라이트 모드로 전환하는 방법을 설명한다.

흰색, 회색, 검정색을 사용하여 라이트 모드를 구현하고 HSL 색상 값을 사용하여 색상을 조정한다.

L 값을 100에서 빼서 색상을 조정하는 간단한 계산 방법을 제시한다.

다양한 색상을 사용하는 UI에서 라이트 모드로 전환하는 방법을 보여준다.

CSS 변수를 사용하여 색상을 변경하는 방법을 설명하고, 웹사이트에서 색상 생성기를 제공한다고 언급한다.