Ted Goranson - Personal Blog

The blog of Ted Goranson. This is both a personal blog and an ongoing update on his projects.

Our Typeface Considerations

Published: 27 Mar 2013
Revised: 2 May 2013

This is one of a few posts on the design of the site. It is probably the easiest one because the resulting decision is to do nothing, (for the time being) so far as this site, painful as that is. Other posts will be on layout, equations and diagram styles. This one is about font families.

Background

Retina screens reset the Kutachi font problem.

I am convinced that the typeface used to present written information affects the perception of that information, and in some cases the effect can be profound. Graphic designers know this of course. It is the reason there are so many custom designed fonts. Some time ago, we conducted a number of experiments on screen fonts and developed special font displays for the presentation applications we were then using. I think elsewhere in some open article we reported on some of the techniques we used, primarily in honking around with the antialiasing algorithms and animating them in some cases.

I don’t have the programing resources that I had then, but I have the knowledge and the need. We are designing a new generation of tools here and the fonts will matter.

The trigger for my re-examination is that Apple’s retina screen hardware (which you really should have) makes anti-aliasing irrelevant. The font on screen is essentially as it is on paper, so any design insights from print now apply. That is huge; it changes everything for me, and the quest for a new family of fonts is what this post is about.

I want to use the results on this site because the essays are about visual advances. It seems silly to not use the best technology we have; there are methods that allow any font to be called in a modern browser.

This post explains the choice I made, but I won't be using it soon because of the crippling cost. Perhaps that will be addressed in the future: the market is still young and licensing costs are random. It would cost me thousands to buy what I need and possibly hundreds of dollars a month depending on the traffic. And it would all be for nought for some of you because you use Windows, which does a very bad job with screen fonts in a browser.

60% of my visitors are on Macs and they deserve some love. I could have an alternative view that only could be seen by people with the right hardware — hardware that woud render the page as designed. If I stumble into a moneyshower, I will do that.

Meanwhile, the sites are currently designed to display in Helvetica Neue if you have it on your machine. (You do if you are running a modern Apple operating system.) It will default to Helvetica if you don’t, and that’s not so bad. Helvetica Neue and Helvetica are bland enough to not be noticed, being the french fry of typefaces. If you are running a stock Windows setup however, you are stuck with Arial, which is an excrescence. But there isn’t much I can do about that.

The following ramble is what I will soon use when I can, when I convert fully to retina screens and when I have to produce PDFs.

Baskerville, our Starting Point

Where we start with Baskerville and Mrs Eaves.

There are thousands of fonts, surely tens of thousands. If you monitor the type design community you will see a dozen or so new ones a week. Most of these are so-called display fonts, designed for use in ads and signs. We’ll limit our choices to:

  • Fonts that are professionally designed, meaning that there is some consistent, deliberate philosophy and some presumed knowledge about what design choices have what effects.
  • Fonts that are available in OpenType format and that leverage that format properly. The short explanation here is that the font contains extra glyphs that can be exploited in an OpenType aware application. Mellel and InDesign are examples of such applications. A fancy letter y designed for the end of letters is an example of a special glyph.
  • Fonts that have modern spline specification (probably meaning that inside the OT wrapper are TrueType-specified splines) and that also have large kerning tables, the designed specifications of how letters nest one to another. (You cannot trust your type engine to know what is best otherwise.)
  • Fonts that have substantial Unicode entries. Unicode is a specification for placing thousands of extra glyphs. This includes extended Roman characters, of course, but many, many others as well. We would use some of these special characters for our newly devised inline notation for mathematical concepts.
  • Fonts that are sold by a vendor who maintains them. This is a bigger deal than you would suspect. Many fonts are designed by independent designers, then sold through an aggregator (a font bureau). Once initially marketed, no one has much interest in improving it or fixing discovered inadequacies.
  • Fonts that are part of an extended family, or are designed fit with other fonts so that we can have some freedom in design.
  • Fonts that have some members of the family designed for — and that work well in — long form reading.
  • Fonts that have some accommodation for how different sizes are displayed, including small caps.
  • Fonts that have separately designed, impressive italics because that is my chosen method for emphasis.

This narrows the field quite a bit, but not as much as you would suspect. Now comes the philosophy.

If you take out display fonts, picture/dingbat fonts and script fonts (the ones designed to look like handwriting), you have only a few major categories. The most obvious is whether the letters have serifs or not. Conventional wisdom is that serifed fonts are the most readable because the horizontal accents unify word constructs and move the eye horizontally. (Letter strokes are primarily vertical.) My own tests on this show that well designed sans-serif fonts can do as well or better, supposing that the forms have harmony, are not too vertically stressed and have precise kerning.

A second category of distinguishing characteristics is the degree of handwriting influence, in modern parlance termed humanist.

