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

Sass Mixin for easy responsiveness

While in the above steps I detailed and attached a quick, fast modular scale with Sass – I'm going to gift you with an easy Mixin for typography so it becomes real-time responsive, enlarging it, and becoming increasingly small while you manage the width of your browser.

The first thing is defining our breakpoint variables: I'm just using random values, feel free to change them as you like:

$breakpoints: (
  'large'  : ( max-width: 600px ),
  'medium' : ( max-width: 400px ),
  'small'  : ( max-width: 300px )

Then I'm declaring a font size value, a Golden Ratio scale and a line height-value (which I almost always forget to set, but I truly love the look and feel it gives to type):

@mixin type-size($sizeValue: 1.6, $lineHeight: $sizeValue) {
  font-size: ($sizeValue * 10) + px;
  font-size: ($sizeValue / 1.6) + rem;
  line-height: ($lineHeight * 10) + px;
  line-height: ($lineHeight / 1.6) + rem;

Then I'm going to declare the mixin that will make the magic...