Notes about designing screen fonts

My lengthy answers to a few questions by Ben Kiel about designing type for screens.

Gustavo Ferreira · 2012-05-30

Ben Kiel, type-designer and font-production specialist at House Industries and a long-time RoboFab friend, recently asked me a few questions about designing screen fonts, for a broader article about web fonts he was writing for Communication Arts magazine.

Since RoboThon I have been busy with the production of the Hipertipo gridfonts collection, a set of grid-based font families for screens built over the last years based on my experience with Elementar. Ben’s questions were a great opportunity for me to talk about this work and the ideas behind it. So, with his permission, I am republishing my answers here, in a slightly revised and extended form.

What do you wish people knew about choosing type for the screen or just type on screen in general?

I wish people would consider the screen as a medium in itself, rather than just a looking glass for what comes out of the printer.

In general, I think everybody (not just designers) should know a lot more about the history of artifacts, about why things are the way they are. Once you can place the origin of a certain technical feature in time, it becomes a lot easier to understand it, and make an informed decision about the best ways to use it.

For example, the current paradigms for working with type on screens (black text on white background, scaleable type) were established in the 1980s in response to a very specific problem: using computers in the office. Back then, documents were meant to be printed, and offices were full of paper – so it made sense to simulate the outcome of the printer directly on the screen. It is not a coincidence that the principles of WYSIWYG – What You See (on the screen) Is What You Get (on the paper) – were developed in a research unit of Xerox, a manufacturer of printing equipment.

Today, 30 years have passed, people have been speaking of ‘paperless offices’ for at least a decade, and we are still simulating paper on the screen. That’s just plain silly.

For me, the starting point for thinking about and working with type on screens should be the properties of the medium screen, in particular those qualities which are exclusive to this medium in relation to the previous dominating one (paper/printing).

printed media screen media
material virtual, interconnected
static content dynamic content
linear flow non-linear flow
high resolution low resolution
reflection of light emission of light

I think the shortcomings of print-oriented design for screens become clear if we look at the small table above: screen-based documents are interconnected, dynamic, reactive; screens are ‘dark’ surfaces in which information is written with light. These radically different qualities demand different typographic solutions and ideas, which lie necessarily outside of the tradition of print typography.

Where is the sweet spot of making type working on screen? If it’s not possible to hint to the level of Verdana/Georgia (for money, time, and design reasons) and it’s customer un-friendly not to offer popular designs as webfonts, how are you striking a balance?

As a relatively young and independent type designer/font maker, I am in a different position in relation to many colleagues: I don’t have a type library from a previous media period to maintain and worry about, so I can simply start from ideas and target my work to today’s media environment. I don’t have many customers either, so most of the time I am working for myself, with a lot of freedom to explore and develop my own solutions and models.

During my studies at Type&Media I have worked on a TrueType-hinted sans-serif typeface for screens, Quantica – so I know how TrueType hinting works. But today I prefer not to work with TrueType hinting at all, for a couple of reasons. First, I think that solving a visual design problem with low-level programming code is a bad idea – it’s the wrong level and the wrong language for the task. Second, TrueType-hinting is not a standard reliable technology, and has very different levels of support and effects depending on the operating system and environment.

In my understanding, the whole point of digital fonts is to finally make typefaces device- and system-independent. TrueType hinting seems to have gone in the opposite direction, making fonts system-specific again. This is a pity, because TrueType is a very powerful technology which still has lots of unexplored potential. I expect to see TrueType-hinting moving inside font-production tools in the near future, as one of many possible ways to fit letter-shapes to the grid – in a similar way to Multiple Master, which has survived not as a font format but as one of many ways of doing interpolation.

Verdana and Georgia are hybrid screen-and-paper fonts, designed for the TrueType technology, which in turn was developed as part of a WYSIWYG graphics model. I have been trying to work outside of WYSIWYG, so I reject TrueType hinting altogether (I have no need for it). Instead, I am working directly with lettershapes and pixels, bringing the grid into the designs. I draw non-scaleable, PPEM-specific typefaces directly on the pixel grid. To me this seems a much more fruitful technique creatively, and a more solid and lasting approach in the long run.

How do bitmap fonts fit into the current landscape of screen fonts?