Type has two parentages, and this is true even in pictographic traditions.

One is in the handwritten manuscript, using brush or pen. These — especially the ones that reference pen nibs — are clearly recognizable, having thick verticals, thin horizontals and shapes influenced by the kinematics of the (right) hand. Those that are influenced by brushes tend to have swashes and compound curves, like you will see in some upper case R, Q, Y and Zs. Naturally enough these are called calligraphic.

The other tradition is from inscriptions carved in stone. These have uniform verticals and terminating serifs. The serif is an essential part of typography today; just how we have come to accept serifs as natural is a mystery. Writing is a recent development in the history of human communication and it seems as if there has been some accelerated cognitive evolution associated with letterforms. But we know the origin of serifs: from the flat blade of the stone chisel, used to square off the ends of strokes. Because the Roman Empire refined and used these so widely, these are Roman designs. Trajan is a good example.

These influences (Roman and calligraphic) occupy two ends of a spectrum from institutional to human, and are today often called transitional and humanist. All designs balance these two influences, starting with solutions by 15th century Venetian publishers. Examples are Bembo and Jenson. Going back to basics in our selection means we have to find our own balance here. In many modern designs, the more Roman-influenced the font, the more readable it is generally considered to be, and the more calligraphic, the more appealing and energetic the individual letterforms.

Imposed on this framework are a number of design elements. Probably it is not worth mentioning them here except later when describing our choice. Most of these can be traced to cultural centers and some societal shift, each producing a style associated with an approach to the word and ultimately becoming part of the design vocabulary. The treatment of the foot of upper case R and K is an example. Other design features we accept now are simple artifacts of high speed presses and how ink flows under pressure and into cheap paper, or because of the needs of some publishers to cram more words in smaller spaces.

Everyone judging type designs needs some sort of anchor. This won't necessarily be a favored font, but one that represents a leveragable node in the branch of the family tree that matters — a reference balance between skin and metal. For me, this is Baskerville. The typeface was designed by Londoner John Baskerville in the mid 18th century. As with all designers, he worked with problems presented by designs of his predecessors. His solutions depended on advances in technology of ink and smooth paper — and to some extent metallurgy — allowing finer lines. This gave him the freedom to create extremely thin horizontals and sharper serifs.

He also innovated in the curves of letters, making them more geometric — a trend that led to Helvetica. But at the same time he made the transition from thick verticals to horizontals within those curves using forms that reference calligraphy but have more energy. Check out his lower case a. e and f. The effect for me is to establish a staid cadence with the verticals and forward energy in the forms that spring forward from them. There is a lot of tension in his design between the two origins.

We know a few things about how we extract meaning from aggregated letterforms. Roughly speaking, we extract the meaning from the top half of the letters on the page and use the bottom half (actually the full uprights) to build visual rhythms that give us cues about letter assembly and word groupings. The tops of the letterforms work on what we call the right hand side, the side that gives us structured semantics.The bottoms give us situated structure, our left hand side of the logic of communication.

Meaning from the Tops of Letterforms

(Image) An example of why Baskerville was an improvement.

An example of why Baskerville was an improvement
You wouldn't be able to make much sense of the above phrase if shown just the bottoms. But if you read it in a long form piece, it would be much easier to extract the meaning because the bottom parts give your eyes what they need to group the ideas. Baskerville has more energy in those top and middle curves than what went before, so was a sort of revolution. At the same time, his uprights were more comparatively heavy, allowing the newly trained eye to do more effective work clustering concepts.

His solution was controversial and considered stark, and English competitors dulled his influence in that country. Notably, the first US ambassador to Europe was a printer himself, Benjamin Franklin. He was so impressed with Baskerville's approach that he arranged for the typeface to be used on essentially all initial US government documents. As a consequence, the early ideas that led the world into democracy first lived in Baskerville.

Zuzana Licko

Someone with presence in design theory.

I suppose there are hundreds of candidates and perhaps a score famous ones for favored type designer. We've chosen Zuzana Licko, type designer and potter.

She and her husband/partner founded a group in the 80s out of San Francisco, Emigre which published a small magazine with the same name. (Licko is from Bratislava and Rudy VanderLans is Dutch.) I subscribed from the early days. This platform was a center of serious examination about what the design profession was about, wondering intelligently about what values a designer should bring, artistically and socially. The printed artifact was highly self-referential and experimental. WanderLans was the editor and Licko the type designer.

Emigre the magazine attracted many challenging concepts and had the attention of the international design community for decades. They started to sell Licko's fonts, the very first that were intelligently designed on and for the then low resolution Macintosh screens. Soon they became a foundry, a seller of curated fonts from similarly intelligent designers including Licko.

