textwrap

running words around
design education and visual communication
authored by chris m hughes

A Blast of Canons

Tuesday, 30 November 2010

When it comes to gravity, the predictions made by Newton are known to be inaccurate, but they are sufficiently good approximations in most circumstances that classical mechanics is widely used instead of general relativity.

The same goes for certain aspects of graphic design, particularly when it comes to page layout.

Modern page layout techniques, and the software tools used to create them, are based around the ISO 216 sizings and the grid.

The grid was popularised by the Swiss typographers during the 1950's, and is the basis for contemporary print and web layout. So it's no surprise that it is central to the teaching curriculum in design schools.

But in the manner of classical mechanics, we are also obliged to investigate older ideas, and this means introducing students to the Canons of page construction.

These principles describe how (regardless of page size) the proportions, margins and type areas of books can be constructed based on a set of geometric ratios, rather than the exact measurements of vertical and horizontal guides in the grid.

Jan Tschichold popularised the notion of canons, which he termed 'laws of form', and was heavily influenced by the ideas of J. A. van de Graaf.

Van De Graaf Canon
The Van de Graaf canon is used to divide a page into pleasing proportions, and was used in medieval manuscripts and incunabula.

The canon works for any page width:height ratio, and enables the book designer to position the text body in a specific area of the page. The page proportions vary, but the most commonly used is the 2:3 proportion - a close approximation to the 'golden ratio'. The result is that the height of the text area equals the page width.

You can test this by grabbing a novel off the bookshelf and measuring the height of the text box and comparing it with the width of the page. For certain formats (specifically symmetrical page layouts), the rule holds, and these books are often the most pleasing to open and look at (typeface and content not withstanding).

A 'Van De Graaf diagram' is used to show the canon works:

Van De Graaf Diagram

The red rectangular text area is the same proportion as the page itself. The left and right margins are 2/9 and 1/9 respectively for the rectro (left) page, and are mirrored in the verso (right) page. Together, the inner margins form a centre margin of 1/9 + 1/9 = 2/9, equal to the outside edges. The actual text area is 6/9 of the page - a ratio of 2:3.

This diagram shows Tschichold's revision of the van de Graaf canon (on the left) and the later contribution of the Swiss designers, who converted the diagram into a 9X9 grid -

9X9grid


In Practice
Given a notion of the smallest pointsize of type to be used on the page, a designer can build a layout around the Van de Graaf canon, positioning headings, titles and body text. The overall result is a visual pattern which we see as balanced and meaningful.

The quickest way to do this is on a page in InDesign is to overlay the 9X9 grid, and draw your textbox one unit in and down from the top left edge, and two units in and up from the lower right corner. You can then drop in a baseline grid, setting the leading size of your choice from the top of the textbox.

Here's a doublepage spread based on the canon -




And here are the diagrams to confirm the proportions -







With the 9X9 grid in place, it's also easy to create a symmetrical layout, with both left margins of a spread double the size of the right ones. Just shunt the recto textbox across the grid to the same position as the verso.

And for those designers out there who prefer the more standard 6% margin rule and a 5, 6 or 12-column grid, go ahead and draw up a layout using that rule, and then overlay a Van De Graaf diagram, and you'll find that the diagonals still (approximately) run flush through the margin corners.

More:
Van De Graaf Canon@wiki

007 Gun

Sunday, 28 November 2010

It's not often that an object featured in a poster becomes a sought-after piece of memorabilia in its own right, but that's what has just happened at Christie's in London.

A pistol held by Sean Connery in posters to promote the 1963 film 'From Russia With Love' has sold at auction for £277,250. The Walther PPK fetched more than 10 times its estimate of £15,000-£20,000.

So it's worth looking at what all the fuss is about - and here are three good examples for the aforementioned second James Bond film.


From Russia With Love 1

The original poster came in what is now an obsolete format, quad size (760 X 1040mm), and was designed by Eric Pulford. The style is typical of the period, a mix of traditional and modernist elements with some bad colour clashes, and features the classic Bond pose. The nod to modernism - angled sans serif type in red and black - is set in Helvetica Bold Condensed, which was a fairly new typeface at the time.


From Russia With Love - Red Panels

The second poster is a Saul Bass imitation, with a messy mix of typefaces (the straplines are in Cooper Black) and some poorly treated monochrome photography in four panels (the Walther features in two of them). I found a couple of other panel posters from the same series, including a quad layout, but this one was the most interesting.

The third poster here, a reprint for Film Review 1964, abandons both previous visual approaches and is by far the best.

