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