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.
Basic notions that are good to have and make it easier to talk about typography:
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 memorised, 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.
Based on these technical/structural features, interpretational definitions, or even historical context, there are classifications for type. Here are some:
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.
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.
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.
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.
Different civilisations 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.
As there was an increasing consciousness on the 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 to consolidate 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 in 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:
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.
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.
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 are 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 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.
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.
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. The same goes for “rags” and a bunch of other ugly-named typographical situations that I didn’t find necessary to mention.
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.
Already short text or displays can benefit from some stylisation, depending on the mood you’re going for.
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 disproportionate and the result will be just terrible looking.
The 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.
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.
At Imaginary Cloud we have a team of experts on UI and UX design. If you think you could use some help with design, drop us a line here!
Found this article useful? You might like these ones too!
I'm UI & product designer, illustration artist and painter. Known for my love of trashy beach towels, music production, typography and all kinds of pizza.
People who read this post, also found these interesting:
.png)