This design has all the ingredients of contemporary cinema promotion. The text occupies the top and bottom thirds of the layout, and the black background has a cropped photo of the star positioned in the visual centre - set above and right of the middle of the poster.

The main typeface is a condensed elegant serif, and both the film title and the star's name are the most prominent pieces of information, organised into a classically arranged typographical hierarchy, moving downwards to the less important details.

This poster was way ahead of its time. It helps too that the gun looks great in it.

From Russia With Love 3

Christie's also plans to hold an auction on Dec 1st of Vintage Film Posters, with the Eric Pulford design featured amongst them.

Get Closer with News +

Saturday, 27 November 2010

Swedish pub­lish­ers Bon­nier have released a promotional video for their tablet news service 'News +', which looks like one possible future for the newspaper.

There's no doubt that the user-experience captured here on the iPad is a real triumph of interactive technology and design.

But it's interesting how the narration describes the limited attractions of viewing updated news offline as 'filtering out the noise of the web'. What's also apparent is that the target audience for News + is a very small portion of the newspaper-reading public, which raises a few questions about the content, accessibility and usefulness of being able to 'get closer'.

The shape of things to come? The iPad certainly, but News +? Perhaps.


Everything Is Made

Tuesday, 23 November 2010

Everything is Made A nice surprise in the post today - three copies of the world's most prestigious annual for creative professionals - 'Everything is Made', the 2010 D&AD Annual.

These limited edition members' versions are hardcover, 23.9 x 25.6 cm (9.4 x 10.1 in.), with a whopping 592 pages.

This year the annual was designed by Bob & Roberta Smith, whose trademark style is multi-coloured signs and unusual typography, painted onto a diverse range of materials.

The annual features an audio recording from D&AD President Paul Brazier when you open up the front page, and a cover that folds out into a double-sided typographical poster, in a matte plastic finish.

As well as some nice messy collage effects, the layout is beautifully constructed, with the chapter spreads all featuring a chapter title in handwritten type, then an anagram of the title in a rather large weight of Helvetica. The award-winning works are tastefully presented in a grid layout with text set in Univers.

And of course the work featured is the best advertising and design in the world.

Cover

Foreword

Book Design

Spread

Corporate Non-Identity

Sunday, 21 November 2010

Every brief is based around a problem of visual communication, and designers are the problem solvers. So what if the problem is that the visual communication itself must be removed, effectively making all brands indistinguishable?

This is exactly what may be about to happen to the tobacco industry.

Australia plans to have plain-packaged cigarettes on shop shelves by July 2012, and earlier this week the UK government announced that they are considering forcing all cigarette packaging to be plain brown or grey, with no logos or visual branding allowed.

Unpalatable as it sounds, cigarette packaging represents an important source of social, cultural and marketing history, and has produced some of the most memorable logos and branding campaigns of the twentieth century. It's also just about the only form of visual communication left to the tobacco companies.

The evolution of cigarette packet design shows both changes in marketing technique and period graphic style. The packet itself has always had a definite form, shape and size – probably to some extent because the point-of-sale displays have a definite dimension and capacity and cigarette dispensing machines are designed for packets of a specific dimension. This has stifled design change and created a reliance on colour, typography and finish.

But the results have been hugely effective - cigarette packaging promotes the highest degree of brand loyalty in any modern product.

Agencies are already familiar with the heavily-regulated brand guidelines. The law may take away the logos, the colours, the visual devices, the packet shape, the copy style. But the material, texture and shape will be the brand - designers will customise the card, the foil, the cellophane, even the seaming. Marlboro, the biggest brand, have already tested the waters with the F1 Ferrari barcode design -

Marlboro Barcoding


Government Ministers and pressure groups can be quoted, statistics can be highlighted, but the tobacco industry will survive.

The tobacco lawyers will be at the ready, and somewhere, a designer is sitting down with their sketchbook trying to figure out how many ways they can make a brown paper bag say exactly what the client wants it to say.

Lighting Up The Turner Prize

Friday, 19 November 2010

Here's an ambitious typographical project from one of my NC Graphics students, Jonathan Walton.

The brief was to produce a single A3 poster advertising the Turner Prize 2010 Exhibition (currently showing at Tate Britain), but once Jonathan had settled on a concept, he produced a set of three linked posters echoing Martin Creed's notorious 2001 winning piece 'The Lights Go On and Off'.

Jonathan has two further years of study in which to gain his HND, and then take a final year at University, or move straight into the industry. The latter looks like a distinct possibility based on his current work.


