Typography is huge for web design. And learning how to set type properly is going to make you a superior 1
web designer. 2
In this video, we are going to do a little fun exercise, on setting type. Which basically means, simply 3
said, it's choosing the right font size, right line-heights, weights for the font, and letter spacing. 4
That's all. 5
It's just combining all these 4 different elements to make something look deliberate. 6
As usual, you'll find this Figma file under the resources. Either on the page, that I have linked or 7
under the resources of this video. And in this Figma file 8
I have arranged 5 blocks of text. 9
Each one has a headline and a paragraph. 10
Each of these blocks are set up in a different typefaces: the same typeface for the headline and the 11
paragraph pair. 12
The name of the typeface is right here on the corner. 13
Don't worry about the content it's a dummy text that I've generated randomly. 14
I want you to go through each of these blocks and improve the typesetting for each pair. 15
Your goal is to achieve two things: 1. First good text readability. It's gona be achieved by mainly adjusting 16
font sizes and line heights. All the text blocks are set in their default line heights. For some of these 17
fonts, their default line height might have pretty good readability, like Crimson text here. But for others 18
it might be a little too tight. 19
There are no specific rules for a line heights, just measure it based on your eye. And increase it up and 20
down. And see what feels the most pleasant to you, 21
when you read it. The same goes for the font size, 22
they are all set in 16 pixels. But as you can see, 16 pixel is quite different from one to another. 23
For example 16 on Crimson text is way too small. 24
2. And second, your goal is to achieve good hierarchy between headline and the paragraph. 25
Remember our lesson about hierarchy, right? 26
The visual hierarchy makes design easier to follow and more pleasing to an eye. 27
You can achieve this hierarchy between the headline and text by making the headline very large, or very 28
heavy or both. 29
To achieve both of these goals, you are allowed to adjust: 1. The font size. 30
2. Second, the font weights. 3. And the line heights. No need to worry about the letter spacing. 31
Just keep them as they are. 32
Also don't change the typeface or the color. 33
Keep it as they are. 34
You're free to adjust the position of each text box. 35
In fact, you will most likely need to adjust it. Because as you start setting your type things will have 36
to be moved around accordingly. 37
But I want you to keep the width of each text box as it is. 38
They're all 500 pixels wide right now. 39
I want you to work within those constraints and set your type in a best way, within those dimensions. 40
The height of the box will adjust automatically. 41
Let me demonstrate the first one. 42
First, make sure that you have zoomed your canvas to 100%. Otherwise, you won't see the realistic 43
size. 44
There are many different ways to zoom in and out in Figma. Two most common ways is either pinching your 45
mouse pad on laptop. 46
This will probably work only on newer laptops that has the support of multi-touch and pinching 47
action. Or another way, which is with your mouse wheel and while holding control (or a command on Mac). And 48
with your mouse wheel, just go scroll up and down. And while you hold on control or command, then it's going 49
to zoom in or out. Or my favourite way, which is just to hit the shortcut Shift+0 and that's going 50
to instantly zoom into 100%. 51
You can see this shortcut, if you go to this view options. And then under the dropdown, you can see that 52
zoom to 100% 53
has this shortcut of Shift+0. Most of your design work should be done in this normal state. 54
Otherwise, you won't be seeing the realistic picture of sizes and proportion. 55
However it is ok to zoom in and out when you need to. 56
For some reason. 57
Okay, so once we've made sure we're working in the normal zoom state, first I will adjust the headline. 58
I want it to be thin. Underneath the font name, you can select the font weight. As I previously mentioned, 59
available options here depend on the font family itself, and if you have installed all the available 60
styles on your computer, or if it came with Figma. So I select thin. Now to achieve a good visual hierarchy 61
between the headline and the paragraph, I should increase the headline size. And since I went with a thin 62
headline, I should make it even bigger than what I would do for a heavier text style. 63
I am pressing up an arrow key, which increases the font size by 1 pixel. As I'm enlarging my text 64
I am also paying attention to where my text breaks. 65
Since the width of my text box is fixed, I can break the text only based on its size or weight. 66
The breaking of the text is important because you don't want the text to break on an odd place. Like for 67
example at an article "A" 68
and the word jumping on the second line. That doesn't make a good readability. 69
In this sentence, the best line break is when "A Telescope" is on the second line, or when "Buying A Telescope" 70
is on the second line. 71
I even prefer the second version, because there is a logic break in the sentence. 72
The basics of... What? Buying a telescope. 73
Okay. 74
I quite like how the headline looks. 75
Now I'm going to adjust the paragraph text. In most cases, 76
I wouldn't touch the paragraph weight and keep in regular. Regular is usually the best option for a paragraph text. 77
But because I have made the headline quite skinny, the paragraph feels heavy in a comparison and 78
is stealing a lot of attention from the headline. Remembering visual hierarchy, 79
we clearly define, what should be the most noticeable element, then 2nd most noticeable and so on. 80
Now, I'm going to increase the line height of this paragraph. 81
The default line height of this font which is Roboto. 82
I'm not sure how you pronounce that. 83
Is very tight, doesn't make a good readability experience, so I'm going to increase it from this line 84
height field. 85
All right this looks great. 86
The headline is thin and slick, but still grabs the main attention. And paragraph text 87
is airy and easy to read. 88
What an improvement to what it was before. 89
Let me show you, what would I change if I went with a heavy headline instead. 90
In this case, I would actually decrease the line height of the headline text. Remember, as I explained 91
in the lesson, when dealing with a large and very bold text, we might need to shrink the line height. 92
That's because the letters have gravitational pull, and heavier objects pull each other together. 93
In this case, I'm going to return the paragraph text back to regular weight. 94
I generally avoid using thin weights for a paragraph text. On desktop screens, that don't have very high 95
pixel density, 96
they can be hard to read. All right. 97
That's it. 98
Very simple and fun exercise to practice setting type, and messing around with different values of heights, 99
and phone sizes, and whatnot. 100
And in the upcoming assignment, I'm going to check out your submissions.