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

A Sass generated responsive grid

We are starting by making a partial Sass file, let's call it _variables.scss and start by writing simple variables that will define the number of columns and their max-width, as well as the breakpoints:

$grid-columns: 12;
$grid-max-width: 65em;

$breakpoint-small: "only screen and (min-width: 20em)";
$breakpoint-medium: "only screen and (min-width: 30em)";

Time to write some mixins, for example for a border-box property which we assume still isn't unified by the various vendors.

And for the sake of this tutorial, we are going to save the mixins in a different file, called _mixins.scss.

@mixin border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 

Time to really write up the Sass for the Grid, so we create a grid.scss.

Our document structure will look like this:

We now import our variables and mixins in the document through the following simple code:

@import "variables";
@import "mixins";

We start writing...