The posters:

TurnerLight 1

TurnerLight 2

TurnerLight3


The final layout:

TurnerLightSpread



More:
Turner Prize 2010 @ Tate Britain

4 X Sans Serif

Thursday, 18 November 2010

Despite an abundance of modern options, there remains a very select group of sans serif typefaces that designers prefer to work with. There are more than a handful of contenders, but many designers would probably name just four.

Three of these - Akzidenz, Helvetica and Univers, are closely related and have been with us for many years. All have undergone refinements and facelifts during that time and are still widely used. The fourth, Avenir, is a relative newcomer which has a different provence to the grotesks and has established itself as a classic.


4 X Sans Serif, all set at 50pt Bold with optical kerning.

Each typeface has a unique personality, based on its inherent characteristics, but it can be problematic telling them apart and, more crucially, difficult to figure out which one suits what job.

Akzidenz-Grotesk
Akzidenz, created way back in 1896 by the Berthold AG type foundry, is the progenitor of all modern sans serifs. During the 1950's and 1960's, many of the Swiss designers worked almost exclusively with Akzidenz, establishing its reputation.

Akzidenz Std Medium
Akzidenz Standard Medium (65)

A modest x-height provides rounded counters and bowls, and the lowercase 'e' has an angled cutoff at the end. Akzidenz can look powerful, but it has a slightly clumsy, anachronistic feel to it, and its use in commercial advertising has diminished. It remains popular with purists, and still looks awesome in its traditional visual environment - flush left, ragged right and tightly kerned.

Helvetica
The definitive sans serif, Helvetica was developed in 1957 by Max Miedinger at the Haas Foundry in Switzerland and was designed to compete with the ageing Akzidenz-Grotesk.

Helvetica Std Medium
Helvetica Standard Medium (65)

Originally called 'Neue Haas Grotesk', this is a neutral design that has a universal, objective clarity, making it ideal to deliver all sorts of clear messages.

In antiquity, the Romans referred to the tribes in what is now Switzerland as 'Helvetii', and in 1960 the name was changed to 'Helvetica', which helped commercialise its use in the burgeoning American market.

Helvetica is the most famous typeface in the world, and we see it on everything from government forms to toilet instructions, exhibition posters, street signage, web pages, and luxury car adverts.

Helvetica's meaty x-height gives it a more imposing appearance than Akzidenz, and its trademark horizontal cutoff ends on the 'c' and 'e' give the typeface a solidity and gravitas that is difficult to beat across a range of weights. Helvetica retains the arrowed end to the uppercase 'G' from Akzidenz, but the regular proportions have given Helvetica a reputation for blandness. Helvetica is in fact vociferously avoided by many important designers.

Univers
Univers, (pronounced 'univar'), was designed in 1957 by Adrian Frutiger as a direct competitor to Neue Haas Grotesk.

Univers Std Medium
Univers Standard Medium (65)

Univers comes in uniquely numbered weight, width, position combinations. It retains some aspects of Akzidenz, and shares many of Helvetica's attributes, for example, a flourished end on the uppercase 'R'. Some basic differences include a distinct angled chink in the lowercase 't' and the loss of the arrowed end on the uppercase 'G'.

Univers has more stroke modulation than Helvetica, and this gives it a slick classy feel which is particularly good for headings and body text. It also pairs up well with a wide range of serif typefaces providing a great mix.

Some aspects of Univers were lifted by Microsoft when they commissioned the web's most legible typeface, Arial. Arial is normally considered a poor copy of Helvetica, but if you look closely, it actually bears all sorts of similarities with Univers, as the image below shows (Arial in the grey box)-

Arial v Univers


Avenir
Avenir, also designed by Adrian Frutiger, is related to an earlier geometric sans-serif typeface, Futura (1927), and is an altogether more symmetrical typeface than the other three. It features the circular shapes of Akzidenz, the consistency of Helvetica and the refinement of Univers, which is why it is considered by many to be the most complete sans serif typeface currently in use.

Avenir Std Medium
Avenir Standard Medium (65)

Avenir sports neat angled ends on the 'e'. 'c' and 's', a round period dot, and great symmetry in the counters and bowls, providing a really contemporary and fluid feel to the reading experience.

Avenir is the house font for Reuters, Chanel, Japan Airlines, Wired Magazine and Empire Magazine, to name just a few. It is the official typeface used in all promotional material for the city of Amsterdam in Holland, and BBC Two has also begun to use Avenir as its main font, in a radical break from the Corporation's long-term use of Gill Sans.