I like the values these folks bring to the table:

  • the notion that designers have responsibilities to others
  • the notion that designers have power and need to respect their place in the community of other designers
  • the notion that design is art, not merely craft
  • the inference that no design trend can be exclusively a fad
  • the supposition that dynamism is holy

The magazine was intelligent, vital and formative. It did have some silly obsessions, like a focus on Robert Ventura, but I was attracted to the cauldron and invited myself in. Licko's work seems to exemplify the notions of the magazine more than the magazine itself. Most of her early work — the work I knew — had to do with re-evaluating type design for the screen.

Of her early work a leading designer said: ‘garbage, lacking depth, refinement, elegance, or a sense of history,’ so I know she is doing something right.

Then in 1996, she released what has since become her most widely used typeface. It is presented as a ‘revival’ of Baskerville, addressing what are considered flaws and anachronisms. The critics of Baskerville believe the vertical emphasis is jarring. So what Licko did was take the notions of Baskerville and recreate them with a lower x-height and more distance between the characters. The x-height is the relative height of the aceimnorsuvwxz characters. These two adjustments added some horizontal emphasis to balance the extreme verticality.

She cleverly called this Mrs Eaves, the woman who was John Baskerville's lover, housekeeper and later his wife. At the same time, she make thousands of adjustments. Some are based on more modern notions of character effectiveness, like the bulb of the r. Others are a matter of her own philosophy: the two versions of y for example. She kept the energetic curves at the tops of the characters, in many cases making them more so.

Mrs Eaves is often called soft and feminine. It is very popular, but because of the extreme horizontal spacing, it is unsuitable for long text passages; one's first impression is that it suits a fine restaurant menu. I do not foresee using it much, but studying it is instructive. Seeing it compared to the inspiration, I really admire the decisions that were made in changing from the original. I have never met the woman, and her writings are few and undetailed. Yet in seeing what she did, I feel I know some important part of her intimately, and it feels right.

Seeing it in its own context, one can really appreciate how she solved a problem she created. The problem is that she took something that had unity in the strong vertical cadence, and she softened that cadence and put the characters further apart. So she had to increase the unity of character assemblies in the shapes of the letters and their relative spacing. The new shapes live in a world that is like a good science fiction world, one that you understand immediately and whose dynamics are intuitively accessible. It is a masterwork of horizontal coherence.

Mrs Eaves is not our choice, but it is one of the folds leading to it, perhaps with Jenson at the bottom, Baskerville overlain, then Mrs Eaves, then the few layers which come next, all from Licko.

First, she created a sans serif inspired by Mrs Eaves, aptly named Mr Eaves Sans. Where Mrs Eaves is a face with two weights, each with an italic (regular, italic, bold, bold italic), Mr Eaves has six!

Mrs Eaves was intriguing because of the decisions that produced it; Mr Eaves is as far from Mrs Eaves as the latter is from Baskerville. But the new sans is exciting by itself because with each refinement to this point, the font becomes more and more internally consistent and the composition of letters become ever more coherent. I really like Mr Eaves Sans.

The next fold is Mr Eaves Sans Modern, a version that takes some of the more antique and distracting decorations off. The lowercase a and g are more plain, for instance.

On that we have the next development: the XL version of everything that came before. The idea behind this evolution is to make the typefaces more suitable for long form compositions. The XL has 25% higher x-height. Think this way: the total height of the letter h stays the same. But the height (and corresponding width) of the part common to the letter n is a quarter taller. The fonts are not just automatically stretched, but redrawn with the new metrics and the older design rules. They now have seven weights.

In our typeface palimpsest, this gives us our first truly attractive font for our purposes: Mr Eaves XL Modern. I'll say a few things about what I like later. But she didn't stop there. for all her Mr and Mrs Eaves XL faces, she made narrow versions. I believe these also were manually derived. The narrowing in the case of Mr Eaves XL Modern Narrow (and the other Mr Eaves versions) has the characters 20% narrower. The narrow versions have their appeal as well, because in both the wide and narrow versions you can appreciate the effectiveness of the horizontal binding rules. Both are suitable for long form reading.

There you have it in terms of the name of the thing at least: Mr Eaves XL Modern, built on Mr Eaves XL Modern, built on Mr Eaves, built on Mrs Eaves, built on Baskerville.

Some Example Characters

(Image) Not much, just a few sample characters of the various stages of evolution.

Typeface samples
This shows the major steps we've described, starting with the original Mrs Eaves. The last two are the versions we would use in our body text.

What We Like

Some desirable features.

I've worked to understand a lot of typefaces. Some do seem coherent in design, others have some appeal when you look at the glyphs themselves. As with all design products, the bottom line is about an overall feel. Here are some notes to indicate what works for me in this choice.

What I Don't Like

