Home Web Development Practical Responsive Typography

Practical Responsive Typography

By Dario Calonaci
books-svg-icon Book
eBook $25.99 $17.99
Print $32.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $25.99 $17.99
Print $32.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
About 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.
Publication date:
July 2016
Publisher
Packt
Pages
218
ISBN
9781785884634

 

Chapter 1. Web Typography

Hello! Wonder no more about typography, it's fascinating mysteries, sensual shapes, and everything else you wanted to know about it; this book is about to reveal everything on the subject for you! Typography forms the base of a good written communication—it's an art form in itself, the art of drawing with words. While speaking you set the mood with tone and gesture, with writing nothing is more important than the words themselves and how they are portrayed.

Every letter, every curve, and every shape in the written form conveys feelings; so it's important to learn everything about it if you want to be a better designer.

You also need to know how readable your text is, therefore you have to set it up following some natural constraints our eyes and minds have built in, how white space influences your message, how every form should be taken into consideration in the writing of a text and this book will tell you exactly that!

Plus a little more!

You will also learn how to approach all of the above in today number one medium, the World Wide Web. Since 95 percent of the Web is made of typography, according to Oliver Reichenstein, it's only logical that if you want to approach the Web you surely need to understand it better.

Through this first chapter, you'll learn all the basics of typography and will be introduced to it core features, such as:

  • Anatomy

  • Line height

  • Families

  • Kerning

Note that typography, the art of drawing with words, is really ancient, as much as 3200 years prior to the appearance of Christ and the very first book on this matter is the splendid Manuale Tipografico from Giambattista Bodoni, which he self-published in 1818. Taking into consideration all the old data, and the new knowledge, everything started from back then and every rule that has been born in print is still valid today, even for the different medium that the Web is.

 

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.

 

Typefaces classification


The most commonly used type classification is based on the technical style and as such it's the one we are going to analyze and use. They are as follows:

Serifs

Serifs are referred to as such because of the small details that extend from the ending shapes of the characters; the origin of the word itself is obscure, various explanations have been given but none has been accepted as resolute.

Their origin can be traced back to the Latin alphabets of Roman times, probably because of the flares of the brush marks in corners, which were later chiseled in stone by the carvers.

They generally give better readability in print than on a screen, probably because of the better definition and evolution of the former in hundreds of years, while the latter technology is, on an evolutionary path, a newborn.

With the latest technologies and the high definition monitors that can rival the print definition, multiple scientific studies have been found inconclusive, showing that there is no discernible difference in readability between sans and serifs on the screen and as of today they are both used on the Web.

Within this general definition, there are multiples sub-families, as Old Style or Humanist.

Old Style or Humanist

The oldest ones, dating as far back as the mid 1400s are recognized for the diagonal guide on which the characters are built on; these are clearly visible for example on the e and o of Adobe Jenson.

Transitional Serifs

They are neither antique nor modern and they date back to the 1700s and are generally numerous.

They tend to abandon some of the diagonal stress, but not all of them, especially keeping the o. Georgia and Baskerville are some well-known examples.

Modern Serifs

Modern Serifs tend to rely on the contrast between thick and thin strokes, abandon diagonal for vertical stress, and on more straight serifs. They appeared in the late 1700s.

Bodoni and Didot are certainly the most famous typefaces in this family.

Slab Serifs

Slab Serifs have little to no contrast between strokes, thick serifs, and sometimes appear with fixed widths, the underlying base resembles one of the sans more.

American Typewriter is the most famous typefaces in this family as shown in the following image:

 

Sans Serifs


They are named so due to the loss of the decorative serifs, in French "sans" stands for "without". Sans Serif is a more recent invention, since it was born in the late 18th century.

They are divided into the following four sub-families:

Grotesque Sans

It is the earliest of the bunch; its appearance is similar to the serif with contrasted strokes but without serifs and with angled terminals

Franklin Gothic is one of the most famous typefaces in this family.

