Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Line-height and letter-spacing

4:53 with Anwar Montasir

In our previous videos, we learned to add new web fonts to our web page, and that’s a big help. But web type has other properties that we haven’t examined yet that we could use to improve the presentation of our Lake Tahoe project.

Font shorthand solution

Here's how I solved the problem of providing a shorthand for our h1 and h2 selectors.

OLD CODE

h1, h2 {
  font-family: 'Abolition Regular', Impact, Charcoal, sans-serif;
  font-weight: normal;
  line-height: 1.1;
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 2.5rem;
}

NEW CODE

h1, h2 {
  font: 400 4rem/1.1 'Abolition Regular', Impact, Charcoal, sans-serif;
}
h2 {
  font-size: 2.5rem;
}

Here I've declared both the h1 and h2 at once using a single, comma-separated selector, then changed the size of the h2 beneath our first rule.

If you've found another solution that works, great job! Most coding challenges have more than one effective solution.

A note about root font sizes

I received a great question from a student about changing the root font size, and it turns out I didn't use the most accessible solution.

In the article 5 Keys to Accessible Web Typography, Matej Latin says

The best practice is to set the font-size on the html using % (or any other relative unit), and then set all the other elements to either em or rem which will be relative to the body size.

Unfortunately, this means that I handled this incorrectly in this course. Instead of

html {
  font-size: 20px;
}

a more accessible approach would be

html {
  font-size: 125%;
}

or

html {
  font-size: 1.25em;
}

since that would better respect the user's preferences. I'll record an updated version of this content when I'm able.

Further reading

In our previous videos, 0:00
we learned to add new web fonts to our webpage, and that's a big help. 0:02
But web type has other properties that we haven't examined yet 0:07
that we could use to improve the presentation of our Lake Tahoe project. 0:12
With the inspector open in Google Chrome, I'm going to turn on 0:17
device mode to check out what our page looks like in mobile view. 0:21
We should get used to the idea of checking this view early in the process. 0:27
In mobile view, It's easier to identify one way 0:31
we can make our body copy more legible 0:35
increasing the space between lines of text. 0:38
While typographers refer to the amount of space in between each 0:42
line of text as leading, 0:47
the CSS property controlling leading is called line-height. 0:49
By default, the line-height in CSS is about 1.2 times the height of the text. 0:54
But that's not enough for optimum legibility. I'd recommend 1:01
making your line height at least 1.5 times the height of the text. 1:05
Let's start with that number. 1:10
You can use a number higher than 1.5, but be cautious about going too high. 1:17
I'll try the number 3 and now my lines of text are so 1:23
far apart that they look like separate paragraphs. 1:28
So I'll go back to 1.5. 1:32
You're probably noticing something strange about line-height values, 1:38
we didn't include a measurement. 1:43
line-height is the one CSS property you'll see that uses a unitless measurement, 1:45
which gives the most predictable results when adjusting child 1:51
elements no matter the line height of the parent. 1:56
This follows the MDN recommendation. 1:59
In most cases, this is the preferred way to set line-height and 2:03
avoid unexpected results due to inheritance. 2:09
Our paragraphs look great with more open line-height, but our headings don't. 2:13
We don't want California to be so far beneath Lake Tahoe in our h1 for example. 2:19
So let's tighten up the line height for our large headings, 2:26
about 1.1 times the height of the text should do. 2:30
Our CSS rule for the body element works great now, but it looks a little lengthy. 2:41
In previous courses, we learned a shorthand for the border property, 2:48
there's one for the font property as well. 2:52
CSS Tricks' article on the font shorthand is a good guide, 2:55
since it's important we put the values in the correct order. 2:59
In one statement we've declared that the font-weight should be 300, 3:19
the size of the font should be 100%, 3:24
which refers back to the root font size, which is currently 20 pixels. 3:28
The line-height should be 1.5 times the height of the body copy and 3:33
the typeface should be Work Sans pretty slick. 3:40
See if you can use the shorthand to shorten our heading declarations as well, 3:44
that might take a bit of creativity. 3:50
One other property that you'll adjust less frequently than line-height, 3:55
but can be an interesting visual effect is letter-spacing. 4:00
Rather than adjusting the amount of space between this line of text, 4:04
letter-spacing controls the space between each letter. 4:10
Note that a little bit of letter-spacing goes a long way. 4:14
Underneath our comment that reads Main Styles, 4:19
I'm gonna adjust the class called title. 4:23
And set the spacing between each letter to 1rem equivalent to 20 pixels. 4:28
And that's way too much, isn't it? 4:38
Are lead sentences almost impossible to read. 4:40
Let's try 1 pixel instead. 4:44
And that's much more subtle. 4:50

You need to sign up for Treehouse in order to download course files.

Sign up