HIERARCHY

Using about 500 words of Lorum Ipsum (or other dummy text) you are going to design three different pages:

• an interview with a TV actor in a listings magazine entitled: Will Sheila tell the naked truth?

• a review of a new piece of hardware or software in a specialist computer magazine

• a book review in a newspaper’s weekend edition.

Research these types of publications and identify three different combinations of typefaces appropriate for each publication. Now you need to invent headings and subheadings for your articles. Set these combinations so that your header is above 12pt in size, your body text is 12pt or below and subheadings sit in between in your hierarchy. You will need to create some text to allow you to show your combinations in action. Use your text to describe your decision making process, why you think the combination works and what your intentions were.

Hierarchy

Text elements such as titles/headings, subtitles, body copy, captions and quotes are included in typographic hierarchy and all these elements need visual differentiation and emphasis. In order for a reader to engage with the content a well designed typographic hierarchy will guide the reader through the content. (Poulin, 2017) Visual emphasis can be created by the following methods:

• Alignment

• Case

• Colour

• Contrast

• Italics

• Mixing typefaces

• Position

• Size

• White space

• Type style

• Weight

• Visual cues

Alignment - The level of importance can be emphasised by a centre alignment which can help highlight a level of importance in titles or headings. (Poulin, 2017)

Case - Uppercase and lowercase is another way to create emphasis in hierarchy. However, uppercase should not be used in text for emphasis as this disrupts the flow of reading. Uppercase is best used when a strong emphasis is needed, such as subheadings, call outs and headings. If the font you're using has a small caps font then this might be more acceptable to use in text as it creates a softer and more blended look. (Strizver, 2014)

Colour - The choice of colour in typography is very important as this can affect the readability and legibility of text. Contrasting colours have an impact on the typography. If the colours are high contrast then it's jarring on the eyes and if the contrast is too low, then the type gets lost. Colours such as a pure hue yellow on a white background will look invisible unless another colour is added to the yellow and the size is increased substantiality. Some colour combinations can be hard to read and can also be difficult for people who suffer from colour blindness. (Harkins, 2011)

Fig.1 How colour affects readability and legibility (2011)

Contrast - Can create a mood or emotion and grab the reader's attention. Visual emphasis and hierarchy can be reinforced in any complex typographic setting. If a composition is lacking in contrast this can cause boredom or confusion. (Poulin, 2017)

Italics/Obliques - True drawn Italics and not computer generated versions are used to attract attention to the reader without the use of colour. Italics are usually used for quotes and for the spoken word. (Strizver, 2014)

Mixing Typefaces - Many typefaces and font families have different weights, widths and style sets which is usually enough to create a hierarchy. If using two typefaces, such as a serif and a sans serif, this can be visually effective, however, in order to make this work the x-height needs to be similar for readability. (Poulin, 2017)

Position - Location of various types of information such as headings, sub-headings, page numbers headers and footers all have levels of importance and specific locations on a page layout which reinforces the hierarchy. The framing and white space are also important elements for the reader to understand the hierarchy. (Poulin, 2017)

Size - To guide the reader through the correct sequence in hierarchy, the reader's eye will automatically go to the largest sized element first. For example, regardless of where the heading is, the reader's eye will go to this element first. (Poulin, 2017)

White space - When the reader is provided with ample white space it ensures better readability and ease of access. Using white space can can create visual emphasis by drawing the reader's eye to a specific location.

Type style (weight) - A strong contrast can be created by using a font family with various weights. In order to create this visual difference it is better to increase the weight by two weights. The use of weights is best used for sub-headings, captions, stand alone words and phrases. Bold weights should only be used sparingly as it disrupts readability in text. (Strizver, 2014)

Visual cues - In order to assist the reader, visual cues can help the reader access information readily. This can be achieved by using indents, line spacing, typestyle, weight variations, drop caps, type size and colour.

Publications

I used the internet to research the different layouts for the three publications: magazines, computer, newspaper and interview. I found that each one had a different look and feel.

Click on the image to see more.

Interview format - I found with the interview formats that there was always a main image of the person being interviewed, a heading, introduction, pull quote and the questions asked in a bold font and sometimes in a different colour. The columns are flushed left and sometimes justified.

Computer review format - These layouts seemed to be busier, colourful and full of information. These formats have separate panels that are still part of the article but are secondary information.

Newspaper book review format - These have a similar format to the interview magazine format but are more formal. The headline is in a sans serif typeface and the body copy in a serif typeface. A drop cap is used to guide the reader to the beginning of the article and the paragraphs are indented. There are no sub-headings in this article or pull quotes.

Click on the image below to see more.

Design 1

An interview with a TV actor in a listings magazine entitled: Will Sheila tell the naked truth?

Headings: Roboto bold and regular / Rockwell regular

Introduction: Roboto Italic 16pt

Sub-headings: Roboto bold 10pt

Body copy: Roboto regular 9pt

Pull quote: Roboto light italic

My Chosen Combination

For this article I choose a mixture of typefaces for the heading because it was a double page spread and I had more space to work with. I choose Roboto and Rockwell because sans serifs and serifs pair well together especially as I wanted headline words to contrast. The Rockwell slab serif is a good typeface to draw attention and this is exactly what I wanted for the headline. The typeface has even strokes and a strong personality. Since the typeface is quite heavy it can be used when I overlay an image.

