Craig Mod

A wonderfully eloquent and thought-provoking talk by writer-designer-publisher, Craig Mod. After outlining the differences (physical and emotional) between the book as artifact and as digital, he addresses how we might reduce the experiential gap. Well worth 40 minutes of your day.

Sponsored by H&FJ.

Designing for the Future Book

A sudden bolt of inspiration would makes for an enticing story of a typeface’s beginnings, one that would perhaps be helpful when marketing it. However, in reality, not all typefaces come into the world that way. Sometimes, as was the case for Novel, the idea slowly percolates. Even the somewhat unspectacular name I chose for this family reflects that process.

Just like many of my fellow Type and Media graduates I was adamant about continuing to work on designing typefaces after graduation. But unlike most of them I never had to face the question of whether to continue on the project developed over the course of my study. My efforts were less than stellar, so I couldn’t wait to start from scratch.

Though there was no sudden moment of insight, I believe that with most type designers it’s very obvious which typefaces could have had an influence. As for me I admire Jan van Krimpen’s Romulus and Bram de Does’s typefaces Trinité and Lexicon. In addition, I can’t imagine ever getting tired of looking at Peter Verheul’s Versa. As I studied both graphic design and type design at the Royal Academy of Art, my affection for reading typefaces with broad-nib contrast and calligraphic details isn’t surprising.

For me the start of working on a typeface involves strictly being away from computer. The design process is rather simple. I spend a lot of time on sketching different ideas — at first quite roughly, but as soon as I find something I like I develop it further in greater detail. My favorite part of drawing letters is sitting down with a rather soft pencil and my sketch book. Most glyphs I draw have an x-height of about 6 cm, which enables me to redraw them quickly when I make mistakes, or consider alternative shapes. In this phase the design and characteristics of letters take precedence, so I don’t worry about inaccuracy in the overral rhythm. When I feel that I’ve found some ideas worth developing further, I strive to develop these letters as far as possible on paper. When I reach a phase where I discover the shapes I was searching for, I tend to switch to a Rapidograph as it permits greater precision. Those drawings have no gray scale and they sometimes brutally reveal weaknesses in the concept.

Designing typefaces this way takes a little longer at the beginning, but I feel that working this way provides me with a much better and clearer understanding of the shapes. I am also convinced that this way I am able to implement changes much quicker than if I had to think about nodes and path directions. Immediate contact with shapes that drawing with a pencil provides liberates me from thinking about font production and lets me concentrate on what matters most — designing the alphabet. It often feels that adjusting anchor points, nodes, and extrema are a distraction at this point in the process.

When drawing type I tend to focus on the darker book weight. That way I can imagine or envisage how the shapes will alter when made lighter or bolder. Precise drawings take a lot of time and effort. I try to work as efficiently as possible, even though I find drawing type very enjoyable.

Once I feel I have designed enough glyphs, I scan the drawings and begin to vectorize them. Here I begin to integrate the future interpolations in the design process. I use the glyphs I just digitized as a basis for the light and the bold weights. My preference to develop italics and roman at the same time makes this phase of the process very time consuming. A lot of the issues only become apparent when test prints at reading sizes are made. That is why in this phase some major design ideas might be altered or jettisoned all together.

Italics

There appears to be a growing trend in typefaces for italics whose design is fairly close to the roman, and I find this disconcerting. I think that highlighting some passages of text is more elegant when done with distinctly designed italics. While naturally roman and italic should have similarities, slant angle should not be the only means to differentiate them.

As lowercase constructions are more complex than the uppercase I felt it was necessary to have them a little more dynamic. For that reason lowercase letters are slightly more slanted than the uppercase letters.

Flexible f-terminal

In my early drawings I fell in love with the long f-terminal of Novel. This feature looked nice in many letter combinations, but not all. Letters followed by b for example, or when an accented glyph follows f looked very unattractive. The solution was a flexible f-terminal that would be wide when space permitted, show up as a ligature, or shrink if it were followed by an accented letter. All typefaces in the Novel family have this feature, except Novel Mono.

Swash-like Terminals

Novel is supposed to have a friendly appearance. Swash-like endings or terminals on round shapes like a, c, f, r, and y contribute to a natural feel. Also the calligraphic details on A, V, W, v, and w help to extend the warmth of design elements that have their origin in handwriting. As italics are closer to handwritten words, developing them came easier than the roman. Naturally these characteristics were not adopted to the sans serif version, lending it a more neutral personality.

Novel Sans

Creating a matching sans serif typeface was the plan from the outset. Only a few weeks after I digitized the first drawings of Novel, I began designing Novel Sans. I decided to make the two typefaces in parallel to make sure they were complementary. This way I could ensure that elements I designed for Novel would also work for Novel Sans. Obviously many shapes would not be problematic, but some of my favorite details proved to be difficult to adopt. For example, I spent considerable time on letters such as lowercase v, w, x, y, z before I was confident that I could go for a particular design feature without fear of later regretting it.

Novel Mono

When Novel Sans was nearing completion, friends suggested that I should try to make a monospaced version. I must admit that at first I wasn’t taken by this idea. I thought that too many of Novel’s design features, such as its Classic proportions, a generous roman combined with a pretty narrow italic, and the warmth would get lost. Despite these reservations, I decided to give it a go.

Of course there are differences to be seen, especially between the italics of Novel Sans and Novel Mono, but when comparing both designs side by side it’s more obvious what they have in common. The final outcome surprised me. It works much better than I ever thought it would. In fact, of all the styles, I use Novel Mono most.

Novel Sans Condensed

The classic proportions of Novel and Novel Sans might be considered distinct characteristics of the family. The Sans Condensed version, however, required a much more balanced rhythm. The width contrast between the romans and the italics had to be decreased, as the italics of Novel Sans were already very narrow.

