Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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.
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 eitherem
orrem
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
You need to sign up for Treehouse in order to download course files.
Sign up