Jost Hochuli: In Conversation

Jost Hochuli

Jost Hochuli, the renowned book designer, graphic designer, typographer, printer and author of Designing Books, and Detail in Typography has had a slow but steady impact on modern book design and typography. First, through his work, especially that for VGS and Typotron; then through his teaching at the Schüle für Gestaltung in St. Gallen; and more widely through his publications on typography and book design.

Through these books, especially the English language edition of Designing Books, he has become probably the most influential theorist of book design since Jan Tschichold.

Jost’s belief is that book design is not just concerned with beautiful objects, but rather it is about making useful tools for reading.

Apprenticed to Rudolf Hostettler at Zollikofer Verlag (publishing company) in the 1950’s, anecdotally only two typefaces were permitted in the works – Akzidenz Grotesk and Times New Roman. Working in the modernist style known as Swiss or International school, the goal of the apprentice typographer was to simplify page design and layout so that there was no typographic ‘noise’.

Although we think of the Swiss school as being the dominant style in Europe in the fifties and sixties, in fact it was largely confined to Holland, Germany and the German-speaking part of Switzerland. Even within Switzerland, designers in the French-speaking cantons looked to France and Didot, designers in the Italian-speaking cantons to Milan and Bodoni.

Nevertheless, the Swiss school, following the path laid down by the Bauhaus architect, industrial designer and typographer Max Bill won worldwide recognition in the decades following the Second World War

“We were simply louder” said Hochuli.

Bill urged Swiss designers to follow modernist “‘asymmetric’ or organically formed typography”, to reject “the conventional text-image of axial symmetry”.

In response, contemporary designer Jan Tschichold defended the need to design some books “in the manner of traditional typography” while allowing that others might be more suitable done in Bill’s ‘functional’ typography.

As Hochuli developed his style, he was influenced by Tschichold’s plea for “the right to work in the way that I find best”, whether ‘newly revived traditional typography’ or ‘functional typography’.

Although Tschichold never visited the Zollikofer works, Hostettler considering him “A traitor to modernism”, Hochuli followed a middle path between the modernism of the Bauhaus and die neue typographie and traditional book design, before ultimately rejecting the rigidity of the grid.

Preferring to use consistent channels of white space between elements to create harmony on the page, Hochuli’s graphic design practice aimed to capture the feeling of the work through typographic layout that created “adventures on a page”.

Thus echoing the principle ‘form follows function’, Hochuli’s preference is for content to come before design, although, as Hochuli has reiterated on several occasions, the designer must not follow dogma.

--

Jost Hochuli was in conversation with Tony Pritchard, LCC senior lecturer and ISTD board member.

In association with International Society of Typographic Designers, London College of Communication, Presence Switzerland and the Swiss Cultural Fund.

Unbuntu open source font project

Following on from Bruno Maag's presentation on fonts and branding, I wanted to find out more about Dalton Maag's Unbuntu* open source font project.

Unbuntu is a free to use open source operating system developed by Canonical.  What sets Unbuntu apart from other open source projects is the aim of creating for the user a friendly and consistent experience from code to graphical user interface (GUI) to print.

Part of Canonical’s design philosophy is to ensure that users can use programs in their own language, so the font used for the operating system (OS) needed to work across a range of character sets including Arabic, Cyrillic, Greek, Hebrew and Latin and is designed so it can be extended to include other languages including Chinese, Indian and Thai.

Establishing the nature of a font requires a structured design framework to inform each stage. The difference with this project was the involvement of the Open Source community throughout – essential to influence the process and confer a sense of ownership. The design process had to be completely transparent with a flow of information in both directions.

As a core part of the Unbuntu brand identity, the new typeface needed to embody the Unbuntu values of clarity, lightness and simplicity, so early in the design process Dalton Maag established that a humanist sans serif was the most appropriate look and feel for the font.

This decision was in part dictated by the required functionality of the OS; the need for the font to work on screen at small sizes meant avoiding anything too elaborate or too wide.

Humanist fonts have their roots in early round hand calligraphy, and are seen as friendly, warm and highly legible. The clean lines and large x-height of a sans serif help with on screen readability, print well and have a contemporary feel.