Legibility

There are many ways to measure legibility, with some more legitimate than others. But with all of them I have difficulties when it comes to the most interesting aspect: What is the reader accustomed to looking at? I don’t think that actually measuring legibility is nonsense, but it’s only one of the many aspects or ingredients of a typeface design. I believe a good type designer instinctively makes the right decisions when faced with the question: Should I go for the distinctive detail or for reading quality? Reducing Typeface design simply to considerations of legibility seems to be unfair and perhaps misguided.

When I was designing Novel, I printed high resolution proofs of different type sizes to judge quality and legibility. To me it helps much better discussing legibility with colleagues like Albert-Jan Pool, rather than spending time on eye tracking or mathematic grayscale calculations. ■

Sponsored by H&FJ.

Novel Constructions

What prompted you to make Offscreen?

In the middle of last year, I left my freelance clients to go on a 3-month hiatus traveling around the world. I met all these lovely, creative people I’d only known online through Twitter, Facebook or Dribbble. There are so many stories to be told about what happens behind the scenes of the sites and apps I use on a daily basis. After coming home, I thought about a better way to tell these stories. The digital environment is very short-lived: make something today, and tomorrow it’s disappeared into the vastness of the web.

Even though I’ve had an iPad since its early days, the magazines and e-books on it have so far done a bad job in creating and maintaining focus. Offscreen tries to help readers disconnect completely and re-connect on a level that’s more real, more tangible. that’s why there isn’t a digital version of the magazine. As the name suggests, Offscreen wants you to put your iPad down and focus on long-form writing about real people without the distractions of app notifications or incoming emails.

What was your layout design process like? How did it change as you got farther along?
Being a magazine buff with a nice collection of indie-magazines on my bookshelf, there were a lot of sources to draw inspiration from. Monocle was one of them, but there are lots of other small indie- magazines that I learned from by flicking through them. The iPad’s form-factor is fantastic. Considering that most of my readers would probably own one, I thought that a similarly-sized format could really work—the “offline companion” that fits into the same bag as the iPad or Macbook Air.

After picking the format, I played around with the grid and the layout of the master pages. It took many test files in InDesign before it got to the final version. If you’ve never done any editorial design, figuring out what page margins, column gutter widths, font sizes work well takes a lot of trial and error. (Having a UI-design background, I had barely used InDesign before.) So I did a lot of trial prints on my laser printer at home. Change the leading, bump up the font-size by .5 points, add 2 mm to the column width. Rinse, repeat.

At this stage, I didn’t have any actual content yet. So while figuring out the layout, I started conducting interviews and defining a photography style guide. There was a lot of back and forth: I had to change the layout to accommodate the content, and vice versa. It sounds a bit messy, but I enjoyed the organic process and the freedom of doing it “my way” despite of what I read and heard from other publishers, editors and designers. Once the visual language was established, it all came together rather quickly. I spent a lot more time in Photoshop, preparing and retouching photos, and in Google Docs, editing content with the help of my sub-editor and proofreader. Merging everything into Indesign was quite exciting because that’s when you first see it all come together to shape what will eventually be a real magazine.

How did you decide on Cyclone and Calluna for the magazine? Had you used them before?

I tested some classic serif typefaces like Garamond and Caslon, and contemporary magazine types such as Kepler and Lyon that work very well at small sizes. I also played around with some sans serif typefaces, but quickly abandoned the idea because they felt too modern. Offscreen is about returning to our roots and bringing back a traditional, calm reading experience.

Calluna strikes a nice balance between a traditional serif and a more playful contemporary text face. It works very well in both small and large sizes and could therefore easily be used as a display face. The various weights and styles allow for a range of applications, which was particularly helpful when a single typeface is used for all body text. I especially fell in love with Calluna’s small caps, something I tried working into every page. For example, the folio uses Calluna in small caps at 8.5 pt followed by a thick, bleeding line carrying a color code for each interview. Offscreen is a magazine about people, so their names appear (with very few exceptions) consistently across the whole magazine in prominent small caps at 15 pt bold, usually followed by their job title in regular italic and their location, in regular small caps at 8.5 pt.

The pull-quotes use Calluna’s beautiful set of discretionary ligatures. I first tried to apply the color specific to the interview to the text of the quotes, but this felt too distracting. So I tried a black version (both in terms of color and weight) and loved it. Even though the ligatures can seem a little over-decorative at times, I really like how they compliment the interview spreads.

I ended up liking Calluna so much that it formed the Offscreen logo, which is basically Calluna in black with a few manual alterations to some brackets and stems. Calluna is on Typekit, which helped me make a final decision on the typeface. I like consistency across different media, even though Calluna looks quite different on screen. It loses a bit of its round and playful dynamic when displayed in smaller sizes, which I assume is partly due to the low resolution of computer screens and the different ways browsers are rendering it. Finding an accompanying display typeface came easier. I played with Morgan Knutson’s Mensch for a while, which looks particularly nice in white with inlines applied on a color background. Its regular style didn’t appeal to me, though, so I looked for an alternative condensed typeface with a similar “decorated” feature. H&FJ’s Cyclone had me convinced straight away. In its regular uppercase style, Cyclone feels calm and bold yet still subtle, and transforms into a more embellished typeface with its inline.

In use, both typefaces find a nice balance between contemporary modern and a more traditional magazine look. There was a conscious decision to only have two typefaces throughout the magazine and have the text only black on white or vice versa.

