Our example web page has really taken shape over these past few videos and

is now much more legible, readable and engaging through the use of typography.

But what might be a joy to read on a desktop quickly becomes a burden for

readers on smaller sized screens.

Our measure quickly decreases.

Our font sizes overtake the screen.

And space gets cramped.

In this video, we're gonna remedy those problems through responsive typography.

If you haven't checked out media queries in Tree House's CSS course,

then I recommend doing so before you dive in.

Responsive typography is a subset of responsive design,

focusing solely on the typography as a response to different screen sizes.

It's extremely important and its details are often overlooked on websites today.

Creating a pleasant reading experience for desktop browsers is great.

But we must also account for any other ways someone may be viewing our site.

In an article on advance web typography, Elliot Jay Stocks wrote,

My principle concern around web type in a responsive world is all about measure.

I think this is really helpful.

Because measure, or how many characters fit on a line of text,

will determine when to make media query break points which will change font sizes,

spacing adjustments, line height changes, and more as necessary.

All right. Let's look at our design again.

Notice I reimplemented our two asterisks at the 45th and 75th characters as

these will help us make decisions on when to change our type responsively.

As our browser size changes if these asterisks fall in the same line,

then we know we need to adjust our measure.

I've also removed our drop cap class for

the time being as it was throwing off this technique.

We'll reinstate it once we've got our body text down responsively.

Let's begin to resize our browser and take note of what we see.

As I bring the window in,

we notice that our type is getting really close to the edges up here.

And then as it gets even smaller,

our body text is getting close to the edges over here.

To correct that, we'll want to set a width of 88% to our body set container.

And then for our title, we'll add some padding of 6% to the left and right.

Let's save it and check it out.

As we resize it, we see our type is no longer getting too close to the edge.

And at smaller sizes, our body is given some good room to breath.

Now, we'll want to start looking at our measure.

As I pull the window in, we notice at about 512 pixels or

16 pixels, that are two asterisks are now on the same line here.

We're gonna want to adjust that.

So I actually prefer it a little sooner.

So let's say 544 pixels to be safe.

So I'm going to drag this back out.

And let's head over to our CSS to change that.

So at 544 pixels, we're gonna divide that number by 16,

which is the default number for ems, and that's gonna give us 34 em.

We wouldn't want to use pixels in media query sizes because our

measure could get distorted if someone increased the browser font size.

That's because the font size would increase.

But the media query would not scale with it because it's a fixed measurement.

To get our asterisks back on the same line,

we'll need to decrease the font size.

A smaller size is okay here,

because people hold smaller-sized screen media, like phones, closer to their face.

Whereas desktops are usually a little further away.

You don't wanna go too small though.

So I'd recommend not going any less than 14 pixels for body copy.

Our body font size was originally at 1.25em or 20 pixels.

So the smaller screen size, lets set it at 1em or 16 pixels.

Since our heading and paragraphs are set at ems and

are relative to our body font size.

They'll automatically be adjusted and scaled down with this new em.

This keeps our typographic scale intact for font sizing.

Scale can be hard to maintain with so many different moving pieces.

This is just one way to keep it.

But sometimes, it can still go [UNKNOWN] with large headings.

Jason Pimentel has great article in the teacher's notes on good scale for

web typography.

Let's check out our site.

As I size the browser down, we notice now,

that our type jumps to be a little smaller and so does our heading and h2's.

That's great.

As we go even smaller,

we notice that the asterisks have jumped to the same line there.

That's actually okay.

Our measure can be more around the 40 to 50 character mark,

because reading on small screens is a lot like column reading.

I don't wanna scale my text any smaller than this, so

I'll leave the body copy at that.

Because we've set up our font size as well in the beginning,

it made adjusting the body text responsively a lot smoother.

Sometimes line heights need tightening up as text scales downward.

So be sure to check that, especially in your headings.

For larger size screens, it can be smart to have another query as users tend to

sit or stand a little further back from them.

So we'll want our sizes to be a bit bigger.

For that, we'll head over to our media queries again and put a min-width of

94em or 1504 pixels and we'll increase our body font size to 1.5em.

That means we'll adjust our container's class to have a max-width of 46 rim.

This width keeps a good measure with the new font size.

Since our screen size for this video is 1280 pixels,

I won't be able to stretch the browser to larger sizes.

If you have a larger-sized screen, then by all means,

check out these changes in your work space.

With our body copy honed it, we'll now wanna go back and

reinstate our drop cap class.

[BLANK_AUDIO]

And we can remove those asterisks as they're no longer necessary.

I'll save our HTML and check it out.

Great. It's looking good.

Now as we resize, we see since our drop cap was set in ems,

it's also resizing with it.

We've been working with a single column layout, so it's pretty straightforward.

But let's say you have a multiple column layout.

You can create good,

responsive typography by keeping a measure of 40 to 50 words per column.

When you've exhausted your means of achieving that measure through sizing and

space, then you know it's time to create a break point and

move the layout into a single column.

Don't let your columns get too tight with text.

Finally, let's take a look at our main title.

The rest of our heading scale well at smaller sizes, but

our title still feels awfully big.

We can change this by adjusting our H1 and our media query for smaller size screens.

Let's give it a font size of 4em.

[BLANK_AUDIO]

I'll refresh and let's check it out.

Yeah.

That's much better and feels more appropriate at those sizes.

If you want further control over headline size,

then I recommend checking out fittextjs.com in the teacher's notes.

The plugin scales headlines sizes in proportion to the browser window,

making it really nice for the titles.

Currently, I like the way ours is looking.

But notice as our browser's size changes, the word world is jumping to its own line,

and it does it again here.

A single word on a line is called an orphan in typography and

can create unbalance.

Currently, there's not a lot of great ways to care for orphans with CSS.

For this example,

I'm gonna insert a non breaking space between the word the and worlds.

[BLANK_AUDIO]

Lets save that and check it out.

So as our browser size decreases, we see that worlds and

the have now jumped to the same line.

And again, they do it here.

Great. I like that a lot more and

it balances the design from being too top heavy.

In our example, we have a lot of control over the layout.

But when you're building a system or template for

people to use, you might not always be able to fine tune it to this degree.

Hopefully in the future, we'll have the power in CSS to refine things like this.

There's actually an orphan element in CSS, but it controls something very

different by adjusting the lines and paragraph line breaks.

In summary, as you practice responsive typography,

remember, by laying a solid foundation with scalable units of measure and

a good typographic scale, you can save code and time.

Use measure a as a basis for when to create breakpoints for

body copy and columns by adjusting the font size, padding space, and

line height as necessary.

Your hierarchy might need rearranging, so

be sure to translate it clearly at different screen sizes.

Lastly, your headings are prone to be too big at small screen sizes.

So don't forget to give them some finesse.

I hope that clears up responsive typography for

you and gives you some simple rules to guide you along as you practice.

Remember to trust your gut on what looks right.

I'll see you in the next video as we look at advanced web typography and the future.