Logovideo to article
00:00 - 00:04

most of the uis are just text and

00:02 - 00:07

buttons with some icons to help users

00:04 - 00:10

take necessary actions so mastering

00:07 - 00:12

typography is that 20% of the design

00:10 - 00:15

that gives you the 80% of the

00:12 - 00:18

results let's start by removing all the

00:15 - 00:20

font styles from this very popular UI on

00:18 - 00:23

the left sidebar we broke the selected

00:20 - 00:25

tab that's definitely bad for user

00:23 - 00:28

experience we have no idea where we are

00:25 - 00:31

right now same thing for the buttons on

00:28 - 00:34

top now coming to the feed itself there

00:31 - 00:35

is no hierarchy and point of focus so

00:34 - 00:39

it's tough to tell what we are looking

00:35 - 00:41

at it's just a bunch of text looking at

00:39 - 00:43

the original shows the impact of

00:41 - 00:46

typography in UI design let's try to

00:43 - 00:48

build it from scratch the most obvious

00:46 - 00:50

thing is to make the title bigger and a

00:48 - 00:53

bit Bolder than the rest of the elements

00:50 - 00:55

did you notice the Gap here it's not Gap

00:53 - 00:58

margin or padding it's the line height

00:55 - 01:00

doing its thing but more on that later

00:58 - 01:02

for now we have a UI that is almost

01:00 - 01:04

there but we can make it better right

01:02 - 01:07

now this whole thing looks like one

01:04 - 01:09

single block of information like we are

01:07 - 01:12

telling the user hey you better read

01:09 - 01:14

this as well but we know that the title

01:12 - 01:16

is connected to the thumbnail and users

01:14 - 01:18

should look at these two together before

01:16 - 01:20

moving on to the other elements in short

01:18 - 01:23

we don't just want the title to stand

01:20 - 01:26

out we also need it to stand on its own

01:23 - 01:28

separate from this group to do that we

01:26 - 01:31

need to understand how the human brain

01:28 - 01:34

recognizes shapes and patterns what do

01:31 - 01:37

you see here how can we separate them

01:34 - 01:39

into two groups we could space them out

01:37 - 01:41

like this but people might still get

01:39 - 01:44

confused between one group of six

01:41 - 01:45

circles or two groups of three circles

01:44 - 01:49

so let's try

01:45 - 01:50

size this is also confusing some might

01:49 - 01:51

see this as three groups instead of the

01:50 - 01:54

two we

01:51 - 01:56

intended let's try

01:54 - 01:58

color it's still not clear enough if

01:56 - 02:00

it's three or two groups but if we just

01:58 - 02:02

move the second group of bit down it

02:00 - 02:05

becomes very clear that it's two groups

02:02 - 02:07

instead of three you can validate this

02:05 - 02:09

by showing it to your friends or

02:07 - 02:12

colleagues now let's retrace our steps

02:09 - 02:14

before we go back to fonts you are going

02:12 - 02:17

to need size color and spacing to group

02:14 - 02:19

or separate elements technically spacing

02:17 - 02:22

falls under the law of proximity but

02:19 - 02:25

it's used for the same purpose to group

02:22 - 02:27

or separate elements speaking of laws

02:25 - 02:30

you can also use shape to group elements

02:27 - 02:32

but it doesn't help us in this case how

02:30 - 02:35

however we do have font weight more on

02:32 - 02:38

that later for now let's get back to the

02:35 - 02:40

UI we were designing earlier from what

02:38 - 02:41

we just observed we already have these

02:40 - 02:44

three properties to emphasize and

02:41 - 02:47

separate the title from this group all

02:44 - 02:49

we need is color but which color white

02:47 - 02:53

on black is already at the max contrast

02:49 - 02:56

possible so to emphasize this we need to

02:53 - 02:58

deemphasize that the easiest way to do

02:56 - 03:00

that is by tweaking the lightness value

02:58 - 03:03

and seeing what works best

03:00 - 03:05

in our case 60% lightness is the sweet

03:03 - 03:08

spot for keeping the text readable and

03:05 - 03:11

still emphasizing the title this is a

03:08 - 03:13

pretty brilliant technique in UI design

03:11 - 03:15

you know who else is brilliant the

03:13 - 03:17

sponsor of this video they are

03:15 - 03:19

exceptional at explaining complex topics

03:17 - 03:22

in simple ways brilliant offers

03:19 - 03:25

interactive lessons in math science