What was your process in choosing a paper stock?
process of finding and choosing the stock was probably less experimental and exciting than you think. During my last trip to Berlin, I came across a German magazine called The Weekender. The paper used impressed me, even though it wasn’t anything fancy. It is a very basic uncoated paper, but its grainy texture with tiny remnants of wood and recycled paper gives it a very warm look and feel. I emailed the maker, Dirk Mönkemöller, and he was nice enough to give me the specs. It’s made from 100% recycled paper, which was great because the environmental impact of magazines has always been a concern of mine.

The Weekender gave me a good indication of how the ink would behave on paper. In talks with my printer, they reassured me that their machines will deliver a similar quality — and they did. My printer was in Berlin while I was back in Australia, so it was impossible for me to just drop by and grab a test print. So, there weren’t many trial prints. It still worked out well!

I’m in the process of moving to Berlin for 6+ months and will be able to oversee the print process for issue #2 a bit more closely.

You took a very interesting approach to ads: 8 pages in elegant black, with your sponsors’ logo and a blurb in white. Can you tell me more about that?

One thing that always puts me off in high-quality magazines are the ads. Not only are they disruptive, but often they’re just plain ugly. At the same time, I know how important they are in making a magazine financially viable.

By presenting the sponsors in the center of the magazine as an elegant showcase, the reading experience feels less interrupted, and the sponsors still get the attention they deserve. The magazine doesn’t shy away from telling readers the obvious: we depend on these companies.

To be honest, I was a bit hesitant at first, but can now say with confidence that this approach works really well for all involved: multiple people mentioned that, for the first time, they read every single word in a magazine—including in the ads. At the least, people notice the different approach which makes them more effective than typical ads.

It certainly takes a bit of courage and readiness. To my surprise, the sponsors for the first issues didn’t need much convincing. I think that was partly because they have little experience and expectations in print ad campaigns. The initial sponsorship fee for the first issue was fairly low, so there was low risk in giving this approach a try.

How did your experience as a web designer inform this project? Has this changed the way you approach your web work today?

One big takeaway from spending months in InDesign is that I now feel a lot more confident in my typographic skill set. There is still much more to learn, but I have a better understanding of the nitty- gritty that’s involved in providing this kind of reading experience—something many designers growing up in the digital era are simply not aware of.

Webfonts have come a long way over the past 2 years. What has been your experience doing typographic treatments on the web?

It certainly has come a long way. Iremember using 11 px Verdana in pretty much ALL my web designs in the early 2000s. The introduction of hosted font delivery services such as Fontdeck, Typekit and Google Webfonts has been a game changer. Being a self-taught web designer, I never gave typography the attention it deserves. So these services, web standards and new browser technologies have helped thousands of web folks like me learn more about typographic fundamentals.

I do recognize that typography on the web still has hurdles to overcome. Kerning can be a tricky business and is hard to get right even in print (still learning myself), but it is entirely disregarded on the web. I also enjoyed having a baseline grid in InDesign. I know there have been attempts (more like work- arounds) to create a baseline grid on the web too, but they never really work on a complex scale. It begs the question whether all these principles should be applied equally to the web. I can’t imagine a baseline grid system that operates reliably across browsers, platforms and devices, and still leaves enough freedom to do the very detailed pixel-adjustments required in great UI design.

Right now, the variety of typefaces and styles suddenly available feels a bit like when my mum discovered the fonts menu in MS Word. It has never been easier to impress someone by setting our body text in Proxima Nova. Don’t get me wrong, I love seeing all these new typefaces around on the web. But it would be great if all of us took this opportunity to first learn more about the underlying principles of typography and how to use them considerately.

Sponsored by H&FJ.

Offscreen

There are two different interpretations of the concept of the private press. There is an approach that takes the term in a very wide sense. The hallmark of the private press is that the profit making principle is non-existent. Financial gain is not part of the process. The printer produces a book purely for personal satisfaction or for the pleasure of a circle of friends — the ‘book for book’s sake’. Those involved created books by traditional printing and binding methods, with an emphasis on the book as a work of art and manual skill. Such an interpretation allows for a wide historical overview. The ‘Officina Goltziana’, for example, has been called the first private press in the Low Countries. This press was founded around 1562 in Bruges by the painter and numismatist Hubert Goltzius at the request of his patron, the bibliophile and collector Marcus Laurinus, Lord of Watervliet, who produced a history of antiquity based on coins and medals for which he needed the co-operation of a skilled artist. He persuaded Goltzius to move to Bruges, become a citizen and start a printing shop. The first book came off the press in 1563: C. Julius Caesar. It was intended to be part of a series of nine works. Three years later, the Fastos magistratuum et triumphorum Romanorum appeared. Both books are particularly beautiful due to austere typography and the images of coins. Some commissioned copies are known to have had special bindings.

Poems by Morris friend Dante Gabriel Rossetti (Special Collections Amsterdam)

Others limit the development of the private press in stricter chronological terms. The history of the ‘private press movement’ starts with William Morris’s foundation of the Kelmscott Press in 1890 and the publication of his own work The Story of the Glittering Plain. There were predecessors of course. To many bibliophiles, Horace Walpole had set an early example of the notion of a private press. He founded his Strawberry Hill Press in June 1757, a press that was unique for the importance of the books, pamphlets, and ephemera it produced. And then there was William Blake. The latter had experienced that his powerful visions were a commercial failure and that his interpretation of Young’s Night Thoughts did not sell. As a painter and poet he needed to create a medium through which he could reach kindred souls. To this end, he published his splendidly illuminated books.

