Book Image

Practical Responsive Typography

By : Dario Calonaci
Book Image

Practical Responsive Typography

By: Dario Calonaci

Overview of this book

Typography is an essential part of any website’s design. It can help you stand out from the crowd, communicate with clarity, and cultivate a distinctive identity. Practical Responsive Typography demonstrates how to use typography to greatest effect. With this book you won't underestimate it's importance - you'll be in complete control over this crucial component of web design. From scaling and optimizing screen spaces to using a range of different web fonts, you'll quickly get up to speed with the practical considerations behind successful typography. But more than the fundamentals, you'll also find out how to go further by customizing typography designs to suit your identity.
Table of Contents (17 chapters)
Practical Responsive Typography
About the Author
About the Reviewer

The CSS3 solution

Since these element problems, or better, unwanted behavior, became known, the geniuses at the W3C worked hard and with the CSS3 specification they evolved and rewrote the em element again. To not cause harm to the innumerable tons of websites coded with the previous specification, they re-released it as a new element, called rem.

Rem stands for Root em, specifying that the element and sizing is indeed tied to the root of your document. No more contextual behavior, no more inherited sizing: every font-size expressed in rems will be resized accordingly to the HTML or body specified one.

To calculate a rem element is simpler: you won't have to remember every container and their sizes- you'll just define the base, divide the next desired values by that and you're good to go!

Let's see an example:

Body { font-size:1em; }

As we know, 1em is equal to 16px. So, having decided, for example, our primary header will be 32px high, the transformation in rems is quite simple:

32 / 16 = 2 or...