Corrections on printouts of ITC Officina Display by Erik Spiekermann
After reading the first episode An Introduction to Type Design | The Type Designer as Artist I think we can all safely agree to the consensus that first and foremost a type designer needs to be a creative person, an artist. Although this already is a crucial requirement, it is not by far sufficient if one wants to create a decent typeface. This may sound very hard to believe, but one could argue that coming up with a beautiful design is about the easiest part in the development of a computer typeface.
Different glyphs for the characters ‘a’ and ‘g’ in Dalliance by Frank Heine
Top row left to right: regular ‘a’, alternate single-storey ‘a’, small cap, superscript
Bottom row left to right: regular ‘g’, small cap, two swash ‘g’s
Before I go on, a small explanation about the difference between the terms ‘character’ and ‘glyph’ I will be using throughout the article. In digital typography a glyph is a specific representation of a character. For example within one typeface the character ‘a’ can be represented by different glyphs – a ‘regular’ lowercase ‘a’, a small cap ‘a’, an upperscript ‘a’, a swash ‘a’, a single-storey alternate ‘a’, … All these glyphs look different, but they all represent the same character ‘a’.
The anatomy of a typeface
You might know what a letter ‘a’ looks like, but do you know how to properly draw one, technically? To use a metaphor – I can perfectly describe the different parts of a shoe and know how they fit together, but I couldn’t make a shoe to save my life. The same applies to typefaces.
A freeware font like Dream Orphans is a perfect example of a poorly drawn typeface. Besides the fact that the overall design tries hard but ultimately fails, the actual drawings of the glyphs are littered with mistakes. As you can see the bottom of the bowl of the ‘a’ is too high, the lower left part of the curve flattens unexpectedly, while the top left part has a nasty bump. Both the thinning of the top of the curve and the spot where it joins the stem are very awkward. And there’s another bump where straight line transitions in the top curve.
Glyphs are drawn using Bézier curves, and because those react in a very specific way you have to master them perfectly to obtain the desired shapes. You have to know where exactly to position Bézier node points, and how ingoing and outgoing curves relate to connecting curves or lines. Also there are many different ways to draw one and the same character shape. You would be surprised to learn how many typefaces barely have a straight line in their design. Sometimes corners reveal themselves to be rounded when examined from up close. And even apparently curved shapes can be built entirely with straight line segments.
As we can see in this example of FF Nexus Serif by Martin Majoor, apparently similar shapes can sometimes be quite different from each other. The top row shows the correct glyphs for the ‘b’, ‘d’, ‘p’ and ‘q’. In the bottom row the first three were rotated and/or flipped to look like the ‘q’.
All characters are related to each other, and they have to work together in harmony. For this to happen the design needs to strike a delicate balance between similarity and difference. Similarity as in a coherent design; difference meaning the glyphs must be easily and unambiguously distinguishable from each other. However this similarity can be deceptive, and subtle adjustments constantly need to be made. It would make the type designer’s life a lot easier if a ‘q’ simply was a rotated ‘b’ or flipped ‘p’, if an ‘m’ could be created by welding two ‘n’s together and if it sufficed to add a tail on a ‘P’ to obtain an ‘R’. But unfortunately it doesn’t work that way. The ‘u’ must be slightly narrower than the ‘n’, descenders are shorter than ascenders, serifs under bowls are longer than the opposite ones – the list goes on and on.
A trick of the eye
Then there is that bizarre factor called optical illusion that enters the equation. One could devote a whole book about this phenomenon. A monoline geometric typeface usually has nothing to do with mathematically correct geometry and is anything but monoline. The best modular or grid-based designs take certain liberties with the module or grid. The optical centre never coincides with the mathematical centre, and related shapes need to be drawn differently for them to look the same.
When tilting the cap ‘O’ from a geometric typeface one can clearly see that its shape has been carefully adjusted. It may look perfectly circular but it certainly isn’t.
Turning the cap ‘H’ from a geometric typeface on its head reveals that the centre bar actually has been slightly raised to make it look centred.
When making the strokes and bowl of the characters of a geometric typeface perfectly parallel and geometric the optical adjustments become apparent.
To make capitals of varying shapes look of equal height triangular and circular shapes need to extend above and below the baseline and cap height. This is called overshoot.
Another aspect to be dealt with is trapping. Wherever two strokes or a stroke and a bowl connect two things happen. On the one hand an optical illusion creates dark blots at joins, which is very distracting. On the other hand when physically printing a character ink builds up in sharp corners and at joins, creating an actual ink blot. This means all connections must be delicately cut out to prevent this from happening. Yet there are a number of typefaces like Amplitude and FF Hydra that exaggerate these traps and incorporate them as artistic devices.
Bell Centennial (right hand side) was designed for telephone books – to be used in very small sizes on poor quality paper. Exaggerated ink traps were added to prevent ink buildup inside corners.
Of course trapping always needs to be done in relation to the intended size the typeface. If a text face designed for use in very small sizes is enlarged to display size, the ink traps become glaringly obvious and even disturbing. That is one of the reasons why some typefaces are released in several size masters, from Caption (6 pt) over Text (9–12 pt) and Subhead (18–24 pt) to Titling (48 pt and up) and Display (72–96 pt and up). Other differences are sturdier serifs, wider proportions, larger x-height and looser fit for Text versions, while Display sizes typically are more refined with a higher contrast between thick and thin, longer ascenders and descenders and a tighter fit.
Adobe’s Warnock comes in four size masters: Caption, Regular, Subhead and Display. When set at the same size one can clearly see how the design gradually becomes more elegant and delicate, with higher contrast and a tighter letterfit. If the Display size were printed in small sizes, the fine serifs would become barely visible and the high contrast would make the lettershapes disintegrate.
Too many glyphs
Suppose you fully master drawing type, then there’s the sheer amount of glyphs to draw. You might think, okay, there’s the alphabet in capitals and lowercase, so two times 26 is 52. Adding the 10 numerals brings us to 62, then some punctuation and change, so let’s say 70 to 80? Wrong.
Selection of the basic character set in FF Kievit by Michael Abbink & Paul van der Laan
Most end users don’t realize this, but drawing a full character set for one single weight involves far far more than just the alphabet, the numerals and some punctuation. Fair enough, most accented characters don’t need to be redrawn from scratch, and bits and pieces can be reused, especially when it comes to punctuation and such. That doesn’t take away from the fact that every single glyph needs to be created one way or another.
Accented characters in FF Kievit
The glyphs in a ‘regular’ PostScript Type 1 font already number around 240. A Standard OpenType font clocks in at 350 to 500 glyphs, while an OpenType Pro font equipped with Greek and Cyrillic often reaches the 900 glyph mark. Now you have to realize that’s just one single weight we’re talking about. Add an Italic, a Bold and a Bold Italic – a measly four weights, considered to be the minimum requirements for a text face – and already there’s a little under 1000 to up to 3600 glyphs to create. For a larger family with additional weights and widths… well, you do the math.
Cyrillic and Greek characters in FF Kievit
The mythology of interpolation and digital distortion
Now that we’re talking different variations and weights, can’t the computer take care of all that? Isn’t it possible to start with a very light and a very heavy weight, and subsequently interpolate the intermediary weights? After all, that was what Adobe’s Multiple Master format was all about. Well, there’s a major hitch. First, creating extreme weights for interpolation is an extremely complicated and laborious task, which only seasoned type designers are capable of pulling off. The Bézier node points and curves must be positioned in such a way that every single instance of the font looks good. Second – oh irony – the weight the designers actually shoot for is not those extremes but a regular which is an interpolation of an interpolation. As a result the extreme weights in Multiple Master fonts never live up to their potential; they always look quite tame.
In practice interpolation can be used when designing new weights, but those interpolated fonts need to be revised thoroughly and extensively.
All 42 instances of FF Clan by Lukasz Dziedzic, left to right Thin, Book, News, Medium, Bold, Black, Ultra and top to bottom Compressed, Condensed, Narrow, Regular, Wide, Extended
When it comes to italics, in this previous post I showed that they look very different from roman faces. However obliques – often found in sans faces – look just like a slanted regular. And condensed or extended faces appear to simply have been squooshed or stretched. Alas it is not that simple. When digitally distorting type, serious problems appear in the weight of stems, in the curves, in the proportions. So even the most deceivingly simple oblique, condensed or extended faces need to be properly designed.
Frutiger by Adrian Frutiger
Left: Regular | Centre: digitally slanted Regular | Right: properly designed Oblique
Frutiger and Frutiger Condensed by Adrian Frutiger
Left: Regular | Centre: digitally condensed Regular | Right: properly designed Condensed
More than just a collection of glyphs
I reckon you now realize what an arduous task it is to design a complete glyph set for a single font, let alone a full family in different weights and variations. But once that’s over with, we should be home free, no? You wish. That’s when the real fun starts, as all these glyphs must be spaced and kerned to function properly as a font. But this is for the next episode.
|
|
 |