It was William Morris who succeeded in establishing a profitable private press. His initiative gave birth to a host of presses in England and Europe. Fin de siècle aestheticism fuelled the private press movement. Lucien and Esther Pissarro’s Eragny Press, Rickett’s Vale Press, Ashbee’s Essex House Press, Cobden-Sanderson’s Doves Press, all have their origins in the interest engendered by Morris’s experiment. John Horby’s Ashendene Press carried forward the idealism of the private press movement into the twentieth century. The life of the press spanned forty years, from the Victorian period to the beginning of the modern era. After the Great War was, a new generation of private presses came to be. The Golden Cockerel, the Nonesuch, the Shakespeare Head, and others continued the tradition. In Europe, the Zilverdistel, the Cranach Press, and the Officina Bodoni made outstanding contributions. Members of the movement shared a variety of attitudes and features that were significant within the context of the time, such as political protest and anti-capitalism (William Morris), although some of its most enthusiastic adherents were extremely rich men who could afford to equip fine print shops and hire experts to run them (Walpole’s Strawberry Hill, Kessler’s Cranach, Hornby’s Ashendene Press); alternative life style and sexual liberation (Eric Gill, Robert Gibbings, Harry Kessler); stylistic and physical regeneration; a contempt for industrial mass-production, etc. Although the emergence of ebooks has given the rich tradition of the Book Beautiful a renewed and contemporary impetus, the ‘private press movement’ belongs to the late nineteenth and early twentieth century.

William Morris was a major figure in the Arts and Crafts Movement, a loosely-linked group of artisans, craftsmen, architects, and writers who sought to elevate the status of the applied arts in a revolt against Victorian tastes and manufactures. The movement initially developed in England during the latter half of the nineteenth century and was inspired by the demands of social reform by thinkers such as Walter Crane and John Ruskin. Their concepts of good design were linked to notions of a decent society, one in which the worker was not brutalized by modern factory conditions, but would take pride in his skill. Mass produced consumer goods were shoddy in design and quality. The Arts and Crafts Movement stood for the revival of craftsmanship. Medieval Guilds provided a model for the ideal craft production system.

During the 1870s Morris became increasingly radicalized in his political ideas. His commitment to Socialism was an attempt to resolve the enormous disparities which he perceived as existing between things as they were and as they should be. Capitalism, in his opinion had rendered bourgeois culture spiritually sterile. He began reading Marx’s Das Kapital in a French translation, and soon declared himself a Marxist. In 1884 he founded the Socialist League, and became its first treasurer as well as editor of Commonweal, the official party organ. In lectures and in print, he called for a Socialist Revolution in England with the ultimate aim of transforming Victorian Britain, which had been ravaged by the Industrial Revolution, into a communal society. By 1890 anarchists had gained control of the Socialist League. William broke with the League and led the Hammersmith Socialist Society, a precursor of the Fabian Society, until he and his followers were reconciled with the Social-Democratic Federation in 1894. Thereafter he devoted much of his time to the Kelmscott Press.

During the final phase of his life Morris combined his love for medieval literature with his craftsman workshop ethic into the Kelmscott press, the first of the private press movement. Joined by fellow socialist and typographic expert, Emery Walker, Morris studied incunabulum from which he drew inspiration for manufacturing his own paper, ink and type design. The Kelmscott project is very much in line with Morris’s philosophy and cultural criticism. With the design of books published by his Press, Morris hoped to re-awaken the lost ideals of book design and inspire higher standards of production at a time when the printed page was at its poorest. He particularly admired and studied the letterforms of Nicholas Jenson. He had those letters photographed and used them as the basis for his own Jenson adaptation, Golden Type. In seven years of operation the Kelmscott hand-operated press published fifty-three books in 18,000 copies. Morris stands at the beginning of the golden age of the private press movement which brought an increase in appreciation for fine printing and revived the skills of typographic design.

Morris’s masterpiece was the Kelmscott Chaucer, the pinnacle of his career as a typographer and designer. The 556 pages and eighty-seven illustrations of The Works of Geoffrey Chaucer, Now Newly Imprinted (Hammersmith: William Morris at Kelmscott Press, 1896) took several years to complete. In total 425 copies of the book were completed by a total of eleven master printers. Morris had the Chaucer font cut specifically for this book. The woodcut illustrations were designed by Edward Burne-Jones, a student of Dante Gabriel Rossetti and one of the leading figures of the Pre-Raphaelite school. This publication fulfilled Morris’s vision of what could be achieved through a combination of modern printing techniques and traditional crafts. The medieval style font, ornamental borders, decorative capitals and frames, combined with the woodcut illustrations, provide a fine setting for the poetic works of Chaucer (The Canterbury Tales, Troilus and Criseyde, The Parliament of Fowls, The Book of the Duchess, The House of Fame, and The Romaunt of the Rose). Burne-Jones considered it the finest book ever published and called it ‘a pocket cathedral’.

The Kelmscott Chaucer (Special Collections, Amsterdam).

The book was immediately hailed as a masterpiece, the most spectacular publication to emerge from the Arts and Crafts movement, and the zenith of private press publishing. In October 1896, shortly after publication William Morris died. An original copy is now in the British Library’s ‘Landmarks in Printing’ Gallery, alongside such treasures as Shakespeare’s First Folio and the Gutenberg Bible.

About the author:

Jaap Harskamp holds a Doctorate in Comparative Literature from the University of Amsterdam. He has just retired as Curator of the Dutch/Flemish Collections at the British Library and is now involved in a project at Cambridge University Library. He is Honorary Research Fellow at the Department of Dutch Studies at University College London.

Sponsored by H&FJ.

A Pocket Cathedral

A review by James Puckett

Jim Williams is a senior lecturer at Staffordshire University, where he compiled an excellent series of student handouts about typography. In 2010 the handouts were featured on Creative Review’s blog which generated interest from publishers. The handouts have now been published in book form as Type Matters. Williams is well qualified to write this title; he has worked as a typographer and designer since 1982 and has taught design at Staffordshire University for eighteen years.