Neo-Grotesque Sans

It is plain looking with little to no contrast, small apertures, and horizontal terminals. They are one of the most common font styles ranging from Arial and Helvetica to Universe.

Humanist font

They have a friendly tone due to the calligraphic style with a mixture of different widths characters and, most of the times, contrasted strokes.

Gill Sans being the flag-carrier.

Geometric font

Based on the geometric and rigorous shapes, they are more modern and are used less for body copy. They have a general simplicity but readability of their characters is difficult.

Futura is certainly the most famous geometric font.

Script typefaces

They are usually classified into two sub-families based upon the handwriting, with cursive aspect and connected letterforms. They are as follows:

  • Formal script

  • Casual script

  • Monospaced typefaces

  • Display typefaces

Formal script

They are reminiscent of the handwritten letterforms common in the 17th and 18th centuries, sometimes they are also based on handwritings of famous people.

They are commonly used for elevated and highly elegant designs and are certainly unusable for long body copy.

Kunstler Script is a relatively recent formal script.

Casual script

This is less precise and tends to resemble a more modern and fast handwriting. They are as recent as the mid-twentieth century.

Mistral is certainly the most famous casual script.

Monospaced typefaces

Almost all the aforementioned families are proportional in their style, (each character takes up space that is proportional to its width). This sub-family addresses each character width as the same, with narrower ones, such as i, just gain white space around them, sometimes resulting in weird appearances. Hence, Due to their nature and their spacing, they aren't advised as copy typefaces, since their mono spacing can bring unwanted visual imbalance to the text.

Courier is certainly the most known monospaced typeface.

Display typefaces

They are the broadest category and are aimed at small copy to draw attention and rarely follow rules, spreading from every one of the preceding families and expressing every mood.

Note

Recently even Blackletters (the very first fonts designed with the very first, physical printing machines) are being named under this category.

For example, Danube and Val are just two of the multitude that are out there:

 

Expressing different moods


In conjunction with the division of typography families, it's also really important for every project, both in print and web, to know what they express and why.

It takes years of experience to understand those characteristics and the method to use them correctly; here we are just addressing a very basic distinction to help you start with.

Note

Remember that in typography and type design, every curve conveys a different mood, so just be patient while studying and designing.

Serifs vs Sans

Serifs, through their decorations, their widths, and in and out of their every sub-family convey old and antique/traditional serious feelings, even when more modern ones are used; they certainly convey a more formal appearance.

On the other hand, sans serif are aimed at a more modern and up-to-date world, conveying technological advancement, rationality, usually but not always, and less of a human feeling. They're more mechanical and colder than a serif, unless the author voluntarily designed them to be more friendly than the standard ones.

Scripts vs scripts

As said, they are of two types, and as the name suggests, the division is straightforward.

Vladimir is elegant, refined, upper class looking, and expresses feelings such as respect. Arizonia on the other hand is not completely informal but is still a schizophrenic mess of strokes and a conclusion less expression of feeling; I'm not sure whether I feel amused or offended for its exaggerated confidentiality.

Display typefaces

Since they are different in aspect from each other and the fact that there is no general rule that surrounds and defines the Display family, they can express the whole range of emotions. They can go from apathy to depression, from a complete childish involvement and joy to some suited, scary seriousness business feeling (the latter definition is usually expression of some monospaced typefaces).

Like every other typeface, more specifically here, every change in weight and style brings in a new sentiment to the table: use it in bold and your content will be strong, fierce; change it to a lighter italic and it will look like its moving, ready to exit from the page.

As such, they take years to master and we advice not to use them on your first web work, unless you are completely sure of what you are doing.

Every font communicates differently, on a conscious as well as on a subconscious level; even within the same typeface, it all comes down to what we are accustomed to.

In the case of font color, what a script does and feel in the European culture can drastically change if the same is used for advertising in the Asian market.

Tip

Always do your research first.

 

Combining typefaces


