What Developers Need to Know about Fonts and Typography
One of the important choices for a developer is to decide what not to drill down into. How text fills a space, why sometimes it looks wrong or how to make a paragraph stand out is clearly the province of graphic design. Frankly, text usually looks pretty good on apps and the web these days, precisely because graphic designers have more input into the development process than they used to.
In this post I’ll just go over what developers and frontend engineers should be familiar with in the world of fonts and typography, to aide common understanding as well as to make unfortunate edge cases less of a surprise.
Back in the day, printing was kind of the first social media revolution. In the 17th century, the appearance of flyers, scandal sheets and pamphlets printed from a dark basement was the first time state information could be informally challenged by individuals.
Typesetting was the job of stacking up lead letters into the order needed, before inking and printing.
During this time, movable type was composed by hand for each print job by compositors. Each of those sections in the image above contained the same cast metal letters or symbols, all reversed. The compositor assembled these into words, then lines, then pages of text — all backwards. Ink was applied to the type, and a sheet of paper was laid on top and pressed together to form a pamphlet that could have everyone involved hanged, if its contents were too spicy. To work, all the letters had to be the same height and style. Like many things with a lengthy history, some terms still in use today refer to this long dead process.
Typeface vs. font
The actual printing blocks used by those original typesetters belong to a font. The style of the text, however, is generally thought of as the typeface (or just “face”). If you want to get OO about it, a font is the instance of a typeface.
So for example, in this diagram below, “Roboto” is the typeface, whereas “Roboto bold” is a particular font:
Sometimes a typeface is called a font family.
The individual characters are known as glyphs. For example, the character “a” may be represented by two different glyphs:
So a modern font maps Unicode character IDs to their glyphs. Hence a font includes a database of glyphs.
Leading and Kerning
Leading (pronounced like the element “lead” because it comes from the strips of lead used by those original compositors between each row; you can just about make them out in that picture above) is the distance between two lines of text, baseline to baseline. Presentation systems will often refer to this as “Line Height”. Tweaking this can make your long text fit in their boxes, or make the text look quite wrong. Worse, until you see lines with enough clashing ascenders and descenders, you might mistakenly think it is ok.
But with CSS, making small changes to particular elements can be done by percentage, which allows for fairly safe fiddling:
|
1 2 3 |
div.c { line-height: 80%; } |
The term tracking is used to describe the process of proportionally spacing out all the letters in a word:
But kerning is the letter spacing between certain pairs of letters that the human eye just likes. Again, these qualities were discovered by the first typesetters on their hot metal presses.
These differences are important yet unpredictable. The reason they matter to engineers is that occasionally, we like to use non-proportional fonts (like Courier) in order to get a terminal-like look, with fixed spacing that might be convenient, yet we forget that the resulting text may be unreadable. We all recognize the letters “www”, which is just as well because in a non-proportional font it often just looks like three people drowning:
|
1 |
www |
Note that this is different from justification, which uses space between words to stretch a line so that it fits flush against one or both margins:
Mostly we read text aligned left with a ragged edge, although newspaper columns can still be fully justified. Justification can give a cleaner, more formal look overall, even if the space interruption looks odd. Typesetters can also put space between the letters in words (hence the need for tracking) to enhance the effect.
Serif vs. Sans Serif
So let’s get the easy bit out of the way:
A serif is a decorative line or taper added to the beginning and/or end of a letter’s stem, which creates small horizontal and vertical planes within a word. That is “feet” or “tails”
And my high school French is good enough to work out that “sans serif” means without these tails.
Now from a design point of view, serif fonts look “old and established” whereas sans-serif fonts look “modern”. So authoritative newspapers like to keep to serif fonts (Times refers to both a font and a newspaper) whereas most websites like the space left between sans-serif faces such as Arial or the original Helvetica.
But beware, those feet and tails can also help with comprehension. Here is the much-maligned “Comic Sans MS” font found in the Paintbrush application:
Look closely at these capitals. It clearly has two letters with serifs, despite its name. Why?
Notice the difference between the word “ill” starting with a capital in a modern Arial face and the same word in ComicSans MS below it:
That is certainly some unfortunate ill behavior.
Fonts Are Engineered too
A font is software that is made up of both data and code, both of which interact with each other, as well as with the applications and operating system in which the font is installed. Like all software, it can fail unexpectedly or work poorly on untried platforms. Because screen design is very good these days, it can be forgotten why that is; a lot of hard work. You should appreciate the way I can just copy and paste Русский язык, and because of the Unicode (an information technology standard), browser technology and screen engineering, it will very likely just be correct as you read it. Engineers often treat their own code carefully when in a new environment, while assuming the font will “just work”.
But yes, fonts can have bugs. A font engineer can look at the way a letter looks in a certain resolution, and realize that it needs adjustment. That is why it is best not to simply choose random font sizes. Try and stick to a small set. You will note that font sizes like 8, 16 and 24 are ever-present.
As an engineer, you will want to deliver the designs you are given, while giving fair warning about the risks and enhancements available when changing environments. If you are working in a new operating system, a new screen system or without a browser, you need to appreciate that the usual pipeline may not be available for you to drop in a ready-made solution.
Modern typography has moved on a lot since hot metal, but it is still just technology.