Type Matters is printed in black and red on a substantial cream stock, and bound in a faux leather cover to resemble a field notebook. It would fit in fine at a digital design studio or a letterpress shop. This format lends itself to gift-giving when you need a present for an editor who thrives on the AP or Chicago style manuals.

Type Matters is unpretentious, unassuming, and reductive. Explanations rely heavily on elegant typographic diagrams that dominate most pages. Quotes from older typesetting manuals provide the text for the diagrams, set in a variety of classic types. Combined with the black and red printing and cream paper the book takes on the feel of a vintage type specimen. Readers are expected to study the diagrams, and some concepts, like x-height, are only introduced via a diagram. Once the book has been read it will make a great reference tool for students and designers alike, especially those less inclined to read lengthier, more comprehensive texts.

Occasionally Type Matters is too brief. Superfamilies, typefaces having a serif and sans, are left out of the explanation of families. Figures are defined only as being oldstyle or lining; tabular and proportional figures are not directly explained. En dashes are shown as roughly the width of the letter n, with the accurate definition of half of an em appearing only later in the glossary. Williams refers to the typefaces he uses by the names of the fonts, rather than the name of design. Bitstream knockoff fonts are often used, and called by their Bitstream names. This may lead readers to believe that Univers is called Zurich, Helvetica is Swiss 921, and Stempel Garamond is Original Garamond.

The book covers some topics that are either odd or just obscure; for example, “Cogent alignment” — ragged type with long lines justified, a habit of the British firm Cogent Elliot in the 1980s. Also shown is letterspacing lowercase within a block of text to create emphasis, described as a technique from medieval printing. Neither of these is described as typical or contemporary, but it seems odd to bring them up at all. On the other hand, Type Matters might be one of the only introductory text that explains how slight horizontal scaling of text can be employed to improve justification, a topic rarely covered in books that dismiss any scaling as a “type crime”.

Accompanying the main text is a list of proofreaders’ marks, a glossary, and a list of more books on typography. These little appendices add some value both for students and as a desk reference for working designers.

Type Matters is a solid addition to the field of introductory texts on the subject of typography. It is not perfect, but the innovative presentation and short text makes it a great option for design students. And it may be the best gift around for friends and coworkers in need of a quick education in typography.

Type Matters!
ISBN 978-1-8589-4567-5
Jim Williams
Merrell

James studied graphic design at the Corcoran College of Art and Design in Washington, DC. He developed a love of typography at the Corcoran and wrote a thesis about the development of versatile typefaces as branding devices. After graduating with honors James decided to pursue type design full-time. In 2009 he started Dunwich Type Founders in New York City.

Sponsored by H&FJ.

Type Matters

Compare this fifteenth-century mise-en-page with a mass-market (miser-en-page?) twenty-first-century book. Look at those margins. The book on the left is just begging to be written in (not now because it’s valued at tens of thousands of dollars, but you get the idea); the book on the right has margins on hunger strike, margins that look reluctantly marginal.

Now there is an economic incentive for making the margins smaller: smaller margins equal less paper, and paper doesn’t grow on trees (at least not free ones), but the margins are not where corners should be cut.

For me the margins serve three purposes: First aesthetic, in that they border the text, give it room to breathe, they define the text block. Margins are designed. They are not or should not be what’s left over; second (practical or ergonomic): The shape of books, their size, is dictated by the shape and size of their readers. Books aren’t a meter wide, because, even if we were blessed with the armspan of a wingspan of a Golden Eagle, they still wouldn’t be very practical or readable. Type is the size it is because of the length of our arms and the power of our eyes. The outer margins, then, are the handles, and they should accommodate thumbs of all sizes, and they must be broad enough that the venerable text is protected from those soiled thumbs of all sizes. But it’s not only the outer margins that are dieting; the inner margins in many books are too narrow, and this is especially a problem for many so-called perfect bound books that generally (depending on the page count, weight of the paper, and material used in the construction of the cover) don’t open flat. One ends up almost breaking the spine in an effort to read the text that runs into the gutter or inner margins.

Reading may be a collaborative act, but it is one in which the reader is tyrant, the author a mere subject. The whitespace in the margins is there for the taking. — Mandy Brown

A typographically claustrophobic page puts me on edge, has me hurrying through the text. Add a little serene whitespace and I’m in my hammock on a beach, sipping a cocktail — typographically speaking.

Third: the conversational margin(alia). Generous margins permit — perhaps even elicit — a conversation between author and reader.

Perhaps fifty per cent of the character and integrity of a printed page lies in its letterforms. Much of the other fifty per cent resides in its margins. — Robert Bringhurst

Now those are margins.
Book: Fournier, the compleat typographer — Allen Hutt

Perhaps I’m singing to the wrong choir. Perhaps I’m singing to a choir that no longer sings, that longer exists. Perhaps no-one wants to write in the margins?

Sponsored by H&FJ.

Make the margins bigger

The story begins in 2006 with a trip down Route 66. Day in, day out, I looked at U.S. traffic signs that were either set in the old, somewhat clumsy “FHWA font series” or the new Clearview HWY typeface. Approaching the signs, I would often test myself: which typeface works best from a distance, and which of its features or details might be responsible for its performance. I had so many more questions than answers. Surely every professional type designer has at least an inkling of how a signage typeface should look: Probably it sports a rather clean sans serif design, open counters and a rather large x-height. But which x-height works best, and why? What is the optimal stroke width? A monocular or binocular g? Should the design be somewhat condensed to permit more information on a sign, or rather should it be relatively wide so that individual letters are more easily differentiated?

Studying Existing Road Signs

