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
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Modular typography scale with Sass


The first thing is to set some variables, as it's almost always the same step for every Sass project:

$font-size:16px;
$scale:.75;

I personally like the fourth ratio, so I'll use it here as an example. As you'll see, it will be easy for you to change it to your preferred one.

We'll now do some math – or better than that, we're going to let Sass do the math for us:

$s: $font-size*$scale;   
$r: $font-size;  
$l: $r/$scale; 
$xl: $l/$scale; 
$xxl: $xl/$scale;
$xxxl: $xxl/$scale;

I personally labeled the base font as Regular, you can name it as you please – and the following sizes are made by simple multiplication/division for our scale factor.

Using the 16px base we're going to obtain the following values:

12, 16, 21, 28, 37, 50, 67

Yes, the H1, for example, is too big – but it doesn't really matter right now, you'll be able to change it in a heartbeat.

Now, how can you use it?

Simple enough, you just have to do one simple declaration – or more, based on the number...