Avenir manages to retain the idealism of the modernist typefaces whilst at the same time looking fresh, unforced and fantastically legible. Its dead give-away is the pair of angled cutoffs to a very geometric and beautifully balanced 'C'. As a headline font in bold weights it is legible, focussed and clean.

It does have weaknesses however. It tends to have an intrinsic high-brow feel to it, and at smaller point sizes the roundness can reduce legibility. These drawbacks make it unsuitable for some jobs, notably body text.

Frutiger and Linotype’s Type Director Akira Kobayashi have recently completed Avenir Next, which addresses these issues, and expands and refines the original by offering a re-balanced set of 6 weights, in addition to condensed companions for each weight and style.

Choices
So where does this leave designers when it comes to choosing from the 4 X sans serifs? A general rule of thumb does emerge, which can produce very good results -

Akzidenz: organic, retro, solid, traditional modernist
Helvetica : broad appeal, clarity, corporate authenticity, reliability.
Univers : rationality, technical print, formal, serious, clean.
Avenir : elegant, contemporary communication with a hint of sophistication.


More:
http://en.wikipedia.org/wiki/Akzidenz-Grotesk
http://en.wikipedia.org/wiki/Helvetica
http://en.wikipedia.org/wiki/Univers
http://en.wikipedia.org/wiki/Avenir_(typeface)

Food For Thought

Wednesday, 17 November 2010

Some interesting self-promotional material arrived on my desk from one of my ex-students, Carolann Alexander, who graduated HND Graphic Design earlier this year.

Carolann is now working freelance in Edinburgh, and has been promoting her talents with these beautifully packaged edible business cards -





The Midas Touch

Tuesday, 16 November 2010

Are you feeling lucky, punk? If the answer is yes, then top of the Christmas gift this list year must be 'Bill Gold: PosterWorks', published by reelartpress.

In a career spanning some sixty years, Gold was responsible for some of the most iconic movie posters of all time, starting with Casablanca, and including the likes of Bonnie and Clyde, Bullitt, The Wild Bunch, Get Carter, Dirty Harry, The Untouchables, Goodfellas, Unforgiven and his swansong, Mystic River.

The press release describe the book as -

' a unique 450 page collector's opus detailing the artist’s creative process, his army days, early career, posters for Elia Kazan, Stanley Kubrick, Alfred Hitchcock, Francois Truffaut through to his final work in 2003 on Eastwood’s Mystic River. Archivist of his own work, with a personal collection of unseen designs, alternative versions, sketches, drafts, notes and photographs, Bill Gold’s incredible history has never been accessible to the public until now.'

Wow.

We have a couple of Bill Golds on the Inspiration wall in the Studio - a 1980's reprint of Casablanca (a UK version, with different typesetting for the credits), and an original for Dirty Harry (1971).

Gold's early work featured a lot of illustration, but he really hit his stride between the mid 60's and early 70's, when he specialised in action movies and dynamic cropped photos. He developed a stripped down style that went beyond Saul Bass, borrowed from the classic Swiss style, and had an added messy element of brooding pathos.

My personal favourites are a series of posters for the 1971 film 'Klute', which starred Jane Fonda and Donald Sutherland. The posters feature great stills, an image of a telephone receiver, and the film credits set in Bauhaus font. The compositions look really off-kilter, but they mirror the quick cut film editing that was popular at the time, and if you've seen the movie, you'll recognise the sleazy, complex mood they create.

Klute Poster Series:







The problem now? Convincing Santa that it's worthwhile forking out £300 to buy the book - a limited edition of 1500, signed by Clint Eastwood, who also authors the foreword.

More:
Reel Gallery Exhibition : Bill Gold.
Bill Gold:Posterworks @ reelartpress.com
Book Review - The Telegraph, 8 Nov 2010.

The Norton Experience

Monday, 8 November 2010

Design Agency Carter Wong have announced their reworking of the famous 'Curly N' Norton motorcycle logotype.

According to Norton, the brief was to standardise the logo by taking the best design aspects and features from previous versions to create something contemporary but authentic.

Norton was a key player in the motorcycling world during the pre and post-war periods, and was a great example of British engineering at its zenith. It's best-selling 'Commando' was an influential design that paved the way for the next generation of motorbikes from Japan, the arrival of which ironically signalled Norton's demise during the 1970's and 80's.




Norton Logos:Top - 1913, Middle - 1970's, Bottom - 2010.

