Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Type Q&A: Steve Matteson from Monotype

on Wednesday 10th of April 2013

Monotype has released a collection of typefaces specially designed for screen use at small sizes. So we asked their Creative Director of Type Steve Matteson to chat with us about type on the web, print vs web fonts, how to choose body fonts, and a bit about the new series.

Steve Matteson, type designer and Creative Director of Type at Monotype

Type lovers know that all web fonts are not created equal. But more interestingly, being available on the web doesn’t necessarily mean they were made for the web, does it?

That’s right. Many of the typefaces currently available as web fonts were designed long before computers and electronic displays. Some were developed for an old printing process called letterpress, where type was pressed into paper and there was a slight ‘squeeze’ of ink. These typefaces (particularly those designed for book printing) look quite light in modern printing because of the lack of ink squeeze. When these typefaces are used on the web, their blocks of text can look pallid, spindly and hard to read. Details such as thin hairlines or serifs can become very faint and hinder readability. Since type is meant to be read, this difference matters a great deal.

What is it about the letterforms originally designed for print that can make some typefaces less suitable for use on the web?

Because of the lower resolution of a digital display compared to a printed surface, many design attributes can become visually detrimental. For example, tight spacing can become problematic at text sizes where letterform features may collide. Closely fit features (such as the opening of ‘e’ or ‘a’) can visually fill in, causing a disruption to the reader. Also, on screen, slight angles to stems may appear as an abrupt jagged edge rather than a graceful angle.

With some typefaces, finer anatomical features and flourishes can only be appreciated when set large.

With some typefaces, finer anatomical features and flourishes can only be appreciated when set large.

That isn’t to say all the interest needs to be removed from a type design. There are features that may be subtle or disappear on screen until a very large size is used and enough pixels are available to represent the feature. A spur serif on the edge of an uppercase ‘G’ for instance.

When selecting typefaces for use at small sizes, what should we be looking for?

There has to be the expectation that any typeface design is going to be reduced to pixels and some distortion of the shape is inevitable. This will also vary from size to size: 12px will look quite different from 15px and obviously very different at 32px. Every typeface will have its own sweet spots – indeed each type of digital display will have sweet spots – so it’s useful to have a palette of typefaces to work with.

Typeface progression: from Dante to the new DanteE

Typefaces with generously proportioned lowercase characters work better for body copy. Set at the same pixel size, it’s easy to see the smaller x-height of Dante (left) versus its more generous cousin Dante eText (right).

The hallmarks of a good body font are the same as one would look for in print: even color, regular spacing and slightly open. The two most noticeable things in text are texture and color. By texture, I mean how smooth, agitated, spiky, fluid, angular, calm or energetic a paragraph of text looks visually. The typeface that meets the designer’s vision of texture and color for his or her design is the right one to choose. 

Are there certain classifications to stay away from when searching for body fonts?

There are many to stay away from IF your desire is to set 16px text. For example, most classic text faces – from the Adobe Garamond to Times New Roman typefaces – need to be set at 22px or larger to be readable. And even then, their hairlines are often too delicate and brittle looking.

Where do you stand on the whole serifs/sans serifs for body text debate? Is one preferable for readability and legibility, or is it a bunch of hooey?

There are many factors beyond whether a typeface has serifs or not. For example, if the resolution of the screen is very poor, a sans serif type will suffer the least distortion when drawn as pixels. This is one thing that has fueled the ‘sans serifs are best for screen’ advice of the past. However, increased screen resolutions and anti-alias displays have made much of that advice moot. Most critical to web page readability is the interplay of variables such as line-length, line-height, typeface style and size.

Can you briefly explain the difference between readability and legibility?

There is a running dispute about these terms. Readability, for me, is how you feel reading the typeface: fatigued, engaged, oblivious to the flow of the text or distracted by unusual features or distortions in the design. Legibility is something more measurable – how fast the text can be read without error. Other typographers may define these terms differently.

Last week, your team released its eText collection of typefaces on Fonts.com, which are specially redesigned to perform well at small text sizes. How did the project come about?

For me, the impetus was the original iPad and the iBooks application. When I saw that the old print version of the Monotype Baskerville typeface was chosen for reading on a very bright LCD screen, and how terrible it was to read, I was driven to fix the problem. Our new Baskerville eText typeface (or BaskervilleE for short) is the result of that first interaction with the iPad. In tandem, I worked on SabonE as a contrasting design that would illustrate that good ebook typography was possible, if the right tools were provided to designers. 

