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

Developing your knowledge

From now on, I will be guiding you within the beautiful world that a word is and how it is expressed visually. You won't need anything more than your curiosity and an open and receptive mind.

No software, no technology unless you're reading this book on a screen and even in that case, you're ready to go!

How good is that!

Anatomy of the character

In this section, you will learn the terminology and structure of a letter. Knowing the what and where will make you a better writer and more importantly, a better reader. You'll start recognizing other people's mistakes, the world is full of them

The following points are the real foundation of writing, what lies beneath the splendid coherent surface of a text:

  • Apexes are the points at the top of a character where the left and right strokes meet.

  • Arms and legs are short strokes that extend from the main body, in all directions. The arms point upwards while legs are attached to the bottom, both of them are present on a lowercase k.

  • Ascenders are truly important to the text and are segments that extend past the lowercase character x-height. They are clearly visible in b, d, f, h, k, l, and t.

  • Bars are segments connecting the left and right portion of a character. A, H, R, and f have them and they rarely extend past the body.

  • The baseline is the line where the character stands, and as an optical correction letter curves often extend pas it, to visually balance the height.

  • Bowls are curved strokes that define a space within the body.

  • Cap height addresses the measure of capitals, from baseline to top. Its better to measure them starting from a very flat bottom.

  • Counters are the sections of space, semi or completely enclosed, within the body of the character.

  • Descenders are the part of a character that descend below the baseline, as the g bowl for example.

  • The ear is a small stroke visible on lowercase g, extending on the right of the bowl. They are not merely a decoration, they help with tracking and readability.

  • Finials are curved ends, such as the ones in some lowercase e.

  • Hairline is a section in the middle of some serif characters where the stroke is relatively thinner.

  • Links are the little strokes that connect the top and bottom bowls of some fonts of g, such as Times New Roman.

  • Loops are the bottom bowls of some font styles of g.

  • Serifs are the endings, non-structural decoration present on some typefaces. They can be bracketed with a supportive curved connection or un-bracketed, whereby a straight connection is made at ninety degrees.

  • Shoulders are the curved strokes that are attached to the stem.

  • The spine is the main curved stroke of the S.

  • The Spurs are small projections of the curve in capital G.

  • Stems are the main, vertical, or diagonal strokes in a character; basically, the main foundation.

  • Strokes, which we referred to previously, are nothing more than a curved or straight segment in a letter.

  • Swashes are flourishes or decorations that sometimes replace serifs.

  • Tails are descending strokes of R or Q.

  • The terminals are the end of the stroke that is not terminating with a serif, such as the upper one of the small f.

  • X-height is the main referred height in every typeface, especially for the lowercase x because of the flat bottom and upper area without ascenders or descenders.

    Image courtesy - TheTypeStudio

Typeface or font? A guide to the distinction

After seeing each character on its own, lets look at the bigger picture:

  • Typeface: A typeface is a set of symbols, numbers, or letters that define the family.

  • Font: A font on the other hand is the complete character set within a style and a particular weight of that typeface.

Typefaces are made of multiple fonts, which are made of multiple characters.

As of today, whereas type is laid principally on screens and not on paper, this distinction practically merged the two terms into the generic font one. Old printing and typesetting machines used letters carved out of metal imposed on woodblocks that needed to be covered in ink and then pushed on paper, leaving a trace. For this reason, each letter was unique and had to be made from scratch, for each weight and style within the same typeface. While your font may have 512 glyphs that weigh a certain kilobytes, the original handmade version had 512 physical blocks, (one for each letter), that weighed kilos. Therefore, with so many objects around that needed to be ordered in some way and so the division between style set and the complete typeface was born.

In addition, the same story of moving blocks gave birth to almost every other typography related terminology that we use today, even in the digital age. They will be addressed later in this topic.