Up next in 10
CSS Tutorial For Beginners 34 - Letter Spacing & Line Height
860 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore the concepts of letter spacing and line height, important aspects of typography and text layout in web design. The video likely covers how to adjust the spacing between letters (letter-spacing) and the height of lines of text (line-height) using CSS properties, allowing for precise control over text appearance and readability. Viewers can expect to learn how to apply letter spacing and line height to specific text elements or text spans, as well as practical examples demonstrating their usage in various contexts. This tutorial serves as a valuable resource for beginners looking to enhance the typographic quality and visual consistency of text content within their web pages using CSS.
View Video Transcript
0:00
Yo, what's going on guys
0:09
You're watching CSS Beginners Lesson 34 and today we're going to talk about let spacing and
0:13
line height. That's coming up. Okay so before we dive in the code I want to go through what let spacing is and what
0:20
line height is and what word spacing is. So if you're coming from a graphic design background or Photoshop you're probably familiar
0:26
with these things they're called something a little bit different I think but either way you're probably familiar with concepts. Now, letter spacing is simply the spaces between letters
0:34
You can control that. So you can make the font look a little stretched if you like, or
0:37
you're kind of condensed and crammed together. So that is the letter spacing. In graphic
0:42
design, it's more commonly referred to as tracking. The word spacing down below is the same
0:46
concept, but it's the space between words instead of letters. And the line height is the
0:52
vertical height or the vertical space between lines in a paragraph. So imagine these are full
0:57
sentences yeah full kind of width and in a within one paragraph and that height
1:02
there between each line would be the line spacing all right so now we know
1:06
that let's jump into the code and play around with them all right guys so
1:11
here we are back in the code and you can probably see I've added this style tag here with just a few different styles in don't pay attention to that I've
1:17
just added those in to make the site look a little bit more pretty so that's the
1:22
only reason for that down below here we've got some dummy texting this is actually really cool it's really
1:27
site called Samuel L Lipsum which comes up with this Samuel L Jackson type
1:31
double text it's an alternative to Laura Mipsum so you check that out it's
1:35
really cool so now what we're gonna do we're gonna grab all the peas with our
1:39
piece selector and we're gonna look at those properties and we'll start by just giving the font a font size of 12 pixels right and we'll give it a letter spacing first
1:49
all now this property dead simple is just letter hyphen spacing if you can spell
1:55
unlike me And we've got here inherit, we've seen what that does, just inherits the parent elements letter spacing property
2:02
and we've got normal to default it back to the normal letter spacing. So we can add our own letter spacing, and we can do this using pixels
2:10
but we can also use the relative measurements which are ms and percentages much like we can with the font size Now they work a little bit differently when it comes to letter spacing word spacing and line height the ems and percentages
2:21
So I'm going to go through that in a minute. Just to begin with, we're going to use pixels. And I'm going to say, what the hell, 10 pixels
2:28
All right, so let's save this now and view this bad boy in a browser. All right, that looks absolutely cool, doesn't it
2:39
I mean, if you can read that, then kudos because I ain't going to clear what it says
2:45
So that is letter spacing in action. Yeah, we've done it a little bit too much there, but if you wanted to stretch by just a couple
2:52
of pixels, that would probably be the better thing to do, okay? By the way, this is that CSS that I did
2:57
It's giving it a great background and just this central column. Looks a lot better, don't you think? Cool
3:02
Anyway, that is the letter spacing. Let's just reduce this a little bit to about two pixels, because that is a lot more
3:08
easier on the eye. view this in a browser again. And there you go, that looks better, doesn't it
3:15
I mean, now the letters are a little bit further spaced. They've got a little bit more room to breathe, but it's not illegible
3:22
All right? So that is what ladder spacing is all about. Now, let's look at the word spacing property
3:32
Again, we'll go up to 12 pixels between the words. We'll start on an extreme level and view this in a browser again
3:39
okay yet there again it's a little bit too much but you can see there's 12
3:46
pixels now between each word there okay so let's just reduce this and we'll go
3:51
down to two pixels again yeah see what that does for us
3:55
there's a dog barking away in the background okay cool that's a bit better
4:02
so yeah we can pad out the words and the letters using letter spacing and
4:08
word spacing now the line height is something slightly differently, something slightly different, sorry, that is the vertical space
4:17
So let's give that a go. And again, it's just line dash height property
4:22
And we'll give that 12 pixels again. That is my lucky number today
4:27
View this in a browser Now then that doesn look very big does it 12 pixels There not 12 pixels of space between those
4:38
What's going on? Well, let's just try this. Let's try increasing this to, I don't know, 24 pixels
4:47
And view this in a browser again. Right, that's more like it. Now we've got this space here, but again, it doesn't look like it
4:56
Again, it doesn't look like 24 pixels. So what's going on? Well, my friends, this is what's going on
5:02
The font size itself is 12 pixels. Okay? So when we specified a line spacing of 12 pixels
5:09
or line height of 12 pixels, rather, that is the vertical height of that line
5:15
Okay, it's 12 pixels. We're not specifying the gap in between the lines
5:19
We're specifying the height of the whole line. So now this whole thing here is 12 pixels
5:26
If I do zero pixels, check out what happens. Open this up in a browser again
5:36
See that? It all kind of goes on top of each other, all right? And that's because the line is zero pixels in height
5:43
so it's having no space whatsoever to breathe vertically. Okay, so because the font is 12 pixels
5:50
it's taking up 12 pixels in height, that line automatically. Now, if we had a line height of 12 pixels
5:55
it's not doing anything to it because the font size is already 12 pixels. You follow me, right? Now, if we double that to 24 pixels, we're saying
6:02
okay, well, you've got 12 pixels for the font height and an additional 12 pixels for the space in between
6:07
That makes perfect sense, yeah? All right, cool. So, I said we could use M's
6:14
All right, now let's look at the letter spacing first of all. And I'm going to say two M's
6:20
Now, in the font size case, I said that the M's. would inherit the parent elements font size and then times it by two in this case
6:31
Yeah? That's not the case here. We don't inherit from say the body tags that, you know
6:36
the parent elements let a space in because it might not have one associate to it. What we do is we inherit this 12 pixels that we specified as the font size for the P tag and then we times that by two So that is the equivalent of saying 24 pixels So whatever this is here the font size we times it by two
6:55
Or if it's 3Ms, then we times it by 3. So that then will be 36 pixels, letter spacing
7:01
Okay? Now, it's normally good practice to do something like, you know
7:05
0.1 or 0.2, because you don't want the letter spacing to be that far apart
7:10
So let's just check out, first of all, this, what it looks like in a browser
7:18
Put this in Chrome. And there you go. You know, that's not point two, is it
7:23
Yeah, that's not point two. And it looked pretty cool. So that is how M's work with letter spacing
7:29
and it's exactly the same with word spacing. Let's just get rid of this and do word spacing
7:37
So we'll view this in a browser. in Chrome Yeah, that was cool
7:45
And you guessed it guys With line height, it's exactly The same
7:50
However, in this case You don't want 0.2Ms Because remember, that's going to cause the
7:56
font to kind of overlap on each other We want at least 1N
7:59
Because 1M will be 12 pixels Yeah, 1 times 12 And we need at least 12 pixels
8:06
in height for the font size of 12 pixels So ideally we want to make this over one, maybe 1.5 to see something like this, or even
8:13
more depending on your designs. So let's view this in a browser one last time
8:20
Cool, there it is. So we've got now a little bit of space in between these lines
8:25
It's quite readable, except for the fact that the font size is really small
8:29
But apart from that, the spacing looks pretty cool. Alright guys, so that about covers it for letter spacing, word spacing and line height
8:36
If you have any questions whatsoever, feel free. to ask them below and I'll answer all of those as things I can
8:42
Otherwise, if you enjoy these videos, please like, subscribe or share them and I'll be back
8:46
with another one very soon. I'll see you guys then