Combining typefaces is a vital aspect of your projects but it's a tool that is hard to master.

Generally, it is said that you should use no more than two fonts in your design. It is a good rule; but let me explain it—or better—enlarge it.

While working with text for an informational text block, similar to the one you are reading now, stick to it. You will express enough contrast and interest while staying balanced and the reader will not get distracted. They will follow the flow and understand the hierarchy of what they are reading.

However, as a designer, while typesetting you're not always working on a pure text block: you could be working with words on a packaging or on the web.

However, if you know enough about typography and your eyes are well trained (usually after years of visual research and of designing with attention) you can break the rules. You get energy only when mixing contrasting fonts, so why not add a third one to bring in a better balance between the two?

As a rule, you can combine fonts when:

  • They are not in the same classification. You mix fonts to add contrast and energy and to inject interest and readability in your document and this is why the clash between serif and sans has been proven timeless. Working with two serifs/sans together instead works only with extensive trial and error and you should choose two fonts that carry enough differences.

  • You can usually combine different subfamilies, for example a slab serif with a modern one or a geometric sans with a grotesque.

  • If your scope is readability, find the same structure. A similar height and similar width works easily when choosing two classifications; but if your scope is aesthetic for small portions of text, you can try completely different structures, such as a slab serif with a geometric sans. You will see that sometimes it does the job!

  • Go extreme! This requires more experience to balance it out, but if you're working with display or script typefaces, it's almost impossible to find something similar without being boring or unreadable. Try to mix them with more simplistic typefaces if the starting point has a lot of decorations; you won't regret the trial!

 

Typography properties


Now that you know the families, you need to know the general rules that will make your text and their usage flow like a springtime breeze.

Kerning

Is the adjusting of space between two characters to achieve a visually balanced word trough and a visually equal distribution of white space.

The word originates from the Latin word cardo meaning hinge. When letters were made of metal on wooden blocks, parts of them were built to hang off the base, thus giving space for the next character to sit closer.

Tracking

Tracking is also as called letter-spacing and it is concerned with the entire word—not single characters or the whole text block—to change the density and texture in a text and to affect its readability.

The word originates from the metal tracks where the wooden blocks with the characters were moved horizontally.

Tracking request careful settings: too much white space and the words won't appear as single coherent blocks anymore – reduce the white space between the letters drastically and the letters themselves won't be readable.

As a rule, you want your lines of text to be made of 50 to 75 characters, including dots and spaces, to achieve better readability. Some will ask you to stop your typing as soon as approximately 39 characters are reached, but I tend to differ.

Ligatures

According to kerning, especially on serifs, two or three character can clash together. Ligatures are born to avoid this; they are stylistic characters that combine two or three letters into one letter:

  • Standard ligatures are naturally and functionally the most common ones and are made between fi, fl, and other letters when placed next to an f. They should be used, as they tend to make the script more legible.

  • Discretionary ligatures are not functional, they just serve a decorative purpose. They are commonly found and designed between Th and st; as mentioned previously, you should use them at your discretion.

Leading

Leading is the space between the baselines of your text, while line-height adds to the notions and also to the height of ascenders and descenders. The name came to be because in the ancient times, stripes of lead were used to add white space between two lines of text.

There are many rules in typesetting (none of which came out as a perfect winner) and everything changes according to the typeface you're using.

Mechanical print tends to add 2 points to the current measure being used, while a basic rule for digital is to scale the line-spacing as much as 120 percent of your x-height, which is called single spacing.

As a rule of thumb, scale in between 120 and 180 percent and you are good to go (of course with the latter being used for typefaces with a major x-height). Just remember, the descenders should never touch the next line ascenders, otherwise the eye will perceive the text as crumpled and you will have difficulties to understand where one line ends and the other start.

Information hierarchy – giving order to your text

This is important in a text because it helps the reader understand the order of the text, what's more important, what's regular text, what requires attention, and also with the use of descriptive titles it helps him skip entire parts of the text that are of no specific interest.

