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
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.
Point Size, Matthew Butterick
Confused about Rem and Em?, Jeremy Church
FontSizing with REM, Jonathan Snook
More Meaningful Typography, Tim Brown
Helpful Tools: Pix to Em and Type Scale
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
Over the next few stages, I'll be working
off the basic knowledge that
0:00
Treehouse teacher, Gil Hernandez, covers
in his CSS lessons.
0:03
If you haven't already,
0:08
make sure to catch yourself up to speed
through the link in the teacher's notes.
0:09
Getting proper sizes for
0:13
your web fonts is crucial to good
typography and readability.
0:15
All the hard work of choosing a good
typeface can go down the drain if
0:18
the body size is illegibly small.
0:22
Or, if it's out of proportion to your
headings.
0:24
In this video, we'll discuss best
practices on setting this up in CSS.
0:27
I've set up a new workspace here, with
some stripped-back, basic CSS.
0:32
I've also left all the font sizes as
blank.
0:36
So, we can change those throughout this
video.
0:38
In the index.html, I'm utilizing copy from
The War of the Worlds,
0:40
a book by H.G. Wells.
0:46
I've also improvised some headings and
lists for this example.
0:48
In our head section, we can see I'm
calling Alegreya from Google Fonts API.
0:52
In the style, I've assigned our body font
family to be Alegreya,
0:57
then Georgia, then Serif.
1:01
If you want to check out Alegreya, you can
go to Google Fonts, and
1:02
you can see the different styles
available.
1:06
And, we're calling the normal, bold and
bold italic.
1:08
I chose this typeface because its roots in
literature,
1:11
due to the content at hand being a book.
1:14
It also has diverse weights and italics,
and it includes small caps and
1:17
other features.
1:21
Our text size is set through our CSS font
size property.
1:23
This value can be set with pixels, ems,
rems, percent and more.
1:26
We'll first focus on pixels and then
discuss font sizing with em and rem.
1:32
A pixel is a fixed unit of measure.
1:37
It pertains to media with display screens,
such as a computer.
1:39
For example, if we wanted to set our body
copy's font size in pixels,
1:43
we would simply write font size 20 pixels
under our body.
1:47
Then, we could set our h1 to be at 50
pixels through its font size.
1:51
If we refresh the page, we see that our
body font size has increased, and
1:58
our h1 font size has increased.
2:02
That's because our default size there was
16 pixels, and is now at 20 pixels.
2:04
And, our h1 is now at 50 pixels.
2:08
Setting sizes with pixels is pretty
straightforward, and you can do that for
2:12
any of the elements.
2:15
A good rule of thumb is to set your body
text anywhere between 16 pixels,
2:18
which is the default, to 24 pixels.
2:23
Readers' eyes are usually a few feet from
screens, so
2:25
these larger sizes are necessary for
2:28
comfortable reading, whereas smaller text
can strain and tire their eyes.
2:30
This ranges the verse too as every type
face is different.
2:35
As we've seen before,
2:39
the x height of a typeface can greatly
effect its perceived size.
2:40
So, use what you've learned, and make a
judgement call on what looks best.
2:43
When in doubt, lead toward the larger
size.
2:47
Many web designers gravitated towards
setting the font size in
2:50
CSS as pixels because of its simplicity,
consistency, and
2:53
ability to create exact designs with a
fixed unit.
2:58
But, because this is a fixed unit,
3:01
it can create more work with responsive
typography.
3:03
And, an accessibility problem can arise
with older versions of browsers,
3:06
such as Internet Explorer.
3:09
When font sizes are set in pixels, users
cannot increase or
3:11
decrease the text size on a page through
the browser preferences.
3:14
This can create problems with
accessibility.
3:19
This issue can somewhat be skirted through
zooming in on those browsers.
3:21
But, let's look at a commonly practiced
alternative.
3:24
Whereas pixels are a fixed unit, ems and
rems are relative units for font sizing.
3:28
Ems are relevent to its parent space size.
3:33
For example, most browsers default to a
font size of 16 pixels,
3:36
which is equal to one em.
3:40
If we set our body at one em, and our h1
at two em, let's see what happens.
3:41
All right, our body has now gone back to
16 pixels, which is the default.
3:51
And our h1 is two times that,
3:56
which would make it 32 pixels, because
it's relative to the body font size of 1m.
3:58
Lastly, if we change the containers class
to a font size of ten pixels [SOUND],
4:04
we can see that everything on the page has
changed.
4:11
That's because the m is now relative to
those ten pixels.
4:16
So, one m is equal to ten pixels, and two
m is equal to 20 pixels.
4:20
This can be incredibly helpful, scalable
and powerful for
4:25
responsive typography by saving time and
extra code.
4:29
It also corrects accessibility issues if a
user needs to
4:32
change the default font size of their
browser.
4:35
But, you want to be on the lookout for a
compounding m's,
4:38
meaning nested elements font sizes can
begin to multiply on top of each parent.
4:41
For example, let's set the li element to
be a font size of 0.8m.
4:47
We'll also remove this ten pixel font size
for our container.
4:52
We'll save and refresh.
4:57
Now, we see that our paragraphs are at one
m, and
4:59
there our li's are 0.8 of that one m.
5:02
And then the nested li's under that are at
0.8 of that 0.8.
5:05
That's because these nested elements are
compounding on top of each other.
5:09
To fix this,
5:14
you can set all nested elements like li li
to have a font size of one m.
5:14
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