The calligraphic flourishes and exaggerated serifs of the earliest logo were reduced during the company's heyday into a more mechanical, European look, but have found their way back in with the new design. You can see it best in the return to a softened ascender on the 't', and the oval offset counterspace inside the 'o'. The overall impression is one of opulent, elegant power.

On Norton's website, there's an interesting case study on how Carter Wong went about this project, as well as a vintage section featuring dozens of Norton posters, including these classic, cheesy 1960's 'Commando' posters, set in variations of the popular sans serifs of the period, Akzidenz Grotesk, Futura and Century Gothic.














More: Carter Wong Norton Project

Tschichold Jackets

Friday, 5 November 2010

Jan Tschichold's seminal text book 'Die Neu Typografie' (1923), exemplified the design approach which would become the key influence on the Swiss Style, as developed a couple of decades later by the likes of Karl Gerstner, Joseph Muller-Brockmann and Armin Hofmann.

Unfortunately, by that time, Tschichold had abandoned Modernism and the New Typography for the more lucrative mainstream as chief designer at Penguin, where he came up with their iconic paperback jackets.

I've included the Penguin edition of 'The Great Gatsby' here to show the shift in style from the New Typography - asymmetrical layouts, sans serif lowercase type - back to the more conservative symmetry and mixed typefaces of the mainstream.



'Fototek' 1930.



German Typographer's Trade Journal, 1925



Otto Manchen-Heflen 'Drittel Der Menschheit' 1932



'Flucht' Franchesco Nitti, 1930



Moholy-Nagy, 'Fotos', 1930


Constructivist Magazine 'XYZ', 1929
Cover Photo - of and by El Lizzitsky.




Asymmetric Typography, 1967



Helmut Wiskel, IG Deutschland, 1932



Constructivist Journal, 1937




F. Scott Fitzgerald 'The Great Gatsby', 1940s.


More:
Jan Tschichold - Titan of Typography - article by critic Richard Hollis in the Guardian, 2010.

Slanted and Enchanted CSS3

Tuesday, 2 November 2010

For web designers, angled text has always required a trip to Photoshop or Illustrator. So it's a cause for celebration now that CSS3 supports rotation for text on a webpage. This means designers can slant and quickly edit text, images and even divs on a webpage.

To get a flavour of how powerful this is, it's worth stepping back to look at how css3 is generally implemented in webpages. To create css3 styles, you need to use a set of the vendor prefixes - different properties for each browser to understand.

Here's a simple example - how to fade in the background colour of a button when you hover over it. The CSS3 property is called 'transition', and the CSS would look like:

a { /*this is a style for the button link*/
width: 100px;
height: 30px;
text-align: center;
padding: 15px 0;
display: block;
color:#ffffff;
background-color: #000000;
-webkit-transition:background-color 1s ease-in; /*prefix for Safari*/
-moz-transition:background-color 1s ease-in; /*prefix for Mozilla*/
-o-transition:background-color 1s ease-in; /*prefix for Opera*/
}

a:hover {

background-color: #ff0000;
}



Applying angled text uses the same sort of procedure. The css3 property is called 'transform', and the value is 'rotate (angle)'. Rotate will angle text, div elements and images. Here's the CSS to rotate text by minus 30 degrees on a webpage -

.mytext {
-moz-transform:rotate(-30deg); /* text angle is -30 degrees*/
-webkit-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
}


There are a couple of big caveats however. Firstly, not all browsers support this technique, and secondly, at larger point sizes, poor anti-aliasing becomes an issue and the text can start to look decidely pixellated.

For a brilliant example, assuming you have the latest Safari, Chrome, Opera, Mozilla or IE9 browser with which to see it, check out transform experiment by Eric Hansel.

Some Advice on Sketching

Monday, 1 November 2010

Michael Beirut's Notebooks

Our NC groups are now three projects into their course, and are starting to get the message - a good sketchbook is the holy grail of the design process.

At any given time, there can between 40 and 50 sketchbooks lying around in the studio, and the Design Team is looking at digitising selections of all our HND student's sketchbooks. Currently, these documents of the inner workings of a designer's mind are lost to us once the class has graduated and left for pastures new.

Which reminds me of a nice article by the American designer and critic, Michael Beirut, on the importance of sketching, and why sketchbooks should be archived.

Beirut has archived 26 years' worth of his sketchbooks - 85 books so far and still counting. Looking back through them, he hits upon two revelations that shouldn't surprise many designers, and which offer up some good advice -

1) a lot of good design ideas originate at the very beginning of a given project

and

2) a lot of ideas are 'so simple and dumb that a simple dumb drawing is all it takes to describe them'.