The initial concepts were designed using a small number of glyphs, but enough to be able to create test copy, and get a good idea of what the finished design would look and feel like. Beginning with the Latin, Dalton Maag started designing with the four letters, n o H O, and these glyphs helped to define a guide for around 80 percent of the remaining character set.  The distinctive shapes for the ‘n’ and ‘v’ and a slight curvature to the ascenders and descenders helped establish the overall personality of the font. These unique design features would be translated across all the character sets to ensure that the design was a complete and consistent family.

The final font design includes four weights from light to bold plus their italics, a monospace font and a condensed regular.

The italic versions were designed as true italics where the a,e,f and g have different shapes that add subtle emphasis and textural difference to the roman text.

The designers also needed to consider the spacing between letters, as this creates a natural rhythm in the text that helps the reader to read with ease and understand the message. Manual adjustments, including kerning pairs, were addressed to ensure that the finished look was aesthetically pleasing.
Cultural sensitivities and nuances also needed to be taken into account for the left to right reading Arabic and Hebrew fonts. Arabic glyphs are derived from one another, but change meaning with the addition of diacritics, whilst Hebrew letterforms have a squarer feel and ‘hang’ from the x-height rather then sitting on the baseline.

Dalton Maag’s engineering team then performed a complex process to ensure that the font rendered on screen correctly. This included a checking and verification process to make sure that it met TrueType specifications, the addition of Unicode system information to identify each glyph co-ordinated across all the font styles and weights, and extensive manual hinting to make the font appear faithfully at any resolution on any device.

Finally the fonts were tested in a number of different environments and applications to check that they behaved as intended before being released.

The final design is a beautiful example of typographic design. It gives shape to the Open Source philosophy of Ubuntu, whilst remaining functional and aesthetically pleasing.

Exhibited in the Design Museum, the Unbuntu font family is a practical example of how a the partnership between the Open Source community and professional type designers can use the power of design to produce something valuable for everyone to use.



*Unbuntu is named after the Southern African philosophy of ubuntu, which often is translated as “humanity towards others” or “the belief in a universal bond of sharing that connects all humanity”.

‘I love Comic Sans’

And so to hear Bruno Maag speak at London Design Week’s Sound and Type lecture in the glamorous environs of the Soho Hotel Screening Room.

His opening statement, that he ‘loves Comic Sans’, drew a predictable hiss of outrage from the designers and typographers in audience, but the point Bruno made is that Comic Sans is completely appropriate for its original purpose, comic book style lettering for speech bubbles in the programs MS Bob and MovieMaker

Comic Sans has a characterful letterform that connects, perfect for supporting letter recognition in early learning (and useful for dyslexics too).

So how do you engage audiences visually and emotionally with your brand? What are the essential elements that make your brand unique? How do you create bespoke tools that set your brand apart?

The challenge presented to branding in the global marketplace is maintaining the brand look and feel across all touchpoints in all markets.

Think ‘international’, and designers reach for their tried and trusted sans serifs, but where’s the emotional connection in the international style?

Remember that the ‘modern’ typeface Helvetica was cut in the 1950’s (itself based on the grotesque faces of the late Victorian 1900’s), putting Helvetica well into middle-age.

Instead, make an informed choice of typeface, one that expresses your brand values and connects visually and emotionally with your audience, a typeface that can be placed right at the heart of your brand.

Global companies, such as HP, see investment in a bespoke typeface as a key part of supporting their brand experience worldwide.

But relying on the Western European character set no longer cuts it. Fonts need to accommodate Arabic, Chinese, Cyrillic, Greek, Indian and Thai characters.

Designing a font for the Chinese market means creating 27,500 glyphs alone and can take up to two years.

And that’s before you take into account Hong Kong and Taiwanese Chinese.

Font design is a major investment, but the recognition value that an appropriate font brings to a brand makes it arguably worthwhile.

Just don’t use Comic Sans unless you’re designing a comic.

camelCase

I’m seeing a lot of camelCase word structures at the moment.

camelCase, also known as ‘medial capitals’ in the OED, is the practice of writing compound words or phrases in which the words are joined without spaces.

The practice is known by many other names, the most common of which is Pascal case for upper camel case.

