The Font Wars

It’s more than just Arial versus Helvetica
‘Helvetica’ is a sans-serif typeface developed by Max Miedinger, with Eduard Hoffmann, at the Haas type foundry in 1957.  It was originally called Neue Haas Grotesk.  The intention was to create a neutral typeface of great clarity which could be used widely for signage.  The design was revised and expanded into a full font family when it was taken up by Linotype.  It was renamed Helvetica, meaning ‘Swiss’, in 1960.  Since then a number of people have been involved in redesigning and developing Helvetica variants – it now exists as a family of 4 fonts in 2 weights and 1 width and related scripts in more than 10 languages.  Helvetica is used widely in commerce, e.g. 3M, BMW, Toyota, Panasonic, Apple iPhone and so on.  It is also used by the US Government including NASA and NYC’s MTA (Metropolitan Transportation Authority).  Helvetica was rated No. 1 on FontShop Germany’s list of “Best Fonts of All Time”.

‘Arial’ is a sans-serif typeface and computer font, packaged with Microsoft software applications and Apple OS X.  It was created by Robin Nicholas and Patricia Saunders for Monotype in 1982.  Arial is a typeface family that consists of a number of variants and related scripts in several languages.  It was originally called Sonoran San Serif until it started being included in Windows 3.1 by Microsoft in 1992.  It was one of the core fonts in all subsequent versions of Windows until Vista, when to intents and purposes it was replaced by Calibri.  Arial is a contemporary design with soft, full curves making it less ‘industrial’ than some other designs and extremely versatile.  Arial is nearly identical to Helvetica although some consider Grotesque 215 to be one Arial’s true parents.  Others think Arial is more like Univers than Helvetica.  The designs of the Arial letterforms and the spacing between the characters were intended to make the typeface more readable on screen and at various resolutions.  The inclusion of Arial with Windows and Mac OS has caused it to be one of the most used and widely distributed typefaces in the world.  

There are many people, including professional typographers and type enthusiasts who are not particularly fond of Arial due to its similarity to Helvetica and Microsoft’s role in its development and distribution.  They see the creation of Arial as a means of avoiding the payment of royalties or giving credit to Helvetica.  Monotype Imaging is the copyright holder for Arial, owning all rights, title and interest in and to the Arial font software.

