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

Media queries for responsive design

After a mandatory introduction and overview, it's time to see what can be achieved using media queries today – and where they fit our process as responsive designers and developers.

Turns out they are the most powerful weapon inside our arsenal. Let's see them together.

Using the regular, standard compliant syntax, we can set up custom rules, called break-points, in our standard CSS without additional sheets.

When the content encounters those rules – the most common one being tied to the dimension of the screen – the layout/behavior of your website/element will change accordingly.

Let's start with something simple:

  background-color: red;
@media only screen and (max-width: 500px) {  body { 
    background-color: lightblue;  }}

This code – which can be written anywhere in your CSS – simply tells the browser to render the background in a light blue only when the screen is equal or less to 500px.

This is the situation when the page is first loaded:

And this...