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
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.
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
Our lead sentence is 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