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 viewport concept

First, we need to understand one simple thing: the visible area of the screen, which is called viewport. Of course, it varies from device to device, and obviously, working with measures directly related and strictly linked to it seems like a good idea.

Its first widespread notion and implementation came with the introduction of HTML5 standard, which added a <meta> tag specifically for it.

Metadata is information about the data on the page. It is usually related to language, SEO aspects, and description of the content among other things. While not clearly visible on the page, this data is read and used by machines—they always are inside the head element.

The metadata viewport is expressed by the name (="viewport"), the width property, and the initial-scale of one.

Of course, those properties can be set to whatever amount you want them to be; you can set the width to be a fixed one and the page to be zoomed in or out (initial-scale), but the well known, worldwide approach...