|
|
|
|
Thx for the introduction. I never thougt about types in that way.
|
|
 |
|
Nice one, Yves. Looking forward to the next sequel.
|
|
|
|
Great article, Yves. Must have taken a lot of time (so, that accounts for the interlude?), Hat of to ya!
|
|
|
|
Thanks for this font-introduction. Very good!
|
|
|
|
Een to the point en glasheldere uiteenzetting. Ik buig nederig het hoofd en doe m'n typohoedje even af.
|
|
|
|
You're very welcome -- I'm glad you like it. Yes, these bigger, more in-depth articles and reports take a little more time, and especially when I need to make the illustrations myself.
|
|
|
Hi, excelent post series. How is the autor?
Saludos desde Chile.
http://www.uniondelostipografos.org/
|
|
|
|
I am the author -- all articles on Unzipped are written by me (except a press release here and there). Click ::WELCOME:: at the top in the right hand yellow column.
|
|
|
|
Amazing! Where can I study to become a professional type designer?
|
|
|
|
I'll see if I can work up a list and post it here.
|
|
|
|
I've been enlightened. Thank you!
|
|
|
SEARCH ARTICLES
MOST RECENT COMMENTS 
:: WELCOME ::
EXCLUSIVE FONTS
FREE MAGAZINES
INFORMATION
MY TYPE OF MUSIC
NEW & NOTABLE
NEWS
OOPS!
PARTICIPATE
PROMOTION
SCREENFONTS
TIPS & TRICKS
TYPE IN USE
USELESS BEAUTY
 Youtube
 Flickr
 Facebook
 Twitter
 Hyves
 Netlog
FontShop België
Baron De Gieylaan 41
9840 De Pinte België
FontShop Nederland
Postbus 309
4560 AH Hulst Nederland
T +32 9 2202620
F +32 9 2203445
E info@fontshop.be
mail the webmaster
 rss feed
 made by group94
  
|
