Over the next few stages, I'll be working off the basic knowledge that

Treehouse teacher, Gil Hernandez, covers in his CSS lessons.

If you haven't already,

make sure to catch yourself up to speed through the link in the teacher's notes.

Getting proper sizes for

your web fonts is crucial to good typography and readability.

All the hard work of choosing a good typeface can go down the drain if

the body size is illegibly small.

Or, if it's out of proportion to your headings.

In this video, we'll discuss best practices on setting this up in CSS.

I've set up a new workspace here, with some stripped-back, basic CSS.

I've also left all the font sizes as blank.

So, we can change those throughout this video.

In the index.html, I'm utilizing copy from The War of the Worlds,

a book by H.G. Wells.

I've also improvised some headings and lists for this example.

In our head section, we can see I'm calling Alegreya from Google Fonts API.

In the style, I've assigned our body font family to be Alegreya,

then Georgia, then Serif.

If you want to check out Alegreya, you can go to Google Fonts, and

you can see the different styles available.

And, we're calling the normal, bold and bold italic.

I chose this typeface because its roots in literature,

due to the content at hand being a book.

It also has diverse weights and italics, and it includes small caps and

other features.

Our text size is set through our CSS font size property.

This value can be set with pixels, ems, rems, percent and more.

We'll first focus on pixels and then discuss font sizing with em and rem.

A pixel is a fixed unit of measure.

It pertains to media with display screens, such as a computer.

For example, if we wanted to set our body copy's font size in pixels,

we would simply write font size 20 pixels under our body.

Then, we could set our h1 to be at 50 pixels through its font size.

If we refresh the page, we see that our body font size has increased, and

our h1 font size has increased.

That's because our default size there was 16 pixels, and is now at 20 pixels.

And, our h1 is now at 50 pixels.

Setting sizes with pixels is pretty straightforward, and you can do that for

any of the elements.

A good rule of thumb is to set your body text anywhere between 16 pixels,

which is the default, to 24 pixels.

Readers' eyes are usually a few feet from screens, so

these larger sizes are necessary for

comfortable reading, whereas smaller text can strain and tire their eyes.

This ranges the verse too as every type face is different.

As we've seen before,

the x height of a typeface can greatly effect its perceived size.

So, use what you've learned, and make a judgement call on what looks best.

When in doubt, lead toward the larger size.

Many web designers gravitated towards setting the font size in

CSS as pixels because of its simplicity, consistency, and

ability to create exact designs with a fixed unit.

But, because this is a fixed unit,

it can create more work with responsive typography.

And, an accessibility problem can arise with older versions of browsers,

such as Internet Explorer.

When font sizes are set in pixels, users cannot increase or

decrease the text size on a page through the browser preferences.

This can create problems with accessibility.

This issue can somewhat be skirted through zooming in on those browsers.

But, let's look at a commonly practiced alternative.

Whereas pixels are a fixed unit, ems and rems are relative units for font sizing.

Ems are relevent to its parent space size.

For example, most browsers default to a font size of 16 pixels,

which is equal to one em.

If we set our body at one em, and our h1 at two em, let's see what happens.

All right, our body has now gone back to 16 pixels, which is the default.

And our h1 is two times that,

which would make it 32 pixels, because it's relative to the body font size of 1m.

Lastly, if we change the containers class to a font size of ten pixels [SOUND],

we can see that everything on the page has changed.

That's because the m is now relative to those ten pixels.

So, one m is equal to ten pixels, and two m is equal to 20 pixels.

This can be incredibly helpful, scalable and powerful for

responsive typography by saving time and extra code.

It also corrects accessibility issues if a user needs to

change the default font size of their browser.

But, you want to be on the lookout for a compounding m's,

meaning nested elements font sizes can begin to multiply on top of each parent.

For example, let's set the li element to be a font size of 0.8m.

We'll also remove this ten pixel font size for our container.

We'll save and refresh.

Now, we see that our paragraphs are at one m, and

there our li's are 0.8 of that one m.

And then the nested li's under that are at 0.8 of that 0.8.

That's because these nested elements are compounding on top of each other.

To fix this,

you can set all nested elements like li li to have a font size of one m.