Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Web Typography!
You have completed Web Typography!
Preview
Choosing 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.
Video Correction
-
1.25rem =
20px
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
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
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