To achieve the aspect of a title and of a sub-title, different sizes and weights are used between the two parts. We generally prefer to triple the dimension of the actual text and go with the corresponding leading directly above it; if a subtitle is present, leading can be adjusted from 100 to 110 percent.

Alignments

This book is written in English, actually aiming at the western cultures, which we tend to read and write from left to right; hence, the alignment of it's type follows the same direction.

It depends on your culture and whom your text is aimed to. It also depends on the general aesthetic that you're trying to achieve and usually compromises between the two needs to be fulfilled.

Scientifically speaking, centrally aligned text is the weakest from a readability point of view: your eye can't find a consistent starting and stopping point. So, every passage will automatically adjust every new line in an instant; it's a subtle but catastrophic step, since the focus will be shifted from the word to the general picture. People tend to be easily distracted when reading a text that is centrally aligned.

So, both left and right edges are good for typesetting; it depends on your language and aesthetics.

Rag

It's a term and a direct consequence of your alignment; it's the uneven vertical edge in a block of type.

A good rag goes in and out from the margin in small increments; while a bad, distracting one creates distracting shapes.

This can be managed by manually adjusting line breaks or by editing the copy:

Justification of text

It deserves a separate paragraph from the alignments, since every feature and every defect can be made visible with an aligned text; when the same text is justified, it tends to be exaggerated. It can be full, left, right, or centered with the terms referring to the alignment of the last line of text.

It's a common type of text alignment in print, where the spaces between words are stretched or compressed to align the left and right edges of the text equally.

This commonly gives birth to various issues, as a loose line where the space is just too much, or a tight one, where the text is too crumpled.

The centered one especially gives birth to rivers, which are gaps in the text that appear to run almost vertically and are bad for readability, since they distract the eye.

One good test for you to discover rivers in your typesetting is to take the paper or the text and rotate it by 180 degrees, turning it upside down.

Doing so will make the words and text less easy to be recognized by the brain, which will now concentrate more on the actual shape of your paragraph, instead of its meaning, which will allow you to see them better.

 

Summary


The preceding text covers the basics of typography, which you should study and know in order to make the text in your assignment flow better.

Now, you have a greater understanding of typography: what it is; what it's made of; what are its characteristics; what the brain search for and process in a text; the lengths it will go to understand it; and the alignments, spacing, and other issues that revolve around this beautiful subject.

The most important rule to remember is that text is used to express something. It may be an informative reading, may be the expression of a feeling, such as a poem, or it can be something to make you feel something specifically.

Every text has a feeling, every text has an inner tone of voice that can be expressed visually through typography. Usually it's the text itself that dictates its feeling – and help you decide which and how to express it.

All the preceding rules, properties, and knowledge are means for you to express it and there's a large range of properties on the Web for you to use them. There is almost as much variety available in print with properties for leading, kerning, tracking, and typographical hierarchy all built in your browsers.

We'll start to explore them in the upcoming chapters.

About the Author
  • Dario Calonaci

    Dario Calonaci is a published author, correspondent, and professional advisor as well as design writer and reviewer for many publications, both print and online. Having worked on projects for The Ritz-Carlton and on Obama for America '12, The United Nations Rio+20 Conference, he's a well-known expert in the field of typography, which made him start teaching that and web design in his early twenties! As a member of various international groups, his art has been published worldwide in a plethora of books and magazines, from Phadon to Zeixs, and has been exposed in many openings, from New York's Times Square to the Senate Library in Rome. He runs his own design firm at Kerned Studio in Florence for clients such as Gucci, Calvin Klein, and Berni among many others. You can take a look at his work on www.kernedstudio.com and www.dariocalonaci.com.

    Browse publications by this author
Latest Reviews (1 reviews total)
Covers so much more than I had realised!
Practical Responsive Typography
Unlock this book and the full library FREE for 7 days
Start now