Creating fluid, responsive typography

This recipe is a simple example of responsive typography. It will demonstrate the use of the new size unit REM. REM means Root EM. This simply means that the size of the font is relative to the root's font size, not the parent, as with the EM unit.

Getting ready

Without any further discussion, let's jump into this recipe. Go get some filler text from my favorite Ipsum generator (http://ipsum.com). Generate at least one paragraph and copy the text into your clipboard.

How to do it...

Now, paste the filler text into your HTML document and wrap it in a paragraph tag. Give the paragraph element class= "a", then make a copy and assign the new paragraph class="b", as shown in the following code snippet:

<p class="a"> ...

Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.