In UpperCamelCase, each element’s initial letter is capitalized within the compound and the first letter either upper case – as in ‘BlackRock’, ‘MasterCard’ or ‘PowerPoint’, or left as lower camelCase – as in easyJet’ or ‘iPod’.

An early systematic use of medial capitals is the standard notation for chemical formulae, such as NaCl (Sodium Chloride), that has been widely used since the 19th century.

In the 1970s, medial capitals became an alternative (and often standard) identifier naming convention for several programming languages.

Computer programmers often need to write descriptive (hence multi-word) identifiers, like ‘end of file’ or ‘char table’, in order to improve the readability of their code.

It was only in the late 1960s that the widespread adoption of the ASCII character set made both lower case and the underscore character ‘_’ universally available. Some languages, notably C, promptly adopted underscores as word separators (‘end_of_file’) however, some languages and programmers chose to avoid underscores, among other reasons to prevent confusing them with whitespace, and adopted camel case instead (‘endOfFile’).

One theory for the origin of the camelCase convention holds that C programmers and hackers simply found it more convenient than the standard underscore-based style.

Another account claims that the camelCase style first became popular at Xerox PARC. The PARC Mesa Language Manual (1979) included a coding standard with specific rules for Upper- and lower camelCase that was strictly followed by the Mesa libraries and the Alto operating system.

Since the 1980s, it has become increasingly fashionable in marketing for names of technology products (BlackBerry, YouTube), merged companies (PricewaterhouseCoopers, ExxonMobile, GlaxoSmithkline) and for naming your avatar in online gaming (SpongeBobSquarePants anyone?). However, camelCase is rarely used in formal written English and most style guides recommend against its use.

*Santa*™

Its a bit late for this Christmas, but I came back to find a link to the Santa Brand Book from Quietroom in my inbox.

Ho, ho ho!

Stylesheets

One of the recurring issues I’ve had when designing a document is the inability of people to use stylesheets to structure their content.

I’m no longer surprised at the number of clients who cannot, or will not, use stylesheets in Word (“I haven’t got the time to learn all that – can’t you do it for me”), but I continue to be amazed at the number of designers who cannot, or will not, use stylesheets in InDesign/Quark Xpress (‘It cramps my creativity – can’t the setters sort it out”).

I was reminded of this during a recent software presentation that promised to map Word documents into InDesign and then automatically output to print, PDF, web, tablet and mobile. The software used a combination of Extensible Markup Language (XML) and application/device stylesheets, and I have to admit it was pretty fast.

The problem was, that for the system to work effectively, the content in the original (Word) document needed to be structured in the first place – and without that, the mapping software could not map.

(Of course InDesign already has a built in XML tagging option that enables tagged content to be manually repurposed in another file or application. Similarly, you can import an XML file into InDesign and instruct InDesign to display and format the XML data in any way you want.)

To get the benefit of ‘design once, publish many times’, you need to be able to separate the visual style from the document structure – a principle that will be familiar to you if you are used to using Cascading Style Sheets (CSS) in web design.

The same principle holds true for traditional print publishing, and now that Word 11 has improved the way styles work, including adding a ‘Show Styles’ option that interprets levels of heading (even if an outline heading level has not been specified), there really is no excuse for not structuring documents properly.

Doing this at the beginning of the process means that Word styles can be mapped to InDesign styles using tags, and in the same way, tags can be carried across into Acrobat for creating accessible PDFs or HTML for use online on tablet or other mobile devices.

The whole point of technology is that you use it to make your workflow more efficient, leaving you more time to design.

Better, faster, cheaper.

That’s the future.

Scanpaths

Our eyes don’t read in a continuous steady line, but scan for information and look for patterns in a series of rapid left to right skips and pauses, known as saccadic movement.

In order to read efficiently, you recognise word shapes. As you read, you don’t look at individual characters. Instead your eyes scan the x-heights across the word and your brain compares the shape of the word outline with words in your memory, skipping over unfamiliar wordshapes, but creating comprehension based on the context of the surrounding words.

We do this because reading each individual letter in a word would be too time-consuming. Instead the eye moves and pauses as it looks for familiar patterns along a line of text.