I was unable to fully answer those questions, but felt that I must find the answers, no matter what the cost. Back in Europe I began studying the typefaces on road signs just about everywhere the Latin script is used. But looking at photos or signage specifications doesn’t reveal much about the actual performance of those typefaces. So I set off, driving thousands of miles across Europe to explore the legibility of these signs and typefaces, first hand. Once I even ended up in a holding cell at the border crossing to Norway, because the customs officers just wouldn’t accept that someone would drive all over Europe simply to take photographs of traffic signs. (See my FLickr sets World of Traffic Signs and Type on Traffic Signs.)

I was surprised by the sheer variety of type styles I discovered on my journey. Even though all road signage systems are intended to be as legible as possible, there appears to be no consensus on how to achieve this in terms of type treatment. Some road signs used grid-based typefaces, some were extremely wide geometric typefaces with the simpler forms of a and g, some very thin, and some very heavy. These days, with digital sign production, we see more and more print typefaces (like Helvetica) and even system typefaces (like Arial) on signs. The old geometric and grid-based typefaces were mostly a product of the drawing and sign-production methods of the time. Today we can choose from hundreds of very legible, high quality print typefaces; however, during my own research I remained skeptical that simply plastering our best print typefaces on road signs would be the best way to go.

Top-left: Germany. Bottom-left: Italy. Right: Holland.

A typeface on a sign that is read from 300 yards has different requirements than a typeface read in a magazine, from your armchair. And even if the typefaces are designed specifically for signage, they are often a local solution that just doesn’t work everywhere. For example, the Transport typeface used in the U.K. is a very good and legible design, but it is designed for English words and names and is far too wide for the generally longer names of German cities. Another example is the Clearview typeface with its extreme x-height, which works on American road signs, but not so well for languages using numerous diacritical marks. So in the end, for every typeface I checked and tested, I discovered both advantages and disadvantages. There was not a single typeface that I could recommend for signage in every situation.

Once I even ended up in a holding cell at the border crossing to Norway, because the customs officers just wouldn’t accept that someone would drive all over Europe simply to take photographs of traffic signs.

Creating Wayfinding Sans Pro

So I determined there was still room for a new signage typeface with a broad range of potential uses, and I hoped that I could design one that would even be more legible than the common existing ones. From the outset it was very important to me that I did not base my work on any of the existing typefaces typically used for signage. I wanted to build my typeface from the ground up, challenging every design principle of signage typefaces. But this also led me to my first major design problem. A signage typeface is all about the moment — when you come close enough to the sign that it just becomes readable. And it’s here where you can actually make a difference. When you attempt to improve the recognizability and distinguishability of these blurry letters just a fraction, the typeface becomes easier to read from a greater distance, thus you have already created a more successful signage typeface. But how should I create a typeface for a reading situation that I can’t actually replicate? A screen typeface is judged on screen, a print typeface is judged from print-outs, but testing every little design detail of a signage typeface by always mounting different designs on actual signs would be, to say the least, rather impractical.

A typeface on a sign that is read from 300 yards has different requirements than a typeface read in a magazine, from your armchair.

A New Design Approach

That’s when I came up with the idea of the Legibility Test Tool, an OSX application I built that offers real-time simulations of different viewing conditions (distance, fog, halation, and positive/negative contrast) during the design stage. While I was working in my font editor on the design of individual letters, the tool simulated views of test words with the letters I was working on. With this tool I could completely remove the guesswork, therefore optimizing my design for even the very worst reading conditions. Often the simulations surprised me. Sometimes I was tempted to design my typeface in the way I was accustomed to from the print world, but the tool clearly demonstrated that the reading conditions of road signs require a unique design solution for maximum legibility within this context.

Design Principles of a Signage Typeface

The design process itself was also very different to that of designing a typeface for print. Usually a type designer first sketches out the outlines of certain letters. But naturally, this focuses on the final design and its stylistic details. However, these very details will be the first to disappear when the text is read from a distance. What matters here is the skeleton of the letterforms. So in the beginning I worked with nothing but single-line letter skeletons and no character outlines. This allowed me to apply different stroke widths to those skeletons, thus testing the crucial correlation between the letter skeletons and the applied stroke widths. I also experimented setting the stroke width of my own letterforms to match those of existing typefaces. With this procedure I could directly compare the performance under difficult viewing conditions, and could optimize my design for maximum legibility — arriving at solutions superior to those of existing signage typefaces. A typical result of this working method are the slightly exaggerated details like the wider crossbars of characters such as f and t. Making them rather short in print typefaces permits tight and even spacing within words, but it also makes letters such as l, t, f, and sometimes even i, harder to distinguish, especially when the text is to be read under difficult viewing conditions. So I always tried to create a rather generic letter skeleton that was familiar and easy to recognize; but I also attempted to stress the individuality of each letter to increase letter differentiation, especially for pairs of similar letters.

Crucial letter pairs:
— CG in the Dutch road signage font (top) and Wayfinding Sans (bottom)
— OQ in the French road signage font (top) and Wayfinding Sans (bottom)
— f l t in the German road signage font (top) and Wayfinding Sans (bottom)

Comparison between Helvetica & Wayfinding Sans Pro.

Another crucial feature is the stroke width. When I compare existing typefaces in my Legibility Test Tool, all the typical stylistic differences quickly disappear. But what remains ,and has the most important impact on the legibility, is the letter’s skeleton, the stroke width, and the interplay of these two elements. Sometimes signage typefaces are extremely bold — the rationale being that a bolder stroke can be read from a greater distance. However, an increase in stroke width comes at the cost of smaller counters and therefore reduces legibility. This problem has become even more problematic in the last few decades, with the increasing use of more and stronger retroreflective sheeting for road signs and backlit signs in airports, subway stations and so on.