First, some complaints.

  • Well, I don't like the price, because using this the way I want to on my modest site will cost a huge amount, more than everything else put together. I know they need to make a living, but Jesus the costs are crushing.
  • The original Mrs Eaves had upside down opening quotes. This was a design decision that I admired and once I started to think about it, it really made sense. Described in words: usually, the opening quotes have the fat parts at the bottom and closing quotes have them at the top, being in fact an 180 degree rotation. Licko made the opening quotes have the fat parts at the top, being a mirror reflection of the closing quotes. This is truly elegant, and reflected in many of the other design choices. But in the more recent version, she has backtracked under pressure and done it the ordinary way. It waters down the font in my opinion. Artist or merchant?
  • The typefaces have many characters beyond the minimum that were sufficient only a few years ago. My requirements include inline equations for some new concepts and I plan to use unusual gylphs for some of the more unconventional of these. I'd like to use the interrobang, a rarely used combination of a question mark and an exclamation mark. It was devised for the obvious, to denote an emphasized query. I'd use it for a similar formal concept. But alas it is something I would have to add to the font.

Depending on your browsing environment, you may see an interrobang here: ‽.

Some Powerful Design Decisions

The image below shows two qualities that attract me. They both concern how the individual letters combine, which is job number one.

The first is the constancy of grey-scale. Standing back and blurring the text should produce an even cloud of grey. If your eye catches clumps of darkness, it inhibits capture of the assembled words. What Licko has done is extraordinary in this regard. Some of this is the custom kerning. The image shows nonsense text at the top in Helvetica Neue, probably what you are used to. Underneath at various levels of magnitude is Mr Eaves Modern XL (not the narrow). Take a look at the spacing of the letters in exeter and see how much more coherence is in Eaves.

Take a look at period and see how much more black is in the front of the word in Helvetica? This effect is not because of the kerning, but because of the weights of the upright strokes. In Helvetica the weights of the uprights are mechanically determined. With Eaves, it is adjusted to actually work. This is amazingly hard to do without the crutch of serifs and so much more powerful without them.

But there is something else. The verticals provide the framework for the basic cadence but the meaning is carried in the horizontal assembly of tops. Helvetica and its ilk (Gill Sans, Frutiger, Arial) assume that if the same geometric rules are used for each letter, then harmonic construction will automatically result. Calibri follows this notion, working around the weaknesses of its sponsor's display technology.

Eaves uses more energetic strokes at the tops of the characters. Take a look at the ovals of the a and g, and how they differ from the o. Notice also that the r is a near-but-not-quite mirror image (remember the quotes?) of part of the g. Going with this much calligraphic energy in the glyphs is risky in a text font. The extreme openness of the S and e is along the same notion. But it works.

Two Design Strategies Illustrated

(Image) Mr Eaves compared to Helvetica.

Mr Eaves compared to Helvetica

Helvetica Neue is shown at the top, and below with the colored background is Mr Eaves Modern XL. Several sizes are shown so that you can see the greyspace issue and the design of the curves

One final remark. The curves used in these humanist versions of fonts specifically reference calligraphic strokes. Supposing you had a traditional nib, a horizontal would be thin, a vertical thick and a curve a transition determined by the pen's geometry. Modern references maintain this geometry. Licko does reference it, but look closely. You cannot create those curves with a pen, not without strange twists. I prefer to see these curves as coming from some natural part of our cognitive nature and not a writing machine.

How We Might Use Mr Eaves

Our use cases.

We have three use cases for Mr Eaves on this site.

The first use is rather straightforward. We'd use it as the typeface for the text in the posts and essays you are reading now. The current setup specifies Helvetica Neue if you have it, then Helvetica, then Arial, then depending on your environment the default sans. This is not ideal but the best of the simple options.

For various technical reasons, optical kerning is not an option for us, though it could solve some of our issues with the current display. So the use of Mr Eaves would allow us to simply present ourselves with as much consideration for you as we think you deserve. We may modify our sparse style set, currently limited to italics (reserving bold for section headers).

A second use is an extension. We have some rather ambitious plans for a math-like notation that can use ordinary text presentation, but it depends on mixed serif-sanserifs, various weights and so on. If we can pull this off, it could be a big help in introspective prose where text narrative is intermingled with (or co-exists alongside) some accessible but rather formal metaprose. Our in-browser editor would need this.

Our third use...

We plan some highly structured narrative examples to be used for various experiments. They will be presented in a reserved area of this site and initially will be formatted the way essays are. They'd be modeled using the planned tool and there we would reformat text clumps dynamically based on their influence at each point in where the reader is. For this convention, we would likely exploit the various versions and weights of Mr Eaves, changing over time as the narrative develops. We'd also merge the typeface with selected characters from Hiragino Mincho Pro, plus some new gylphs.

© copyright Ted Goranson, 2013