The meaning of ‘bitmap fonts’ has become a bit fuzzy over time, and using it today creates some confusion. I have been trying to move away from it, and talk about ‘grid-based typefaces’ instead.

Bitmap fonts are fonts in which the glyphs are stored as true maps-of-bits, such as in the old-school .fon and .bdf formats. They are a pre-WYSIWYG solution to the problem of displaying well-formed lettershapes on low-resolution screens. Before WYSIWYG, there were screen fonts (bitmap fonts), and there were print fonts (vector fonts) – different kinds of fonts for different media. To me this makes perfect sense. Note that, at this stage of technology, there were no ‘rendering problems’ with screen fonts; the letterforms were maybe a bit rough and blocky, but text was perfectly legible and readable. And, most important to us type-designers: it could have the exact same visual appearance independently of the environment, because there were no complicated rasterizers involved.

Compare that state of things with today’s WYSIWYG paradigm and hybrid TrueType-hinted fonts – I don’t think we are better off. In fact, we’re worse: there are no genuine screen fonts anymore, and there is no stable/standard mechanism to deliver the same visual pixel representation of a glyph shape to different screens, operating systems, browsers etc. Add to that the ability to use any font on web pages, and a baggage of thousands and thousands of old fonts and typeface designs made for printed media, and we arrive at the messy state of things in which we find ourselves today.

True bitmap font formats like in the old days are not even supported in today’s operating systems anymore. But bitmap letterforms can be expressed as vectors, using any of the standard outline font formats. Like true bitmap fonts, these ‘outline bitmap fonts’ are not scaleable – they are intended for use in one particular size only, and in multiples of it. This is the approach I have been using since 2002 to design and produce Elementar, a large system of bitmap typefaces.

Today I am taking this method further, by adding details and ‘design resolution’ on top of the basic pixel-grid shapes. This helps to make type look smoother in larger sizes and resolutions, and works as a kind of ‘hand-made anti-alias’ in the smaller scales.

So, grid-based type-design is an alternative approach to producing well-formed grid-fitted lettershapes, and stands in opposition to the TrueType/WYSIWYG model. The TrueType hinting model uses low-level programming code to fit one single resolution-independent outline master to many different PPEM sizes, by means of an unreliable man-in-the-middle (the TrueType rasterizer); in the grid-based model, the type-designer draws each size individually directly on the grid, bypassing the rasterizer. TrueType/WYSIWYG have obscured the pixel, I’m taking it back.

two approaches to designing screen fonts: scaleable outline fonts (left) × gridfonts (right)

There are of course notable precedents for this approach to designing screen type. For example, Zuzana Licko was working along those lines in the 1990s, with her Low-Res and Base series. Unfortunately, her work as an independent designer was not enough to change the course of events, and the whole field followed the inertia and the agenda of large computer technology companies (Apple, Microsoft, Adobe).

Twenty years before that, Wim Crouwel was formulating his ideas about ‘Type design for the computer Age’, and designing grid-based alphabets and typefaces. Many of his contemporaries have explored the field in his footsteps, from Juriaan Schrofer of Total Design to my teacher Rodolfo Capeto in Brazil. Wim himself cites his contact with Swiss graphic designers in the 1960s as an influence for his work with grids and modularity. Adrian Frutiger played with a grid-based typeface concept, Element Grotesk, in the early 1950s. Designers at the Bauhaus and other modern design schools in the 1930s have also produced several seminal grid-based alphabets, and formulated important ideas about type for new media.

We can continue going back in time, and find many more examples in this tradition. The Roman Du Roi is another milestone that needs to be mentioned. There is also a whole field of grid-based art and design, from textile patterns to painting to architecture. And there is the relatively recent but still untold history of early computer fonts, for example in early screens and computer terminals, bitmap game consoles etc.

Do you have any examples that I could show of Elementar, showing off it’s advantages over hinted fonts?

It is difficult to compare Elementar with TrueType-hinted fonts, because they have different defaults and try to solve different problems. In the WYSIWYG model, the default contrast is black text on white background (think of programs like Word and Notepad, or non-styled web pages as an example), while in a non-WYSIWYG model we have the opposite contrast situation (white/yellow/green on black). The whole visual language of WYSIWYG is different, and integrates many skeuomorphic devices (such as drop shadows, metal textures, glass reflections etc) which are incompatible with bitmap-based type.

