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
While percentages are a great tool for building flexible layouts in CSS, they weren’t designed specifically for working with type. In this video, we’ll learn two measurements, the em and the rem, that are considered font-relative units.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
While percentages are a great tool for
building flexible layouts in CSS,
0:01
they weren't designed specifically for
working with type.
0:05
In this video, we'll learn two
measurements, the em and
0:10
the rem, that are considered
font-relative units.
0:14
We'll start with the em.
0:19
The is a font-relative unit
because it's calculated based on
0:21
a parent element's font size.
0:25
Anytime we give an element's
property a value of 1em,
0:28
that 1em is equal to the font
size value of the parent element.
0:32
The difference between working with
percentages and ems can be subtle.
0:39
Let's say I have a paragraph
with an h1 element above it,
0:44
and I want the h1 to be twice
as large as my body copy.
0:49
I could set my h1 to 2em or to 200%,
and the results would look the same.
0:53
Since the default font size for
browsers tends to be 16 pixels,
1:01
my h1 would now be 32 pixels
in size in both cases.
1:06
However, let's say I wanted to increase
the spacing between the h1 and
1:12
the paragraph, and maybe make it one
and a half times the size of my font.
1:17
When using ems, it's pretty simple.
1:24
I'll set the top margin of
the paragraph to 1.5ems.
1:27
As for using percentages,
1:33
well, percentages weren't really
built to do this sort of calculation.
1:34
This is where the em
measurement shines,
1:40
allowing you to make all kinds of
adjustments based on font size.
1:42
In our previous video, we set
our body copy to 20 pixels and
1:48
the h1 element to 400%,
giving us an 80 pixel heading.
1:54
The equivalent in ems would be 4em.
2:00
If I preview in my browser,
the heading looks no different.
2:04
20 pixels times 4em equals 80 pixels.
2:09
We can also use ems to increase the margin
to 1.5 times the size of the font,
2:15
something hard to achieve
using percentages.
2:21
And let's check that out in the browser.
2:33
Okay, that's interesting.
2:41
We were probably expecting 30
pixels of margin underneath our h1.
2:43
After all, our font size was 20 pixels,
and 20 times 1.5 is 30, right?
2:49
But in my browser, I can see
the margin is far greater than that.
2:58
Using my browser inspector,
3:02
I can see that I am in fact looking at
120 pixels of margin at the bottom.
3:05
What happened here?
3:11
That's something important to understand
about ems, is the multiplication factor.
3:14
Once we increased our
font size to 80 pixels,
3:20
the margin is calculated
using this new measurement,
3:24
and 80 pixels times 1.5 equals 120.
3:29
If you're not a fan of this
cumulative effect, you're in luck.
3:34
CSS offers another
measurement called
3:38
rems that always refers back
to the original font size.
3:41
It's important to understand the
difference between ems and rems, so
3:46
let's examine them carefully.
3:50
Here are two paragraphs.
3:53
The body copy on the left and right is
set to 16 pixels, the browser default.
3:55
Let's set the paragraph on
the left to font size 2em and
4:02
the paragraph on the right
to font size 2rem.
4:06
Each paragraph has a font
size of 32 pixels.
4:10
There's no difference in
how they work just yet.
4:14
If I bump the HTML font size up to
20 pixels, it's the same story.
4:18
Each paragraph now has
a font size of 40 pixels.
4:25
However, let's say each paragraph was
contained within a section element,
4:29
and my section element is
set to font size 1.5em.
4:36
The paragraphs have
different font sizes now.
4:40
The one on the left, using ems,
is calculated by multiplying
4:44
20 times 1.5 times 2, which equals
60 pixels. That's because ems
4:49
include the measurement of
parent elements when making
4:56
size calculations.
4:59
Meanwhile, my paragraph on
the right is still 40 pixels
5:02
because rems always refer
back to the root font size.
5:07
20 times 2 is still 40, and the rems
will ignore what the parent is doing.
5:11
If inside that section element each
paragraph was inside a div and
5:18
that div had the font size 0.75em,
what happens now?
5:24
The math on the left
gets even more complex.
5:29
20 times 1.5 times 0.75
times 2 equals 45 pixels.
5:34
But the rems version on the right
remains steady at 40 pixels,
5:41
since rems refer back to the root
font size no matter what.
5:45
So let's put that in practice and
5:52
see what happens when we use rems
instead of ems to style our h1.
5:54
The heading font size is the same, 4 times
20 pixels still gives us 80 pixel type.
6:04
But when I inspect, I see 30
pixels of margin underneath my h1,
6:12
since our root font size
determined by our HTML element
6:19
is 20 pixels, and 20 times 1.5 is 30.
6:25
If I set the HTML element
back to 16 pixels,
6:30
which would match the browser default,
6:34
Now the margin beneath is 24 pixels,
6:42
since 16 times 1.5 is 24.
6:46
This is a great advantage to both the em
and rem measurements.
6:51
A change to the base font size will
cause everywhere you've used relative
6:55
measurements to automatically adjust.
7:00
If you were building
a responsive website and
7:04
wanted the text to be
larger on a large monitor,
7:07
making the adjustment would be
a snap using relative measurements.
7:10
Whereas fixed pixel measurements
would require making
7:15
adjustments to every single
measurement one by one.
7:20
Let's make one last change.
7:25
You'll notice that so far
7:28
I've used the pixel measurement
to set the root font size.
7:29
However, this could cause difficulty for
7:33
users who need to adjust the base
font size for accessibility reasons.
7:36
Under the Preferences
menu in Google Chrome,
7:42
I'm going to click Appearance and
then Customize fonts.
7:45
A user with low vision might use
this setting to increase the size of
7:50
their web fonts.
7:54
Let's try 24 pixels as an example.
7:56
If we set the base font size of our HTML
element to a fixed size of 16 pixels,
8:00
now we're actually overriding
the user's default preferences,
8:06
which could cause difficulty for
users who can only read larger text.
8:11
What happens if we switch
to a relative unit?
8:18
I could change 16 pixels to 1em or
8:22
100%. Both measurements
work the same.
8:25
I've included a comment to remind me
that 100% usually means 16 pixels,
8:36
but the user might adjust
this on their own machine.
8:42
When we preview our page, our root font
size is now 24 pixels rather than 16,
8:48
since our layout now respects
the user's preferences.
8:54
I'll switch that customized font setting
back to 16 pixels before I continue.
8:59
So are rems superior to ems?
9:07
Not necessarily.
9:10
The math is easier to follow with rems,
but it really depends not only on personal
9:11
preference, but also what your
typographic goals are in your layout.
9:17
The important thing to remember
is the distinction between them.
9:22
Ems include parent elements in calculating
size and spacing measurements,
9:26
while rems always refer back to the root
font size determined by the HTML element.
9:32
But whether you prefer ems or rems,
9:39
both measurements are ideally
suited to working with web type.
9:42
Try them out yourself.
9:47
Experiment some more with
Developer Diane's resume and
9:48
see what happens when you switch
between pixels, percentages, ems,
9:52
and rems when working with font
sizing and spacing.
9:57
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up