A Typography Workshop

Front-end development is a tricky business and it can be a very ungrateful job. A developer that has studied engineering or computer science does this kind of code easily but, by the end of it, there are always way too many details to correct and, yes, they often concern typography issues.

This is because there's a clear discrepancy between the designer’s expectations and the developer’s perception of the work being done. In other words, generally speaking, the designer sees a bunch of things that the developer doesn’t.

Prototyping apps have definitely helped with the comprehension of the structure of pages, and some have even helped understanding what kind of motion transitions or interactions we'll need. Sketch, for instance, has definitely helped the designer in delivering all the information to the developer: from sizes, to fonts, to color codes, it’s all there.

And still, the designer looks at the work that the developer has produced and the corrections start pouring: “This typeface doesn’t have the right weight”, “This title should be uppercase”, “The character spacing is wrong”, and so on.

Based on my experience, most of the corrections being done are text related. Everything else is less technical and more understandable on a basic empirical level, but not typography.

There’s a lot to it, entire courses dedicated to its design and usage, so it’s very unlikely that one will just look at the font and immediately know what to do to it, to make it look whatever specific way the designer has decided.

This is why I decided to make a typography workshop.

1. The Character

Before I get into any of the explanations, it’s important to understand how the letter works, what’s its relation to its mates and how does that affect the word, the sentence and the paragraph.

1.1. Fonts, Typefaces and Type Families

Basic notions that are good to have and make it easier to talk about typography:

  • A typeface is a set of typographical symbols and characters;
  • A font is a complete character set within a typeface, often of a particular size and style;
  • Type families are groups of typefaces with related designs.

Helvetica Neue

1.2. Anatomy of Typography

A letterform will share common characteristics with its fellows within the same typeface. These characteristics are based on sizes and proportions of the same basic anatomic features that concern all western characters.

I thought it would be interesting to list them, but not with the intention of having them memorized, because the naming will not make that much of a difference in the day to day life of either the graphic designer or developer.

I'm listing them to know what to look for when trying to compare typefaces, and to better understand the variety of functions different fonts can have, based on their anatomy.





Anatomy of Typography

1.3. Classifying Type

Based on these technical/structural features, interpretational definitions, or even historical context, there are classifications for type. Here are some:




Type Classifications

The most commonly used and relevant code-wise are the famous Serif and Sans-Serif. The reason why these two are the most important distinction to be made, is because its core defining feature is objective and very visible, if one knows what to look for.

Serif / Sans-Serif

The Sans-serif was created by removing the serif - “sans” meaning “without”. This style adapted to printing was created for its clarity and legibility, which was useful for displays and advertisements. Plus, it was easier to print in very large sizes.

On the other hand, the Serif type is said to be the best choice for long text, such as the one found in books or newspapers. This is arguable though, since a lot of what would make this entire type family more readable, can also turn against itself, depending on some basic features of the individual typeface - I’m pretty sure a Didot, even though it's a Serif typeface, will be worse than Lato, for example, for long text readability.

This is because Didot has a high contrast between horizontal and vertical lines, which creates a lot of noise and “bumps” in the reading flow, whilst Lato presents a more even proportion between the different lines of the letter, making it a better option than Didot. It’s not a perfect option, but you get the gist.

The important thing to understand about these two different styles of type, in order to know which ones are best for what, is the function of the serif. Its function is easier to understand, if one knows its history.

2. The When’s and the Why’s

This video briefly explains the history of typography, quickly and to the point.

Before all of this, before we - mankind - were even considering using metal pieces to create words and press them against paper to be able to create books faster. Before we even considered the idea of a book, paper, or even text, for that matter, we were already creating visuals to communicate.

Lascaux Paleolithic Cave Paintings

Thousands of years of evolution made more complex forms of visual communication a necessity, hence alphabets. But these were not born out of thin air, they were the result of their own mutations and adaptations. I find the history of the letter “A” a very straightforward example of how most letters’ evolution came to be.


Evolution of the Letter "A"

Different civilizations came and went, meanings and sounds were established - some mutated, some didn’t - and the ox/cow head was increasingly simplified, rotated, geometrically perfected by romans to be carved on monuments, written and embellished by monks, hand-distorted for faster and better flowing writing and finally, picked up by typographers.

So to resume: the primordial birth of the Serif came from the need of fast writing and connection between different letters. When reading became a thing for more than the clerk and the monarchy - better reading was also a requirement, and that’s when the Serif started being used for that purpose. Now you know.

Then came typography.

3. The Paragraph & the Consequential Page

As there was an increasing consciousness on readability of the typeface, its usage and disposition was also a target for more attention and carefulness.

3.1. Line Spacing

Something as basic as the Line Spacing - which is directly influenced by the typeface and its size - will influence the entire page. The creation of grid systems helped consolidating rules that make it easy for any designer to create readable text and balanced pages.