03:22 - 03:27

coding and much more all crafted by an

03:25 - 03:30

award-winning team of researchers and

03:27 - 03:32

professionals from Top tier institutions

03:30 - 03:33

the lessons are filled with interactive

03:32 - 03:36

problem solving activities that let you

03:33 - 03:38

play with the concepts a method proven

03:36 - 03:41

to be six times more effective than

03:38 - 03:43

watching lecture videos one lesson I

03:41 - 03:45

really liked is thinking in code it's

03:43 - 03:47

packed with essential coding elements

03:45 - 03:50

from loops and variables to nesting and

03:47 - 03:52

conditionals making it a great starting

03:50 - 03:54

point for your coding Journey if you're

03:52 - 03:57

already familiar with the basics you can

03:54 - 03:59

jump ahead and explore more advanced

03:57 - 04:01

topics brilliant literally has

03:59 - 04:04

everything and you can try it all for

04:01 - 04:05

free for a full 30 days just visit

04:04 - 04:09

brilliant.org

04:05 - 04:11

or click the link in the description

04:09 - 04:13

plus you'll get 20% off an annual

04:11 - 04:13

premium

04:14 - 04:19

subscription if we zoom out a bit we'll

04:17 - 04:21

see this color trick being used

04:19 - 04:23

everywhere the most important elements

04:21 - 04:25

have the highest contrast and then to

04:23 - 04:28

deemphasize other elements they just

04:25 - 04:30

played with the lightness value but this

04:28 - 04:33

is a bit different we will come to it

04:30 - 04:36

later in the video for now you just have

04:33 - 04:39

to understand the hsl color function and

04:36 - 04:42

how it's used in UI design it's short

04:39 - 04:44

for Hue saturation and lightness this is

04:42 - 04:47

the type of color you want like red

04:44 - 04:50

green or blue it's measured in degrees

04:47 - 04:54

on a color wheel starts at zero with red

04:50 - 04:57

120 is green and 240 is blue think of it

04:54 - 04:59

as picking the base color saturation

04:57 - 05:03

controls the intensity of that base

04:59 - 05:06

color a saturation of 100% gives you the

05:03 - 05:08

most intense version of the color and 0%

05:06 - 05:10

turns it into a shade of gray and

05:08 - 05:14

finally we use lightness to control the

05:10 - 05:18

brightness at 50% you get the base color

05:14 - 05:20

at zero it's black and at 100 it's white

05:18 - 05:23

so Hue represents color values that

05:20 - 05:26

range from 0 to 360 saturation is the

05:23 - 05:28

intensity measured in percentage and

05:26 - 05:30

lightness is a percentage that controls

05:28 - 05:32

the brightness

05:30 - 05:35

to assign a color we use these values

05:32 - 05:37

inside the hsl function like this for

05:35 - 05:40

this video all we need is the lightness

05:37 - 05:42

value after all this video is about font

05:40 - 05:45

Styles not

05:42 - 05:47

colors that's exactly what we did here

05:45 - 05:51

this has a lightness of 100% And this

05:47 - 05:53

one has 60 using the same concept we can

05:51 - 05:57

wrap this inside a card and give the

05:53 - 06:01

card 10 or 20% lightness we can also use

05:57 - 06:03

color just focus on the light value this

06:01 - 06:04

color is too bright for the card so

06:03 - 06:07

let's bring it down to

06:04 - 06:10

10% let's apply the base color to this

06:07 - 06:12

group and see if it works we'll check

06:10 - 06:14

that in a minute but first we need a

06:12 - 06:18

lighter color for the title because the

06:14 - 06:20

base color won't work in this case 90%

06:18 - 06:23

looks good but the base color is a bit

06:20 - 06:26

dark for this group so I'm going to bump

06:23 - 06:29

it up to 70 and see if that does the job

06:26 - 06:31

I think it will work but let's zoom out

06:29 - 06:33

and see how looks on a real UI we want

06:31 - 06:36

to check if the title stands out and if

06:33 - 06:38

the group is legible ideally you'd test

06:36 - 06:41

this with real users but you can also

06:38 - 06:43

show it to friends or colleagues for

06:41 - 06:45

feedback and by the way this is just

06:43 - 06:48

using a lighter color to highlight the

06:45 - 06:51

active tab lighter Shades appear on top

06:48 - 06:53

making them more important before we

06:51 - 06:55

move forward with the rest of the video

06:53 - 06:58

