This is the opening title of the movie Gravity. 1
Pay attention to how the type is set. 2
Here's another one, from The Dark Knight Rises. Or this one, from Interstellar. 3
Do you notice the similarity? 4
All three have a very wide Letter-spacing. Letter-spacing is one of the attributes you can change about 5
the font and customize it to your needs. 6
You can make it very tight and snug, or you can make it nice and airy. 7
This sort of extra wide spacing is called Panorama. 8
It's a really cool design trick. And it kind of creates this nice, finished and refined look, and adds 9
an extra importance to the text. And makes it feel like it's saying something very important. 10
If you're ever stuck with a very boring and bland design, you can set your type in Panorama, and it will 11
instantly going to give it a nice and refined look. 12
For instance, if I need to add an extra title to a block of text, that already has a title, I can take 13
that secondary title and set it in Panorama. 14
There, secondary title now is very interesting, compared to what we had before. 15
This feels more deliberate. 16
It's secondary hence, not competing with our original headline. 17
It has its own specific style, so I'll be able to repeat this on other similar blocks of text and be very 18
identifiable. 19
One big benefit of the Panorama type setting is that, it lets you shrink your font to a very small sizes, 20
without losing readability. 21
I've removed the Panoramic effect here and the text has become much less readable. 22
This means I would have to increase the size of the font. But this now competes too much with the main 23
headline. 24
I want it to be the secondary information, but it has almost become the primary title. 25
One thing to note, when setting type in this way, most of the time, you should use Uppercase. 26
This effect doesn't really work well in lowercase letters. 27
Okay, so that's about wide space, but how about tighter spacing? 28
When would we want to use that? One such case is when dealing with large, heavy text. On large texts spaces 29
between letters are proportionally large. 30
For instance, I was working on a website for a scooter sharing company. 31
As you can see, I'm using an enormous font size that is quite bold and heavy. The default letter spacing 32
for this felt a little too spaced out for me. So I've added a negative letter spacing. 33
If I'm using a very bold and large headline, I want to create a text that looks bold, heavy and concentrated 34
in one tight space. Airy, free letter spacing is the opposite of what I want to achieve. 35
So, I tightened things up in this case. 36
Most of the time, you want to keep the default letter spacing for your text. But in specific cases you 37
have an ability to customize the font to your needs. 38
As a rule of thumb, if you're ever adjusting the letter spacing then, increase spacing as font gets smaller 39
or lighter, and decreased spacing when it gets bigger and bolder. Let's compare this to identical text 40
blocks. 41
It's same font size and the text is exactly the same. 42
Their difference is in their Line Spacing or Line Height. 43
The type is set in Arial, 25 pixel size. 44
The left paragraph has a default line height, but on the right one I've increased it. The default line height 45
value of Ariel is very tight. 46
This makes the text harder to read and follow. The increase line spacing on the second block, makes text 47
more airy. It feels less heavy, easier to read. And even though it's longer in size, it still feels less 48
intimidating than the original. Intimidating text is something to actually lookout for, people don't usually 49
read text on websites, they scan. They are frantically scanning for keywords and phrases, to find what 50
they are looking for, or to decide if the website is relevant for them altogether. 51
The text on the right will help them scan text easier and find what they are looking for. 52
You can try it yourself. Pause the video and try to read each text, as fast as you can. 53
You'll notice that, you will have much easier and faster speed on the text on the right. 54
The original line spacing will feel like running on a sandy beach, a little draggy and slow. 55
This issue gets extremely evident when we deal with wide text blocks. 56
When you finish reading one line of text in this block, jumping on the left to find the following line 57
is a challenge. 58
It's very easy to get lost and you'll have to rely on connecting lines with context, or a finger, or a ruler. 59
All fonts come with their own default line spacing and it changes based on the font size. 60
Some fonts that are very well-made and well-balanced, will have better line spacing than others. 61
This, for example, is one of my favorite typefaces called Avenir. 62
The default line height is 34 pixels on this specific font size. 63
As you can see, it's not very different from the adjustment that I made for Arial. 64
So in this case, I might even leave the line spacing, as its default value. 65
Now, there are times when you need to shrink the line spacing instead of increasing it. 66
And that's usually when dealing with large and very bold text. Especially in uppercase. The default line 67
height on this text is a little airy for me. 68
I chose all capitals and heavy font to make the headline super bold, heavy and strong, concentrated 69
in one place. 70
So, in this case, I am going to decrease the line height just a little bit. 71
Now this version is exactly what I was looking for. 72
We can think of this as a gravity, heavier objects have stronger gravity so they pull each other closer. 73
And lighter objects not as much, so they are floating in space and feel more airy. 74
Speaking of font weights...Light and regular, semi-bold, 75
bold, 76
extra-bold, 77
heavy, black, skinny, hairline and so on. These are what's called font weights or styles, or thickness. Every typeface 78
will have their own set of weights. Some more than others. 79
These, for example, are font weights of a very popular Google font called Open Sans. Has 5 different 80
weights. 81
Ariel on the other hand, has only 2. Regular and Bold. 82
The typeface that has this little weights is very difficult to work with. On a modern website 83
you have so many different places that you need to put text: on paragraphs, on buttons, navigation bar, 84
dropdown menus, headlines, secondary headlines, footer links and more. 85
If you pick one typeface that has only two weights, regular and bold, you will struggle a lot. When you 86
need to create a hierarchy, and contrast between a headline and a subhead, 87
you're basically left with a text size to do all the heavy lifting. 88
Regular white text on dark background sometimes looks bolder. To compensate for this optical illusion, 89
you may want to use a lighter weight. The text on these two cards now look like they are same weight, but on 90
the previous example, the right text looked heavier. 91
Let me show you that one more time. 92
Light...and regular...Another situation, where we might need to adjust the weight of the font, is on a large text. 93
As you increase the size of the font, it becomes heavier. 94
Both of these are regular weight in this case. 95
But because the first is much larger, its body is thicker and heavier. 96
Sometimes we want it to look similar weight, just different sizes. In such scenario we will have to pair 97
the light and regular styles. 98
Now the large text and smaller text feel more like they are of same weight. 99
You can do this in the other direction too, by making the smaller text a little bolder. 100
You'll need something like semi-bold in this case. 101
If your typeface doesn't have enough weight, then your hands are tight and you won't be able 102
to achieve optimal results. 103
Pick typefaces that are versatile and have sufficient number of weights. 104
Most modern, general used typefaces, today will have at least 4 weights. Which is decent enough. Some complete 105
typefaces will have 9 different weights. Like this typeface called Monsteratt 106
you're not going to run out of weights here, are you? 107
So we have Letter Spacing, 108
Line Height and Font Weights. 109
These attributes help us with two things mainly: 110
1. One is to make text easy to read, especially on the body and big text. 111
2. And second, to achieve a really good visual hierarchy between different elements, text elements obviously, on the page. 112
In the upcoming lesson, we're going to practice this exact typesetting between line heights, 113
weights and all that stuff. 114
Stick around.