Typographic Hierarchy Parts 1&2
Transcript from the ‘Typographic Hierarchy’ movie
Welcome to this tutorial on typographic hierarchy. We will be looking at word shape, copy analysis, syntax and semantics. Typographic hierarchy is about analysing text-based information and creating levels of importance based on the meaning of the words. The designer can determine the order in which the reader sees the information through basic typographic techniques such as changing the size, weight or position of the type. This activity is fundamental to typographic communication irrespective of choice of typeface. The work of Emil Ruder, Wolfgang Weingart, Armin Hofmann, Josef Müller-Brockmann and Helmut Schmid is worth investigating. Their typographic compositions not only exhibit the notion of hierarchy determined through analysis but the power of visual form inherent in letters and words. The beauty in their work isn’t necessarily imposed through personal whim but rather in discovering typographic ideas within the given information and drawing this out. The skill is in this intense form of seeing.
For the exercises within this tutorial I’ll be using the widescreen format of 16:9. I have divided the screen size into 16 horizontal units and 9 vertical units. These I have subdivided into half again. Although designing for the screen (such as in web design or moving image) or for three-dimensions (such as exhibition design) or print-based design has conventions related to the medium, the principles I’ll be introducing can be applied across media.
We recognise words through their shape. In our exercises we will be using a typeface called Helvetica Neue. It has a simplicity in its designed form. We don’t read individual letters and then work out what the word is, rather our eye scans the text and recognises distinctive word shapes. Compositions that use a lot of words set in capitals or uppercase only can look blocky and reduce the immediacy of word recognition. Capitals are important in recognising the start of single words as you might find in airport or road signage. For most designs using typography (such as posters) upper and lowercase is advisable.
We’re going to consider copy analysis. Copy is another name for words or text. You may have heard the term copy writing. The copy writer or copy editor is someone who writes words for advertisments or articles in magazines. In our exercises we will imagine that we are designing an invitation to a private view of an exhibition. Typically publicity will be comprised of certain types of information. To be able to act upon information we need to know what the event is, when it is taking place, who it involves and where it will be. It aids our understanding if we read information in a meaningful sequence. This is the task of the person commissioning the publicity and the designer who will use typography and layout to present the information in a visual form. Typography has to attract attention and then inform. Our information is currently a grey block of type. If we analyse the copy we see it is comprised of four pieces of information. What is the event? It is an invitation to attend a private view called Typescapes. When will it be? It is on Friday 4 December. Who will it involve? There are four well known people in the field giving gallery presentations. And where will it be? It’s at the Design Museum.
We can clarify the groups of information by introducing line spaces between the groups. We can also consider the location or position of the information. Drawing some out to the left gains emphasis for that information. We see it first and therefore read it first. In this composition we have placed the information in 5 horizontal groups, giving each piece of information a separate location. We read the information sequentially from left to right. This helps the reader build up a picture of meaning, each piece of information adding to the previous. In information design this is known as progressive disclosure. When driving along a motorway you appreciate information being broken down into digestible chunks. Being given all the information in one go can be confusing. If we want to raise the level of importance of individual pieces of information we can literally raise them up. Here’s the what – Typescapes exhibition. The when – Friday 4 December. The who – the four people speaking. And finally the where – the Design Museum. In this layout I’ve decided that it’s the what and when that will be seen first. I could equally have fronted up on the personalities involved. These are the types of decisions designers and their clients make. The red lines show the key construction or alignment points. The composition is divided into thirds vertically. The top third is pure space. I tend to prefer layouts that use space to the left and top of the composition. The yellow lines demonstrate that I have used vertical increments based on the lines of type.
So far we have only used one typeface, one size of type and one weight. In this next sequence we will consider the impact of weight, but again keeping to one type size. I will move the weight sequentially through the block of information. When selecting a change of weight of type remember that contrast is a key tool for designers. Choose a significant weight change where you can see the difference. In this version I am using weight to emphasise the event title and layout to group information in key locations. These techniques not only articulate the information but through considered use of position and space create visually intriguing layouts. This is known as typographic syntax. I’ve used key words in the main horizontal statement to structure the other information. The date aligns with the word Typescapes. The gallery presentations align with the word Typography (all the people are known for their typography). And the location (the Design Museum) aligns with the word Environments. Considering the meaning of words when aligning typography is known as semantic typography.
Now we consider the impact of changing the size of type. Again think contrast. Setting type twice the size makes it more noticeable than say just going to the next point size up. In these exercises I have been setting the type bigger and bolder than I would due to the screen resolution on YouTube. If I was designing for print, I might choose 9pt regular for the text, maybe 9pt bold for sub-headings. If I wanted to gain additional emphasis say for section headings I might go to 12pt or 18pt headings. You will notice there is a mathematically proportional relationship between the sizes. On screen we have a layout based on changing the size of the event title (the what). The type is twice the size of the smaller type. The other information is structured in relation to this first main statement. Next it is the turn of the date to take dominance. Again the information is structured to this typographic statement. Then the people’s names are emphasised. And finally the location is emphasised. Notice in each case the overall design is driven by the the first large statement. This way of working through analysis and determining hierarchy often yields the creative solution to the layout. You don’t always have to impose another conceptual idea on top. You can let the idea grow organically from the information. If I grey out the information then bring each part back in order of the sequence in which the decision was made you will see how the design is constructed. First the large title. Then the line above it is added. The You of You are invited is aligned with the T of Typescapes. The date is then added – it aligns with the type to the left but also with the S of Spatial. Again I am considering significant words to align with. The gallery presentations align left with the date and the S of Spatial. Then the location, Design Museum, with the E of Environments. The red lines show you those key construction points. Here the date takes prominence. First the date is set. Then the type underneath is structured in three columns aligning with Friday, December and 2009. Then the title aligns above December. With the private view finally aligning with the Friday. You will notice that I often choose not to space the components out evenly. This is an attempt to create visual tension and dynamism within the information. The type at the top clings to the top edge and the type under the date clings to the date. The edges and the white space are considered as equally important in their contribution to the composition. The redlines show the key alignment points. In this composition I have emphasised the speakers’ surnames. Sometimes a design comes together in parts. The first idea sees the information at the top stepping down. The alignment points are again on significant words. It’s as if the words are clinging to milestones as it steps its way through the information. The steps create 4 potential alignment points for the names. Before arriving at this location I will have tried the others. I felt this position afforded the best sense of balance for this asymmetrical design. I wanted the feeling of pulling off the centre to a more right sided balance. The red lines allow you to see those key decision points. I often think all I am doing is making decisions as to where to line things up. Finally we are using the location of the event, the Design Museum, as the driver for this composition. I let the rest of the address flow on to the right. A simple typographic observation – Design Museum is made of two words. Both have strong vertical initial letters – ideal for left aligning other information. The gallery presentations list gives me the most number of lines which creates a strong left edge. The date is broken into 3 lines to align with the word Design. Don’t be afraid to experiment with splitting the lines. Look for visual splits but also keep in mind splitting for sense. Maybe read out aloud the words as you have split them to see if it makes reading sense. The title hooks onto the word Friday and extends out to the left. Finally I am isolating the words private view from the main group to create emphasis for it.
This has been Typographic Hierarchy with me Tony Pritchard. We’ve considered copy analysis and how you can create emphasis for different parts of the information through size, weight and position of type and how doing this can produce many different types of layouts.