Let's improve this UI using the basic

06:55 - 07:00

concepts we've learned we have a list of

06:58 - 07:03

channels the user is Subs subcribed to

07:00 - 07:06

how can we provide a better user

07:03 - 07:08

experience firstly there is no hierarchy

07:06 - 07:11

everything just looks like a blob of

07:08 - 07:15

text secondly this button needs to stand

07:11 - 07:17

out let's zoom in some size and weight

07:15 - 07:19

to emphasize the title then a darker

07:17 - 07:22

color and smaller size to deemphasize

07:19 - 07:23

the username a lighter color to

07:22 - 07:26

highlight the button but the button

07:23 - 07:28

doesn't look quite right here let's move

07:26 - 07:31

it to the right and wrap everything

07:28 - 07:33

inside a card it's looking much better

07:31 - 07:35

now the button still looks a bit bulky

07:33 - 07:39

though let's reduce the font size to

07:35 - 07:41

match the username it looks good but

07:39 - 07:44

remember we're zoomed in we need to

07:41 - 07:46

check if it works at the original size

07:44 - 07:49

the username might be hard to read it

07:46 - 07:51

could use some weight and so could the

07:49 - 07:55

button I'll leave it to you to judge the

07:51 - 07:57

design for now let's shift

07:55 - 08:01

gears these are all the font sizes you

07:57 - 08:03

need to design 99% of apps and uis and

08:01 - 08:05

if you want just these three combined

08:03 - 08:08

with weight and color are enough to

08:05 - 08:11

build an entire UI how many font sizes

08:08 - 08:11

do you see

08:12 - 08:18

here these all have the same font size

08:15 - 08:20

of 16 pixels except for this one the

08:18 - 08:23

impact of weight and color on font size

08:20 - 08:26

is pretty wild so you don't need many

08:23 - 08:29

sizes to create hierarchy combining size

08:26 - 08:31

weight and color can do the trick I'm

08:29 - 08:33

not saying you should create a typ scale

08:31 - 08:35

like this but this won't help you much

08:33 - 08:38

either you'll probably need something

08:35 - 08:41

more like this yep that's it everything

08:38 - 08:43

you see is 14 pixels except for the

08:41 - 08:46

title and the two headings it's the same

08:43 - 08:48

on this video page everything is 14

08:46 - 08:51

pixels except for the title and the

08:48 - 08:55

channel name for your project just pick

08:51 - 08:58

a base font size either 14 or 16 pixels

08:55 - 09:00

regular weight and 100% lightness I'll

08:58 - 09:03

get to light mode in a minute but let's

09:00 - 09:05

finish this first once you've picked

09:03 - 09:07

your base font try designing everything

09:05 - 09:10

with that size and when you absolutely

09:07 - 09:14

need to go two pixels up or down from

09:10 - 09:16

there that's it that's your typ scale to

09:14 - 09:19

make things easier assign them as Global

09:16 - 09:22

variables this isn't a CSS video but

09:19 - 09:24

here's how you can do it first set the

09:22 - 09:28

font weight then the font size and line

09:24 - 09:31

height and finally the font family any

09:28 - 09:34

popular font will work just fine you can

09:31 - 09:36

get them for free from Google first

09:34 - 09:38

convert the pixel unit to a rem value we

09:36 - 09:41

want our apt to follow accessibility

09:38 - 09:43

guidelines so users should be able to

09:41 - 09:46

adjust the font size if they need to

09:43 - 09:49

secondly this m value is very

09:46 - 09:51

important remember this Gap this is

09:49 - 09:54

crucial for the title to stand out and

09:51 - 09:57

stand alone in most cases we don't need

09:54 - 09:59

to manually add a gap or margin the line

09:57 - 10:01

height takes care of it automatically

09:59 - 10:04

acting as the margin bottom for text

10:01 - 10:07

elements so your Global variables might

10:04 - 10:10

look something like this and that's it

10:07 - 10:13

this is all you need to build a top tier

10:10 - 10:16

UI but keep in mind not all H1 elements

10:13 - 10:20

will share the same font style code for

10:16 - 10:22

document hierarchy but style for visual

10:20 - 10:23

hierarchy you might think this is the

10:22 - 10:25

obvious

10:23 - 10:27

solution but it should actually look

10:25 - 10:30

something like

10:27 - 10:32

this use your common sense to judge what

10:30 - 10:33

the user will focus on and emphasize

10:32 - 10:36

that

10:33 - 10:39