Comparison of Wayfinding Sans Pro (top) and the Spanish & Italian Road Signage font.

Therefore, I think that the best solution is to define the stroke width and the x-height of the boldest style, based on crucial letters such as a, e, and s, which have up to three strokes within the x-height. When the strokes of these letters are still clearly visible — even under the halation effect of retroreflective or backlit signs — then the typeface will perform well for signage. Diacritical marks are also an important part of many languages using the Latin script. Again, what might be desirable in print, might not work for signage. On signs the diacritical marks must be unmistakable in their design and prominent in their size, because such separated letter parts will be the first to become illegible or even invisible when viewed from a distance.

Left: diacritical marks in the British & Polish road signage font.
Right: Wayfinding Sans Pro.

Figures are usually designed to blend or harmonize with letters. But the figures of Wayfinding Sans are optimized for the requirements of signage use: maximum distinguishability and lining tabular design, though Oldstyle and proportional figures are also available via OpenType features. Entering and positioning arrows with text in a signage layout can be a time-consuming task. But the arrows of Wayfinding Sans can easily be typed along with the text, simply by activating a Stylistic Set and typing the appropriate code. These codes follow a simple naming scheme based on the cardinal directions: “hyphen hyphen n” will create an arrow pointing up (“North”); add an “e” for East and the arrow will point North-East.

Empirically tested

When presenting my work in progress at conferences, I was often asked about scientific proofs for the legibility of my typeface. Personally, I didn’t feel that I needed such proof. I had based my work on a solid theoretical framework, and with my Legibility Test Tool I could simulate the very worst viewing conditions possible. If my typeface performed well in these extreme simulations, then it would also work well for any typical signage use. But as it happens, an independent empirical legibility study was recently conducted at the University of Applied Sciences “htw” in Berlin.

Mittelwert: average

Minimalwert: minimum
Leseentfernung: reading distance

The study tested different typefaces in the context of signage use. I was asked to provide a style of Wayfinding Sans Pro. I shouldn’t have been surprised about the results, but I was certainly happy about them: Wayfinding Sans Pro (bold condensed) was the winner in all conducted tests. It could be read from a greater distance than any of the other styles of the tested typefaces — among them typical signage typefaces like Frutiger, DIN 1451, Johnston Underground, and Futura.

In 2009, I wrote about the progress of my work under the title “The Ultimate Signage Typeface.” I was not suggesting that I had created the ultimate wayfinding typeface; rather, I was attempting to describe the process in creating one. The article received a lot of attention and commentary — I knew I was onto something, so worked even harder toward the goal of creating a typeface that would be worthy of such a title. We have now begun work on additional pictogram fonts comprising hundreds of common wayfinding symbols — the perfect accompaniment to Wayfinding Sans Pro. To take a closer look at the typefaces, check out the PDF type specimen. Wayfinding Sans Pro has just been released and is available in 20 styles at fonts.info and MyFonts.■

About the author:

Ralf Herrmann studied graphic design at the Bauhaus University Weimar. He is the author of several typography books and founder of the type foundry fonts.info & the German typography community Typografie.info. Since 2009 he is the editor of the German typography magazine TypoJournal. Currently Ralf Herrmann is doing his PhD at the University of Applied Arts in Vienna. In his dissertation he will research the implications of cognitive map research applied to the design of maps and wayfinding systems. Ralf also teaches typography for the MSc course Traffic & Transport Information Design organized jointly by the International Institute for Information Design (IIID) and the University of Applied Sciences FH St. Poelten, Austria, under the auspices of UNESCO.

Sponsored by H&FJ.

The design of a signage typeface

Peter Biľak

I remember a conversation from back in my student days where my typophile friends and I debated what the ultimate typeface of the twentieth century was, a typeface that summed up all of the era’s advancements and knowledge into a coherent whole, one that would be a reference for years to come. Helvetica was one of the candidates for its sheer ubiquity, proof of its overall acceptance. Another, more subtle proposal was Jan van Krimpen’s Romulus, one of the first typefaces to have related Sans and Serif versions. And another, my personal pick, was Univers by Adrian Frutiger.

Univers specimen, Deberny et Peignot, Paris, 1964. Thanks to Linotype GmbH for providing the illustration.

Univers goes beyond the quest to design individual letters, attempting instead to design space, to create a system of relationships between different sets of shapes which share distinctive parameters. Prior to Univers, type designers concerned themselves with the relationships between letters of the same set, how an a is different from a b.

Univers creates a situation in which there are a’s of many different shapes, and each has to be positioned on the axes of weight and width, distributed sufficiently far away from the next, but no further, in order to create a usable system. How heavy ought the Medium to be in order to leave space for yet another weight, the Bold, and how will this translate into a design with condensed proportions? These were all new questions for type designers, and Frutiger opened up completely new territory for those who were to come after him.

Thanks to Frutiger it is now common practice to produce a dozen or more styles when working on a new type family. In terms of typeface innovation there is much more room for originality than when you only look at the individual lettershapes. Thus to create truly useful new works, type designers need to examine not only how characters relate to each other within a style, but also how different styles relate to each other within a family.

Gardener vs Architect

Greta Sans.

I’ve designed large typeface families before. Fedra, for example, now has over 116 individual styles supporting 170 languages, and has been used in the most complex typographic situations from dictionaries to newspapers, Bibles and information graphics. But it is not really an example of a font designed to be a typographic system from the start. It started in 2001 as a relatively small family of Sans, and over the next 10 years it grew to include Serif, Monospaced, Condensed and Display styles, as well as different language versions. Fedra is an example of a bottom to top approach, in which a relatively simple design gets larger and more complicated over time. Composer Brian Eno calls this the gardener’s approach: nurturing simple things towards greater complexity, carefully planting seeds, and helping them grow to their full potential.