For the other words in the headline I mixed the typefaces using Roboto, bold and regular fonts. To emphasise the words and the hierarchy, I used orange and white for the words to stand out more. For the intro, I used Roboto Italic, to make the distinction that this block of text used a smaller font size and was separate from the heading.

For the sub-heading/questions, I used Roboto Bold 12pt and used the colour orange to distinguish it from the body copy, as this was an interview article. The orange represents the questions asked.

For the body copy, I used Roboto Regular 10pt. I needed a typeface that has good readability with continuous text. Since the brief did not state who the audience was, I thought this would be a good typeface to use. Roboto, with its many font families, can also be used in italics for the intro and pull quotes within the text. For visual cues, I used a 5-line drop cap.

Fig.5 Will Sheila tell the naked truth? Spread (2023) Fig. 6 A woman sitting on the chair (2021) Fig. 7 A woman with a green head wrap (2021)

Typeface combinations

Mock-up

Fig.8 Will Sheila tell the naked truth? Mock-up (2023)

Design 2

A review of a new piece of hardware or software in a specialist computer magazine.

Heading: Obritron Bold 53pt

Introduction: Open sans semi-bold 16pt

Subheadings: Obritron Bold 10pt

Body copy: Open sans regular 10pt

My Chosen Combination

I choose Obitron having used this for my font sample book earlier in the unit. I like this typeface because it gives a very definite computer look and feel which I think is perfect for a computer magazine spread. I used this for the heading and the sub-headings. I found it also looked good when I used this typeface for the drop cap. However, I didn’t want to overuse this typeface as it can be quite hard to read if used too much.

For the body copy and intro I used open sans because it's a clean typeface that is easy to read in continuous text. The look and feel of the typeface goes well with Obritron and I wanted to have the futuristic look to the magazine spread to go with the design of bright green. I don’t think a serif typeface would have worked for this particular article as I wanted it to look modern.

Fig.9 The most popular tablet products today, spread (2023) Fig.10 Lenovo tablet (2023) Fig. 11 Turned on ipad (2018) Fig. 12 Ipad tablet Samsung smartphone (2015) Fig. 13 Google on your smartphone (2016) Fig. 14 Tablet ipad screen internet (2013) Fig. 15 Futuristic technology abstract background (2023)

Typeface Combinations

Mock-up

Fig.16 The most popular tablet products today, mock-up (2023)

Design 3

A book review in a newspaper’s weekend edition.

Headings: Roboto bold 43pt

Introduction: Adobe Caslon regular 16pt

Subheadings: Adobe Caslon bold 10pt

Body copy: Adobe Caslon 9pt

Pull quote: Adobe Caslon Italic 16pt

My chosen typefaces

I paired two typefaces, Roboto bold and Adobe Caslon. I chose Roboto for the heading because the book is about motivation and I needed a sans serif typeface. These typefaces are friendly fonts that evoke an open and adaptable emotion. Sans serifs are plain and the Roboto sans serif typeface is part of the Neo-grotesque category which has consistent proportions and shapes, the letter ‘G’ is a single story. Roboto also has good legibility because of its versatility for both headings and body copy.

The second typeface I chose is Adobe Caslon. I chose Adobe Caslon for the sub-heading and body copy because I wanted a contrast. Adobe Caslon is a serif typeface and part of the old style category. It has characteristics of short ascenders and descenders with a diagonal stress which makes this typeface good for readability. The small size makes it perfect for body copy. The serif typeface gives a traditional and intellectual feel which is exactly what I needed for a newspaper article.

Fig.17 Why motivation is everywhere today, spread (2023) Fig. 18 Smiling man wearing suit sitting on bench (2022)

Typeface Combinations

Mock-up

Fig.19 Why motivation is everywhere today, mock-up (2023)

Reflection

Before I started this exercise, I thought I would do a simple layout of the heading, sub-heading and body copy. However, the more I started to research, the more I realised that many factors can influence the success of hierarchy, such as the use of alignment, colour, white space and visual cues such as drop caps. The type of article you are designing also makes a big difference in how the composition looks.

I have learnt that the heading doesn't necessarily have to be at the top of the page; as long as it is the first thing the reader sees, the hierarchy will be successful. The composition must flow so the reader instinctively knows where to read next. This is helped by having good composition.

This example is shown on the second design with the computer article. Here I have the heading in the middle of the page, followed by the intro and then the body copy. The body copy flows to the next page because the body copy is in the same colour and font size. In the numbered panel I deliberately made the font bolder and the size bigger so the reader knows this is for the numbered diagram.

For design one, I used the whole page for the heading and used two different typefaces, font sizes and colours to keep the heading interesting because I had more space to draw the reader into the article. I was able to overlay this text on the image. I'm unsure if I created the right feel for this spread and I think it should be more fun instead of more serious. When I received feedback from my tutor, she rightly pointed out the incorrect spelling of Sheila (I have since corrected the error) and the importance of proofreading!

For design three I kept the hierarchy simple, the heading at the top followed by the intro and the body text. For the visual cue, Photoshop I added a drop cap so the reader knows where the article begins. This design was for a newspaper and I decided a more formal look was needed and used a serif font for the body copy. For the book cover, I used photoshop to create a mock-up of the book for the article.

Overall, I learnt a lot from this exercise and I was able to use my skills like font psychology and font pairing from other units to create articles for this exercise.

References

Hierarchy.pdf

Download PDF • 138KB