text once you're happy with the design

10:36 - 10:41

zoom out and view the entire UI font

10:39 - 10:43

size is a relative unit meaning it

10:41 - 10:45

depends on its neighboring elements

10:43 - 10:48

right now both are competing for

10:45 - 10:49

attention let's try a bigger font size

10:48 - 10:52

and see if that

10:49 - 10:54

works big bold fonts can often be too

10:52 - 10:57

harsh on the eyes so let's bring the

10:54 - 11:00

weight down and see if that works it

10:57 - 11:03

looks good but this is a dynamic number

11:00 - 11:05

so we need to account for that as well

11:03 - 11:07

don't just design for visual hierarchy

11:05 - 11:09

design for functionality

11:07 - 11:12

too let's now wrap things up by

11:09 - 11:15

converting this design to light mode

11:12 - 11:17

it's much easier than you think let's

11:15 - 11:20

start with these three colors white gray

11:17 - 11:23

and black as I said earlier all you need

11:20 - 11:25

is this L value so always use hsl

11:23 - 11:28

instead of hex or

11:25 - 11:30

RGB the background is pure black so the

11:28 - 11:33

light mode will be pure white but if you

11:30 - 11:35

look at the L value we just did a simple

11:33 - 11:38

calculation there subtract the L value

11:35 - 11:39

from 100 and that's all you need to do

11:38 - 11:42

with these colors

11:39 - 11:45

too let's do the same thing with this UI

11:42 - 11:47

which has a lot of colors in it some

11:45 - 11:49

used for gradient backgrounds and others

11:47 - 11:51

for text labels and

11:49 - 11:54

buttons here's what those colors look

11:51 - 11:56

like on a light background without any

11:54 - 11:58

modifications and if we subtract the L

11:56 - 12:01

value from 100 they'll look something

11:58 - 12:03

like this now all you have to do is

12:01 - 12:04

switch out the colors with the help of

12:03 - 12:07

CSS

12:04 - 12:09

variables I could keep going but

12:07 - 12:12

remember this video is about font Styles

12:09 - 12:15

not colors you can check out this color

12:12 - 12:17

generator on my website this could help

12:15 - 12:19

you break out of the typical gray color

12:17 - 12:21

scheme the link will be in the

12:19 - 12:24

description just below the like And

12:21 - 12:24

subscribe buttons

The Impact of Typography in UI Design

In the realm of UI design, mastering typography is the key to unlocking successful results. Typography, often overlooked, contributes significantly to user experience, with 20% of the design effort yielding 80% of the results. Let's delve into how tweaking font styles can remarkably enhance the visual hierarchy within a user interface.

Imagine encountering a cluttered UI with indistinguishable elements, creating a disorientating user experience. By strategically employing typography, we can transform this chaotic interface into an organized, visually appealing layout that guides users seamlessly through the content.

Unraveling the Visual Hierarchy

Let's dissect an example of a UI fraught with design flaws. The absence of clear typography leads to a lack of hierarchy and focal point, leaving users adrift in a sea of undifferentiated text. To address this, we start by amplifying the title's prominence through larger and bolder typography, establishing it as a focal point.

Creating Distinction with Font Styles

Understanding how humans perceive shapes and patterns is paramount in separating elements effectively. By applying techniques such as size, color, and spacing, we can categorize elements into distinct groups. Experimenting with various visual cues like color gradients and font weights helps in delineating information clusters within the UI.

Crafting a Cohesive UI Experience

Utilizing a few select font sizes, along with judicious use of weight and color variations, can build an entire UI structure with a harmonious visual hierarchy. By setting global typography variables and maintaining consistency, we ensure a cohesive user experience across the interface.

Evolving into Light Mode

Transitioning to light mode involves subtle adjustments in color contrasts, achieved by manipulating lightness values in the HSL color model. By applying the same principles of visual hierarchy and font styles in light mode, we maintain readability and coherence in design choices.

As we navigate the intricate landscape of UI design, font styles serve as the cornerstone of creating engaging and intuitive interfaces. By mastering the art of typography, designers can sculpt immersive user experiences that resonate with clarity and elegance.

Remember, in the realm of UI design, every font type, size, and color choice plays a crucial role in shaping the user's journey through the interface. Let's continue to refine our typographic skills and unlock the full potential of design in every pixel we perfect.

Note: This article prioritizes the significance of font styles in UI design while offering insights into leveraging typography for enhancing user experience.