Elementar performs best in non-WYSIWYG environments. I am using it here on the hipertipo website. One clear advantage of Elementar (and ‘pixel fonts’ in general) over TrueType-hinted fonts is the uniform appearance across different environments. With TrueType-hinted fonts, the final pixels currently vary greatly depending on the rasterizer, so as a type-designer you can never really know how your typeface will look like to the reader.

Elementar in particular was designed to explore the maximum amount of variations in the low-resolution grid. It does that by breaking with WYSIWYG principles, using a non-proportional grid-fitting system which achieves a bigger design space than the TrueType approach. Text set in Elementar can do things which ‘normal’ text cannot do, such as stretch vertically or horizontally while keeping all forms on the pixel grid. For the release of Elementar, we have developed two interfaces to illustrate this kind of interaction with type: a web-based Elementar Navigator, using sliders, and an Elementar iPad app, using gestures directly.

Besides Elementar, I have also been working on a few other grid-based type-families, each with its own set of parameters and characteristics:

Quantica 1 is a set of grid-based sans-serif typefaces optimized for text in continuous sizes, currently in a single weight only. It is closer to the humanistic archetype for text typefaces, with more horizontal modulation than Elementar.

Modular is a family of serif typefaces for long-form reading on screens, in a limited range of sizes, and weights. Modular also introduces the idea of ‘design resolutions’ – successive iterations of the same base design, with doubled grid frequency and detail (for use in larger sizes or with generic rasterizers).

Segments is a another flexible set of grid-based fonts, with height, width and weight variations. It is an experiment in extending the classic 7-segments and 16-segments alphabets to include a full set of lowercase characters.

Gothica is a geometric blackletter typeface family in Sans and Serif styles, each with a few heights and weights. All shapes are built on a strict isometric grid, and all weights in each style share the same horizontal metrics.

Imperial is another family with Sans and Serif style variations. It has stencil-like disconnected forms, built with straight lines and circle segments only. Each style comes in a range of widths and weights. Fonts of the same width share the same metrics across weights and styles.

Of all these typefaces, Elementar is the only one which has been released so far, through Typotheque. The other ones are ongoing projects which I hope to release soon through Hipertipo.

I can’t say that these typefaces are better than TrueType-hinted fonts; for most people working in a WYSIWYG framework they most likely are not. But I think it is fair to say that they are different – and this is intentional. The advantage of the grid-based approach is that it allows type-designers to arrive at a different kind of visual result, working directly on the medium with a lot more control, using their native visual skill set (instead of assembler code).

They also have something more solid and lasting in their hands: an outline shape which they can manipulate and repurpose with other technologies and media. The lettershapes produced by TrueType hinting on screen, on the other hand, are like sculptures of snow: they are impermanent in their nature, and can only be achieved by means of an appropriate (but unreliable) rasterizer. Who knows how long TrueType rasterizers are going to be around? As soon as TrueType-rasterizers are fased out, all those carefully ‘hand-hinted’ pixels will melt.

As much as I am excited about the results I have been achieving in my experiments, I am fully aware that the grid-based approach is not without problems. Because today’s digital environments are predominantly based on WYSIWYG principles, the interfaces for dealing with type are not appropriate for working with PPEM-specific fonts. The number of single fonts in grid-based font families is quite large, and it can be tiring and counter-intuitive to choose the right instance using the available interfaces.

Setting the correct pixel size is another problem, because today’s common interface design metaphors such as zoom and scale work in a continuous ‘fractional’ space, while Elementar and grid-based fonts in general operate in ‘integer space’. The problem of fractional vs. integer coordinate spaces also pop-us in environments which support sub-pixel positioning, such as Flash in the old days and Firefox today, resulting in blurry off-the-grid type rendering.

The ideal screen font format for me would look like a bundle of grid-based fonts, with a parametric API to access one or more cuts individually. This format does not exist, and I don’t see any of the usual font technology parties interested in developing it. Thankfully, the digital tools we have at our reach today are very powerful, flexible and accessible – so I can actually go and build something that works like that for myself. This is what I have been trying to do over the last years. It is a personal ongoing research project, highly experimental and full of unsolved questions – but it makes sense for me so far. My results and prototypes are getting better every day, and the technological landscape continues to change. I keep on working, curious to see in which direction this will all go.

Written in April 2012.