The point where the eye pauses is called a fixation, whilst the regressive movement between points is called a saccade. A sequence of fixations and saccades across a design is called a scanpath. (Generally speaking, the number of fixations and saccades and length of time a reader spends on them indicates the relative readability of a typeface.)

In western society, by habit we start reading top left and finish bottom right, so these two areas of the page assume special significance for placing important information. Dominant fixation points like this are known as ‘hotspots’. Placing important information at these points, for example headlines top left, or calls to action at bottom right, help in the exchange of key information.

Research indicates that the human eye has the tendency to follow the same scanpaths when encountering familiar media, so in this situation a designer can place unexpected details or incongruous imagery in the design to create new hotspots to attract the readers attention.

The practical application of this insight is that careful placement of different content types can help lead the readers eye around a page or screen, create interest and/or understanding and improve the structural hierarchy of the communication.

Type legibility

Legibility is the degree to which individual letters in a typeface can be distinguished from each other. Generally, the most legible fonts have a well-balanced proportion of form (the actual letter) and counterform or counter (the ‘holes’ in the letter). The best designed typefaces tend to have larger counter spaces, and due to their frequency of appearance in text, the most helpful aid to legibility is a generous ‘eye’ for an ‘e’ and an enclosed counter for an ‘a’.

However, for any given font size, too large a counter and corresponding x-height means too short an ascender and descender for clarity between other letters. The characters most commonly mistaken for each other are I, j, l and f and t, so the most legible typefaces need to strike the right balance between the size of the counter and x-height and size of ascender and descender.

Whilst problems of legibility can exist in the design of letterforms in individual fonts (for example lowercase Garamond h and b are easily confused, as are the capital I and lowercase l in Arial), research into typographic design for children by the University of Reading suggests that there is no intrinsic difference between the legibility of serif or sans-serif typefaces. Instead, the context in which they are used assumes greater significance.

Two well-documented experiments on the legibility of type are Emile Jamal’s 1878 demonstration that showed that the top half of a line of upper and lower case (U&lc) type is more legible than the bottom half when only half of the line is exposed, and the 1960’s London Transport tests on all caps or U&lc for bus signage. These series of experiments suggested that whilst there is no definitive proof that lower case is visually superior to all upper case, a mix of upper and lower case was more popular with the public.

This fed into the development of the UK motorway network signage when the Ministry of Transport’s Design Research Unit developed one of the most ambitious information design projects ever undertaken in Britain. In tests on signage designs, sans-serif U&lc type with a wide margin was preferred for legibility.

The result of this work suggests that it is not only the visual recognition of the letterform that is important, but also the shape of the word itself and the space that it sits in that the typographer needs to take into account when designing for legibility.

Structured writing

Be clear what you want your writing to say before you start to write it.

What impression are you trying to create? Are you just giving information, or do you want your readers to do something? Who is your audience? Who will read your writing? Think about these groups, what interests them and what you want to say to them. How do they like to receive and use information? Is the visual impact important to them or not?

Inverted pyramid writing
Most people are taught to write by setting up a proposition, building an argument and coming to a conclusion.

However, this presupposes that your reader has the time to read your content all the way through to the end. However, most people skim and scan text in order to extract the salient points as quickly as possible.

Journalists and web editors recognise that their readership is transient and have adopted the concept of inverted pyramid writing to communicate with a time-poor audience.

This style places the most newsworthy information at the beginning of the story and orders the remaining content based on relative importance.

• Story lead (who, what, why, where, when) > Supporting information > Details

Using this structure enables the viewer to grab the core message quickly. In turn, your design should clearly frame the content and enable skimming and scanning.

Writing for the web
People don’t read websites in the same way as they read books or newspapers. They tend to scan, looking for the information they want, and ignore long documents and large blocks of text. You can make it easier for your users by following a few simple pointers:

• Put the most important information at the top of the page
• Use sub-headings, bullet lists and links, so people can find topics easily
• Use plain English and avoid jargon (remember, you are writing for everyone, including people whose first language may not be English)
• Keep it brief – internet users like short bites of text
• Keep pages short – don’t make people scroll down too far on any page. 
• Use short sentences
• Make sure your content is relevant – do I really need to include this?