Line Spacing - line-height in CSS - is, by the way, the vertical distance between different lines of text. This spacing can be the make or break of any text area, because making it too small or too big will result on skipping lines or reading them over and over again (everyone’s been there, and no, it’s not your fault).

There’s an optimal size for this spacing, which is usually between 120% to 145% of the text size. But just in case you need to figure out a solution yourself, you can keep in mind the following:

Line Spacing Example

Try and draw an imaginary line across the middle of the lines, without bumping against any descenders nor ascenders. If it goes through, clean, that should be good.

Line Spacing Example

3.2. Line Length

Mind also the length of the lines in the following image. The modules that were built off of the line heights are usually pretty small comparing to the size of the typeface, not by chance, but because it gives the designer more flexibility when organizing an entire page, allowing for bigger or smaller text areas, whilst always keeping a good, proportional distance between different elements.

Line Lenght Example

The Grid System

Also, shorter lines mean better readability.

There’s actually a good measurement for the length of the lines, which is usually around 50 to 75 (tops) characters, including the spacings. There’re a bunch of good reasons for this:

Lines that are too short will force the reader to break the flow too often, by having to go back when changing line. This might cause readers to also skip some important words at the end of the line, amidst the angst of constantly going back and forth - sounds stressful, right? It actually is.

On the other hand, lines that are too long are harder to focus on, because it’s more difficult to immediately see where the line ends, creating an anxiety to switch at any moment. Plus, when the reader switches line, it’s also more likely that he/she will move on to the wrong one, because it’s harder to tell where the line started in the first place.

Turns out that the focus of the reader is higher when starting a new line, and it wears off when moving on until reaching the end, so there’s a very tight balance to maintain. Hence the 50 - 75 characters interval as a rule of thumb.

3.3. The Responsibility of Typography

Overall, these are some of the most important things to keep in mind in what readability is concerned. But if you wish to have a good source of basic knowledge in what comes to typographical expression, the documentary “Helvetica” is your go to.

Throughout the documentary, you'll get an explanation of the thought process behind the new design being done in the 50’s and how it created a consciousness based on social responsibility - hangover from WWII. You’ll also get a glimpse of some of the really interesting design being done at the time, and an introduction to the origin and purpose of the famous Helvetica typeface.

Also, you'll be able to understand the stark contrast between the advertisements being done pre and post International Style, and the pragmatic implications it had on the way visual communication was/is done.

4. “Do’s”, “Don’t even’s” & “maybe it will work, just try it”

There’s a bunch of other things that are relevant to know, and I’m going to list them next, but do keep in mind that there are exceptions to these general guidelines, depending on the role typography has in whatever you will be doing.

Like when words end up isolated. Be it at the end of a paragraph or at the beginning of a text column. It looks really ugly and they even got a name - orphans and widows - yikes. But, in all fairness, it’s not so easy to avoid these when working with responsive design, so there’s only so much that can be done. Same goes for “rags” and a bunch of other ugly-named typographical situations that I didn’t find necessary to mention.

Orphans
Rags

Another clear “do” or “don’t”, this time easier to control, is character spacing, this is, the space between characters. Make it too tight or too long and legibility in long text will be clearly compromised.

Character Spacing Example
Character Spacing Example

Already short text or displays can benefit from some stylization, depending on the mood you’re going for.

Character Spacing Example

Whatever you do, though, do not distort your text manually. You need a horizontally wider text? Look up “extended” typefaces. Taller, more impactful typeface is what you’re missing? Go for “condensed” types, there’s plenty to pick from.

But when you manually distort a typeface, all sizes within the character become unproportional and the result will be just terrible looking.

Distorted Typefaces

Same goes for angling your typeface to get an “italic” effect. It doesn’t always necessarily end up looking bad, but there’s plenty of good alternatives.

There are well-designed italic fonts, that don’t just consist in angling an existing typeface. They have their own set of proportions that make sure its legibility is maintained and that it can still be used alongside its regular version in a harmonious way.

Italic Fonts

Alright, am I a pro, now?

There’s a lot more to be said and a lot more to be learned. But, at the same time, these are pretty much the very necessary basics for one to understand what to look for when transforming typography into code.

Next time you are doing front-end you’ll have the routine more or less figured out: “Text-transform?” Check. “Character-spacing?” Check. “Line-height?” Check. “Is this a serif or sans-serif?” Now you know. “Wait a second, this is a bit weird, should this typeface be used in a menu?” Too soon, too soon.

Further reading: Line Length Readability; Line Spacing; A Crash Course in Typography: The Basics of Type; A Crash Course in Typography: Paragraphs and Special Characters.

Author's Note: This post was originally published in March, 2016 and has been updated for accuracy and comprehensiveness in May, 2018.

At Imaginary Cloud, we simplify complex systems, delivering interfaces that users love. If you’ve enjoyed this article, you will certainly enjoy our newsletter, which may be subscribed below. Take this chance to also check our latest work and, if there is any project that you think we can help with, feel free to reach us. We look forward to hearing from you!