If Arial is to be criticised as a Helvetica clone, then Helvetica can be said to rip-off Akzidenz Grotesk.  Both of these typefaces are derivatives of earlier Grotesque faces thereby making the entire debate fairly subjective.  That the font wars continue, and have expanded, can be seen in an article and small poll conducted in September on ShinyShiny (http://www.shinyshiny.tv/2010/09/poll_helvetica_vs_times_vs_calibri.html).  Readers were asked which font they preferred: Helvetica, Times New Roman and Calibri.  The results as at 19th November were:
Helvetica                                       73 votes    (37.82%)
Times New Roman                          41 votes    (21.24%)
Calibri                                           61 votes    (31.61%)
I write everything in Comic Sans    18 votes    (  9.33%)
                                                 _____________________
                                                   193 votes    TOTAL
                                                 _____________________

'Comic Sans' seems to be particularly out of favour at the moment, probably due to its misuse and overuse.  It was designed by Vincent Connare, a commercial photographer with a master’s degree in typography.  He has designed other well-known fonts including Trebuchet MS (the type I chose for the main text of this blog.).  David and Holly Combs’ “Ban comic sans - Putting the Sans in Comic Sans” campaign has been railing against the font since the late 90s (http://bancomicsans.com/main/) and it’s even the butt of jokes: “Comic Sans walks into a bar; bartender says, “We don’t serve your type.”. 
Listen to an interesting discussion between Vincent Connare and Dave and Holly Combs go to the BBC World Service “Font wars: should 'Comic Sans' be banned?” from 23 April, 2009: http://bancomicsans.com/main/wp-content/uploads/2010/02/bancomicsans_world_update.mp3.
And from passiveaggressivenotes.com: “Elsewhere in Seattle, “office professionalism” seems to have no bearing on freedom of speech…as long as you use the right typeface, of course.”
 

The 53rd Annual Punctuation Posse Round-up, July 19th, 2010, http://www.passiveaggressivenotes.com/2010/07/19/the-53rd-annual-punctuation-posse-round-up/.
When IKEA changed its signature typeface in 2009 from a customised version of Futura to Verdana complaints were received from all over the world.  Some of the fuss was because Verdana, a propriety font from Microsoft, was intended to be used on screen and not in print.  Designers are critical as they say Verdana has no elegance of Visual rhythm and has been dumbed down and over used.  Others point out that the Futura original was a better fit with IKEA’s design philosophy whereas Verdana is used all over the web.

Post 6: Late 20th Century and the New Millennium

Adrian Frutiger
The Frutiger type family was released publicly by the Stempel type foundry, in conjunction with Linotype, in 1976.  Designed by the Swiss type designer Adrian Frutiger, the typeface’s characteristics are simplicity and legibility with a warm and casual feel.  It is a modern sans-serif typeface that echoes the rationality and clean lines of Frutiger’s late 1950’s design, Univers.  It also aims to take on the organic and proportional qualities of Gill Sans.  One of the features of both Univers and Frutiger is the comfortable white space between the letters.  This statement by Adrian Frutiger gives an insight into his design philosophy: “Typography must be as beautiful as a forest, not like the concrete jungle of the tenements ... It gives distance between the trees, the room to breathe and allow for life.”(Adrian Frutiger, Interview with Klaus-Peter Nicolay, Druckmarkt, issue 2004 9/10).  The ascenders and descenders are very prominent and the wide apertures help distinguish the letter forms and, therefore, enhance the overall legibility.  Frutiger has been expanded to include many variants, even ornamental and serif typefaces.  In 2008 Frutiger was Linotype‘s 5th best-selling typeface.  For example it is used by the British Navy, a number of universities, the Canadian Broadcasting Commission, the Finnish Defence Forces and throughout the public transport network in Oslo, Norway.  Since 2003 Swiss authorities have been using a Frutiger variant, called ASTRA-Frutiger, for traffic signs – it was based on Frutiger 57 Condensed but has up- and down-strokes that widen so that they hold the eye more effectively.

Carol Twombly
Carol Twombly was an American typographer and graphic designer who, as a pioneer in digital type design, was among the first to create whole digital typefaces that were based on historically important type that had long been used in traditional printing.  She joined Adobe Systems in 1988, releasing the display typefaces Trajan, Charlemagne and Lithos the following year.  Twombly released her Adobe Caslon, a Dutch Fell type, in 1990.  It was based on the original Caslon design by English engraver and typefounder William Caslon (1692–1766) and it is the typeface for which she is best known.  Twombly’s variation on the original was successful because its heavy serifs and large x-heights made it readable in a digital context.  The typeface maintained an even tone when set as running text and printed well with both ink jet and laser desktop printers.  One important innovation of Adobe Caslon and other early digital fonts by Twombly was that they were among the first to be designed specifically for the new printing media associated with desktop publishing.  There are a number of variants that have been produced by other designers both before and after the release of Adobe Caslon.  Carol Twombly retired from Adobe in 1999 to focus on her other design interests. 

Desk Top Publishing
Desk Top Publishing (DTP) became popular in the mid 1980s starting with the Apple Macintosh, Aldus PageMaker and PostScript.  PCs had become more popular as word processing systems such as Wang and WordPerfect revolutionized office documents.  The usage of WYSIWYG (What You See Is What You Get) user interface increased.  WYSIWYG displayed content during editing such that what was shown on the screen was very similar to the final output.  Examples of the final output included printed pages, web pages, slide presentations or computerised lighting for theatrical events.  One of the big advantages of this software was that the layout could be manipulated without having to use layout commands.  The screen display simulated the appearance and precisely represented the effect of font choices, line breaks and final pagination.  Early versions of layout software were basic by today’s standards.  The availability of cheap, or free, fonts made the conversion to do-it-yourself easier but also opened up a gap between skilled designers and amateurs.

DTP allows 2 types of pages to be prepared: electronic pages, e.g. web pages, which are not constrained by virtual paper parameters; and virtual paper pages which will be printed on paper, posters, billboards, etc.  Master pages are templates that automatically copy or link elements and graphic design styles where these are common to more than one published product, e.g. serials, newsletters, so that these do not have to be re-created each time.  Elements are laid out on the page in an orderly, aesthetically-pleasing and precise manner with text added to linked images and embedded images.  Typographic elements are applied to text with style sheets.  Modern software programs, including Microsoft FrontPage and Adobe Dreamweaver, use a layout engine similar to a DTP program.  However, some Web designers prefer to use HTML without a WYSIWYG editor for greater control.

Readability and Choosing the Right Font
Whether you are writing a report or creating marketing materials, the basics of graphic design will help you to produce visual communications that are effective in capturing the attention of your intended audience.  The art of sharing information can be optimised by incorporating graphic design elements such as combining text and symbols to better convey your message.  Even the shapes of the letters themselves can enhance the simple information being communicated by adding an emotional response to your document or design.

Using the default font on your computer, formerly Times New Roman but now Calibri, font size 12, and cramming as much information as possible onto the page will result in a very boring document that’s hard to read and from which it would be difficult to extract information.  One of the messages subtly suggested by such a document is that the author is boring and has no style or imagination. If, instead, you want to engage and excite your reader, the place to start is with the font you choose.  The font used will have an effect on how your message is received.  Having an easy to read font is an essential part of helping your reader initially scan your document, especially if we’re talking about a résumé.  

Text may be legible but not readable if the reader is prevented from reading easily and smoothly.  Readability is therefore the quality that makes the page easy to read, inviting, and pleasurable to the eye. Readability, not legibility, is, in fact, the document designer's goal!  In the past it was assumed that serif typefaces were more legible than sans-serif ones because the serifs were thought to help move the eye along the horizontal direction of reading; the serifs themselves becoming an additional means of differentiating letters from one another.  It was never conclusively shown that sans-serifs decrease legibility and serif fonts used at a small size lose their serifs anyway, so your choice should be influenced by the size and amount of text.  Most designers would recommend the choice of a sans-serif font.  Well known sans-serif fonts include Helvetica, Tahoma and Arial but there are plenty of others from which to choose.  The proportion and distribution of white space between lines, words, and characters are also major factors in determining readability.  Many sites offer free fonts these days so select one that positively influences readability and best fits the image you wish to convey.  When you look closely you will see some that appear ‘welcoming’ while others may strike you as ‘assertive’ or even ‘aggressive’.  Typefaces that create a clean or sharp image could be good choices for business documents.  There must be enough space between the lines (called leading) so that the eye can easily move in a horizontal direction, enough space between words so that they can be perceived as units, and enough space between letters so that they can be distinguished.

Generally speaking, typefaces with a larger x-height tend to be easier to read at smaller font sizes.  The x-height, or body height, is the main part of the lower case letters, exclusive of any ascenders or descenders.  It’s called the ‘x-height’ because it’s measured on the lower case ‘x’, i.e. the space from the base line of the x to the top of the x.  The x-height of a font determines its readability.  A larger x-height can make a font seem bigger than other fonts at the same font size.  The unused negative space that surrounds your text and graphic elements needs to be carefully considered so that the result is a balanced design.  White space can add an element of sophistication and elegance.  Another factor to consider as part of a design for print purposes is the choice of paper stock. 

Once you’ve selected a font and other elements that suit you, a good idea is to use them for all of your correspondence and marketing projects.  It can help you, or your business, to create a cohesive visual image.  Graphics can support the type you are using or the type can support the graphics you are using.  A strong image can draw your viewer into the document.  To deliver the message concisely and effectively, you need to make sure your type is expressive enough, your design is distinctive enough and the composition, overall, is strong enough.

Web Typography
Adobe Type Manager (ATM) was released in 1989 to improve the quality of characters and text displayed on screens or printed by Imagewriter printers.  It eliminated jagged edges which could cause small characters when magnified to become big black blobs.  ATM needed Adobe-brand Postscript type fonts called ‘Type One’.  Type One fonts were stored as mathematical formulae describing the outline of the characters plus special coding hints.  Other fonts at the time were bit-mapped, i.e. stored as a collection of dots.  Whereas outline fonts could be used in just about any size, bit-mapped fonts were restricted to ‘available’ point sizes.
Since those early days improvements have meant that attention to typography has contributed to the creation of creative and interesting web pages.  But getting a message across efficiently is more than selecting an appropriate typeface.   Some of the issues to include in web typography deliberations are contrast, size, hierarchy and white space.

Contrast is an important component as text must contrast sufficiently with the background to be readable.  A method of deciding whether or not the text and background contrast enough can be found in the ‘I Love Typography’ (ILT), ‘A Guide to Web Typography’ post (URL http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/).  The article suggests taking a screen print of your document and then, using image editing software, to convert the image to grey-scale.  If the text is hard to read there is insufficient contrast.  Light text on a dark background is not so much a contrast issue but it can be difficult to read on a screen unless only applied to brief passages.

Hierarchy involves varying the type size for headings, sub-headings and the body of text so that the importance of areas of text is easily detected by readers.  Other methods for indicating hierarchy are the use of a mix of different typefaces, uppercase characters, italics, etc.  Hierarchy well carried out will result in a web page where the elements look to be in the right place.

Leaving ‘negative space’, or ‘whitespace’ around text helps create balanced articles, whether they are to be printed or displayed on the web.  The result is that web pages don’t look crowded even though they may be carrying a lot of information.  The space between elements adds to the readability of the text.  Less whitespace suggests cheap and nasty whereas greater whitespace adds a luxurious look to a page.  For an excellent article on space, see ‘Whitespace’, ‘A listapart’ by Mark Boulton (URL http://alistapart.com/articles/whitespace/ ).  

Letterspacing – Strings of capital letters and small caps should probably be allowed a little extra spacing to improve their legibility.  The readability of Acronyms and abbreviations is also improved by adding extra letterspace.  Letterspacing is essential for strings of numbers, such as serial numbers, so that they can be read more easily and rapidly.  Letterspacing lowercase letters is not recommended.

Grid – Designing a web page can be aided by the application of an invisible grid.  The use of a grid to suggest the layout of the page can be beneficial in that the individual elements are distributed across the page in an orderly and consistent fashion.

Description of the Research Process for the Sixth Post

• I found that I needed to spend a lot of time on new research for this post.

• I had collected quite a bit of material previously but found I needed more because I wanted to include topics that I hadn't fully thought through earlier.

• The process of selecting information to be included in the post took a lot of time. I wanted to include more detail as my topic got closer to current times.

• Looked for and posted more images and examples to illustrate and help explain the text.

• Wrote the text for this post.

Reflection on the Research Process for the Sixth Post

• I have noticed that I have been getting more and more distracted and have found concentration very difficult to sustain.

• Looking through new sources of information I'd not found previously was very interesting but cost a lot in terms hours spent.

• I am finding it very difficult to get the citations correct. I am hoping this this last batch is more accurate.

Discoveries for the Sixth Post

• I was very careful this time to make sure that I included all the material I'd prepared, not like one of the earlier posts. I carefully checked the rough sketch for the items for this post.

• I changed the number of posts per page so that the body of the text and the images down the righthand side were evenly balanced. If I'd realised earlier that this simple fix would even things up I would have done it much earlier.

• I was surprised to find that Linda found my blog hard to read. I had shown my intended format to three people before I started posting. They all said the format was easy to read. Perhaps the difference lies in how much the different parties were asked to read.

• By going through the procedure to check the contrast between my text and the background (recommended by 'i love typography') I discovered that more contrast between the two wouldn't have hurt.

REFERENCE SOURCES

1. 'Arial' 2010, Wikipedia, viewed 12 November 2010, http://en.wikipedia.org/wiki/Arial
2. Boardly, J. 2007, '15 Excellent examples of Web Typography, Part 2 Taking a List Apart', ilovetypography.com, 27 September, viewed 18 November 2010, http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/
3. Boardly, J. 2008, 'A Guide to Web Typography', ilovetypography.com, 28 February, viewed 29 August 2010, http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
4. Boardly, J. 2007, 'Arial versus Helvetica, Seconds Out, Round 1', ilovetypography.com, 6 October, viewed 3 October, 2010, http://ilovetypography.com/2007/10/06/arial-versus-helvetica/
5. Boardly, J. 2009, 'Web fonts - where are we?, Untangling the Tangle', ilovetypography.com, 20 July, viewed 18 September 2010, http://ilovetypography.com/2009/07/20/web-fonts-—-where-are-we/
6. Boulton, M. 2007, 'Whitespace', A Listapart, 9 January, viewed 18 November 2010, http://www.alistapart.com/articles/whitespace/
7. 'Carol Twombly' 2010, Wikipedia, viewed 16 November 2010, http://en.wikipedia.org/wiki/Carol_Twombly
8. 'Caslon' 2010, Wikipedia, viewed 16 November 2010, http://en.wikipedia.org/wiki/Adobe_Caslon#Adobe_Caslon_.281990.29
9. 'Desktop publishing' 2010, Wikipedia, viewed 16 November 2010, http://en.wikipedia.org/wiki/Desk-Top_Publishing
10 'Helvetica' 2010, Wikipedia, viewed 12 November 2010, http://en.wikipedia.org/wiki/Helvetica
11.Lewis, P.H. 1989, 'Personal Computers; Answering Questions About Fonts, New York Times' Gale Science In Context, viewed 19 August 2010, http://ic.galegroup.com:80/ic/scic/NewsDetailsPage/MLA7CitationWindow?displayGroupName=News&prodId=&action=2&catId=&documentId=GALE%7CA175806766&userGroupName=yarra_plenty&jsid=3c8c9187e5e4d201cbb3998c8a5c853c
Gale Document Number: GALE|A175806766
12.Page, S. 2008, 'Design Inspiration : typography posters', simoncpage.co.uk, viewed 19 September 2010, http://simoncpage.co.uk/blog/2008/08/28/design-inspiration-typography-posters/
13.Pratt, S. 2009, 'A Short Lesson in Graphic Design', suite101.com, viewed 5 September 2010, A Short Lesson in Graphic Design: Picking the Right Typeface for Your Acting Resume http://www.suite101.com/content/a-short-lesson-in-graphic-design-a176973#ixzz10c7E2zIQ
14.Pullen, I. 2009, 'What are the basics of Graphic Design: Quick Tips and Advice on the Essentials of Design', suite101.com, viewed 5 September 2010, http://www.suite101.com/content/what-are-the-basics-of-graphic-design-a90042#ixzz10c90kPJD
15.Pullen, I. 2009, 'Discover the Anatomy of a Font', suite101.com, viewed 5 September 2010, Discover the Anatomy of a Font: How to Distinguish the Different Parts of a Typeface http://www.suite101.com/content/discover-the-anatomy-of-a-font-a102841#ixzz10c5d60zx
16.Ramsey, S. 2010, '20 Free Fonts Ideal For Logos And Headings', bluefaqs inspiration for designers, viewed 18 September 2010, http://bluefaqs.com/2010/07/20-free-fonts-ideal-for-logos-and-headings/
17.Rutter, R. 2005, 'The elements of Typographic Style Applied to the Web', webtypography.net, viewed 5 November 2010, http://webtypography.net/
18.Sherin, A. 2001, 'Carol Twombly', Grove Art Online, Oxford Art Online, viewed 1 September 2010, http://www.oxfordartonline.com/subscriber/article/grove/art/T2022076
19.'Typography', 2010, vLetter, inc., viewed 29 August 2010, http://www.vletter.com/aboutfonts.htm
20.'WYSIWYG' 2010, Wikipedia, viewed 16 November 2010, http://en.wikipedia.org/wiki/WYSIWYG