From there, we expanded the selection, choosing from a wide range of genres to give the digital designer a palette to work from. The AmasisE, ITC GilliardE, MalabarE, Monotype BaskervilleE, Neue HelveticaE, PalatinoE, PMN CaeciliaE, SabonE and YsobelE typefaces are the first nine we’ve released, and more are in the works.

What are the challenges of re-designing an existing typeface?

The biggest challenge is determining what defining features of the original to keep and which can be changed or removed. The idea is to keep the new design an unmistakable member of the original family. For instance, we’ve redrawn BaskervilleE to be a ‘cousin’ to the current version of Monotype Baskerville that was originally designed for print. It retains the baroque characteristics of the original, yet has adaptations which make it read better on screen.

Monotype Baskerville with the new BaskervilleE

Monotype Baskerville beside the new BaskervilleE from Fonts.com

What sort of changes did you make to these typefaces?

The first thing we addressed was the proportion of lowercase to uppercase height. Our eText typefaces have been designed with relatively large lowercase heights. That is, the proportion of lowercase height to cap height is a little bit exaggerated in order to have more pixels available to build lowercase letters. At the same time, consideration was made not to make them too large and inelegant.

Secondly, we had to consider the darkness of text. The original versions were all too light for screen and, therefore, needed to be darkened. But this took care, because we didn’t want to make all the typefaces in the collection the same color and dilute the variety of the design palette.

Beyond these, each typeface had its own considerations of spacing, apertures to enlarge (to prevent them from blurring shut on screen) and unique quirks to tend to. Also, those that previously existed as web fonts required more technology (called hinting and edge tuning) to perform better on today’s variety of digital displays.

What surprises arose during the redesigns?

I had hoped to create a good screen version of the Bembo Book typeface, a beautiful and very popular design for book publishing. I was unhappy with my attempts to reconcile some of its unique qualities in the screen version and decided not to release it until it was really working well. One particular characteristic is the lowercase ‘n’, which has a slight bow in the right stem – as opposed to a straight side. Finding a workable solution would have delayed the general release so I’ll get back to it in the future.

What sizes are these typefaces best suited for?

12 pixels is the lower limit in these typefaces. Below that size, a humanist sans serif is the best choice for legibility in pretty much any situation – something like the Verdana and Frutiger typefaces, which are essentially the skeletons of book typefaces and have open shapes that are easiest to read. By the time you reach sizes in the upper 30px range the eText typefaces, while still useful, they could be replaced by their print cousins for a more delicate touch.

Futura with YsobelE

Futura contrasts well with YsobelE’s upright posture

Which typefaces would you suggest pairing with the eText collection?

Since most of these are serif typefaces, their best mates would either be their previous web versions set at large sizes, or sans serifs. When combining serif and sans serif typefaces, it’s important to consider the genres. A monoline geometric sans serif like the Futura typeface would not work well with BaskervilleE’s high contrast stems or our GalliardE typeface’s calligraphic stress. But it would work with YsobelE’s upright posture. A grotesque sans serif like the Neue Haas Grotesque typeface would be a good companion for BaskervilleE. Humanist sans serifs like the Syntax or Frutiger families would be well suited for GalliardE and our SabonE typefaces.

Do these new eText versions replace their previous web versions, or do those still serve a useful purpose for designers?

All the original designs are still useful for larger sizes – they’re more delicate and refined looking in display. When typefaces were made for beautiful letterpress book printing, each progressive size of metal type had gradations of thick-thin contrast. The smallest text sizes had large lowercase heights and looser spacing. Display sizes were cut with fine hairlines and had tighter spacing. So it would be quite reasonable to use the original Monotype Baskerville for 32px and larger as a companion to our BaskervilleE in text.

You can experiment with all nine new eText typefaces in our Typecast app.

Sign in   to have a go, or start a 14-day trial.

Thanks go to Eben Sorkin for the picture of Steve.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Next Seminar

Featuring guest Jason Pamental

Featuring guest Jason Pamental

Designing for maximum reach

A content-centered approach to RWD

Join our online seminar where we’ll be showing you how to create beautiful, fluid experiences that readers will love.

Register your place

Comments

blog comments powered by Disqus