- Weights and Styles 9:44
- Weights and Styles: Review 5 questions
- Font-Sizing: Px, Em, and Rem 5:20
- Font-Sizing: Px, Em, and Rem - Part 2 4:41
- Font-sizing: Review 6 questions
- Horizontal Space: Measure and Margins 4:44
- Horizontal Space: Review 5 questions
- Vertical Space: Line-Height and Vertical Rhythm 8:42
- Vertical Space: Review 5 questions
Preview
Video Player
00:00
00:00
Font-Sizing: Px, Em, and Rem - Part 2
4:41Choosing a font size can make or break the readability of your webpage. We’ll talk about some general rules of thumb to go by and utilizing a typographic scale.
Rems, which stand for route ems, have been
on the rise in web design.
0:00
Instead of being relative to it's parent
class or
0:05
element like an em, Rems are relative to
the route em, set to the html.
0:07
As mentioned before, the common default
font size for browsers is 16 pixels.
0:12
So in this case, one Rem will always equal
16 pixels.
0:17
Instead of being relative to a parent
class, or element.
0:21
In our example, let's use rems, or root
ems, instead of ems.
0:24
We know that 16 pixels is the browser
default, so
0:29
here, 1.25 rem will be equal to 24 pixels.
0:32
Then we can set our h1 at 3 rem, which
will be equal to 48 pixels.
0:38
Let's save and refresh.
0:44
Our font sizes have changed based on their
rem values.
0:45
Even if we add a container value of ten
pixels, and we'll set this to be
0:49
1.25 rem for our paragraphs, we can
refresh, and we can see that these do
0:53
not change because they're referencing the
root element and not the parent element.
0:58
This also corrects the problem of
compounding ems and
1:03
still provides the benefits of scalability
for responsive design.
1:06
It should be noted, that Internet Explorer
8, does not support rems.
1:10
So if IE8 support is required, then you
would want to set a fallback in pixels.
1:14
I've also provided some further reading in
a link to tools that
1:19
help size references with pixels to ems
and rems.
1:22
Lastly, sizing your headings, paragraphs
and other text elements may seem a little
1:26
tricky, and it's not a great idea to just
guess by shooting in the dark.
1:31
This can lead to inconsistent heading and
paragraph sizes.
1:35
This is why following a typographic scale
can help immensely.
1:38
A scale gradually increases at a certain
rate to ensure consistent proportions for
1:42
your font sizes.
1:47
The classic typographic scale increases in
intervals of one, two, three and then 12.
1:49
It's been used for centuries and
1:54
is reliable to adhere to especially if
you're using 16 pixels as your base size.
1:56
I liked our body copy at about 20 pixels,
but
2:02
that size is not in that typographic scale
we just looked at.
2:05
Don't fret.
2:08
Let's take a look at typescale.com and
build one out.
2:09
This site is incredibly helpful because
you can set your base size,
2:13
test different scales, and even import
Google webfonts to the site.
2:16
So let's set ours up.
2:21
We'll put 20 pixels here, and we see it's
in reference to 1.25 em.
2:24
We can set our scale.
2:28
I like the major third for our example.
2:30
If we wanted to, we can even see what our
typeface, alegreya,
2:32
looks like by writing it in here, and then
copying it and
2:35
pasting it into this font family, and here
it appears.
2:39
So we're now presented with different em
values to build our scale.
2:44
We'll start with this base size at 1.25 em
so I wanna set that for our body copy.
2:49
[BLANK_AUDIO]
2:55
So now we're given some sizes in em's and
this largest one will be our h1,
3:00
the next largest is our h2, h3, and so
forth.
3:06
This 1 em is what we want our paragraphs
to be at.
3:10
Now, in our design, I've already set these
up down here as h1, h2, h3,
3:13
with those corresponding sizes.
3:17
I didn't go all the way to h6 because our
design doesn't have all those
3:20
heading numbers.
3:23
We could also set the p element to be 1 em
if we like, but
3:24
this is set by default in the browser.
3:28
Remember, these are relative to our body
font size of 1.25 em.
3:31
So let's go check out what the scale looks
like.
3:35
Great.
3:39
Our typographic scale looks good and it's
intact, and
3:40
if we were change our body font size here,
let's say to 1 em,
3:43
our whole scale changes with it which is
very nice, and it's great for responsive
3:49
design, but I really want this to be 1.25
em, so I'll move it back to that.
3:53
Now that that's set up, we still have a
little ways to go,
3:59
but getting a proper body size and scale
is a great place to start.
4:01
To summarize this lesson we saw that
pixels give the designer much control over
4:06
the design but lack easy scalability and
accessibility.
4:11
Em's are easily scalable but can be
confusing at first and
4:15
have issues with compounding font sizes
and nested elements.
4:18
Rems are root ems.
4:22
They're growing increasingly in popular
use because they bring
4:24
the scalability of ems without that hassle
of compounding font sizes.
4:27
Once you've set your body text size,
4:32
he sure to build the rest of the sizes
based on a typographic scale.
4:33
That's it for font sizing.
4:37
Next we'll look at measure and space
4:39