The opposite organising principle, again in Eno’s words, is the architect’s approach. An architect traditionally starts with a concept, developing the complete idea first, working from top to bottom. History (2008) is an example of the architectural approach, in which each individual style contributes to a greater purpose, sharing proportions with the rest of the family.

Greta Sans is another example of this approach. It has been carefully planned from the outset, designed as a system of interrelated styles. From the very beginning work proceeded on multiple styles simultaneously; not only when sketching the extreme and middle styles on paper, but also when converting the resulting shapes into digital format, the emphasis was on testing how certain letterforms react to extremely compressed dimensions as well as very generous ones.

Only after being tested at each end of the proposed spectrum would the designs be selected and adopted into the typeface family-to-be. Each glyph would have to anticipate all its variations and maintain a basic structure that could function across all designated width and weight variations.

The Problem With the System

The nature of systems is to dictate a certain direction; the role of designers is to recognise when the original design idea ceases to work within the system, and then to create exceptions to the system rather than letting the system have a negative impact on the design. In large type families of related styles this impact is usually that while the starting point is usually characteristic and recognisable, the design becomes blander and less interesting as it is stretched across its variations. My intention was to design a highly flexible system while also ensuring that the resulting shapes were not just compromises, but maintained the strong personality of the Greta typeface.

For example, at the lighter end of the weight axis, the circular dot over ‘i’, (or in diacritics and punctuation) has to become a rectangle to avoid becoming too small. On the width axis, shapes would sometimes have to be modified even more dramatically: the double storey ‘g’ typical for Greta becomes a single storey ‘g’ in Compressed width, where the lack of space demanded greater simplification. Dollar and cent signs have full crossbars in the wider versions, but divided crossbars in the condensed versions. Dozens of other changes happen when taking the design to extreme dimensions, in order to maintain the general design characteristics and preserve the natural look of the shapes.

The process of drawing Greta Sans started in the middle of the imagined design space (1), and from there the extremes were explored (2). The idea was to adapt the design to the available proportions, while preserving the main design characteristics.
When designing design masters, we design the heavy weight as heavy as possible, even when the exact weights will not be used. It is easy to interpolate and make the Black weight lighter; making it heavier is complicated. This allows keeping the design space as large as possible (3), which is reduced later, when the final selection of styles took place. We decided not to use the Compressed Black as a master, and stepped it down one weight. We dropped also extra compressed styles. On the other hand, we’ve added an extra weight to Extended styles (Super), when we saw there was available space for an extra style.

While the Fedra Sans family was created from two design masters, Light and Bold, (Book, Demi and Medium were interpolated), Greta Sans’ 13 design masters were individually designed, as were another 13 masters for italics, and all 26 included Small Caps. The masters (Hairline, Regular, Black), were interpolated and expanded to 10 weights. Four widths were imagined and implemented, resulting in 80 styles.

Continuous Optical Sizes

In the earliest age of movable type, optical sizes became the main organising principle of typefaces. For example, Jannon’s caractères de l’Université from the 1530s include numerous optical versions ranging from 6 to 36 points, each slightly different. The design of the typeface would be reinterpreted at each given point size, often resulting in different weights, different proportions, different letter spacing. These different designs would blend into a harmonious size progression and function as one design. Optical sizes disappeared with the transition from hot metal press to photocomposition sometime in the 1950s. After about 50 years of neglect optical sizes have made a comeback, and many typefaces now come with versions specifically designed for text and display applications. Optical sizes, however, represent a range of variations. In the old days, as in the Jannon example, typeface would come in as many as 15 optical versions. All the in-between sizes progressively added or removed features, getting continuously darker and looser when meant for small sizes, or continuously lighter and tighter for large sizes. The word continuously is important here. There weren’t text or display versions as is common now. Each size was discretely adjusted to maintain the characteristics of the typeface.

Greta Sans is designed as a continuous optical size system. While the basic text styles (Regular) are spaced and optimised for small sizes, the surrounding extremes (Hairline, Black) are designed to be used as Display types, and therefore tightly spaced and kerned. The resulting interpolation then runs continuously from Display to Text to Display use. A similar pattern (Extended, Condensed, Extended) can be seen on the width axis, as the Regular styles are most suited for small text, and extremes are optimised for large sizes.

Design Space

While the key characteristics of most typefaces are defined by the outlines of the letterforms, Greta Sans’ design also extends to the gaps between styles. All its characteristics, including the visual contrast between styles, weights and widths have been orchestrated into a unified typeface system. Greta Sans explores the entire space of possibilities and is designed for extraordinary design flexibility. It is a toolbox that addresses a broad spectrum of design situations from the simplest to the most complex, offering multiple options for establishing a visual hierarchy.

Next

Greta’s Latin fonts set up some formal parameters, but the most exciting phases of this project are still to come. While such a versatile system of similar proportions is rare within the context of Latin typefaces, it is unheard of in the domain of non-Latin type. We intend to bring this system to a number of non-Latin styles planned for 2013–14. There is no reason why only Latin type should benefit from these advances in typography.■

Greta Sans was conceived by Peter Biľak; designed and produced together with Nikola Djurek.

Sponsored by H&FJ.

Designing type systems

Sponsored by H&FJ.

Type Camp India

Rhythm in riven slate.

Left: Carving robust letters in relatively soft Portland stone. Right: This slate was carved by an apprentice as an exercise in good rhythm & spacing.

Left: The beauty of slate is that it permits such fine carving. Right: An experiment using a type designed for paper on slate.

Gilding an opening plaque in Welsh Slate.

Carving readable, chunky letters in Cotswold stone.

Sponsored by H&FJ.

Letters & Stone