Study Task 4, Hierarchy of Type - OUGD404

TASK - To investigate the typographic hierarchy and the information hierarchy and compare the two. Compare three newspapers, magazines and websites. 

NEWSPAPERS

Metro

I started of by looking at the free Metro paper. It was interesting to see the difference in a newspaper like this compared to one you would buy, as it relies heavily on advertising.
I found there was 8 fonts and 3 typefaces on the page I chose, I was able to identity two of the three which were Corpid for the Metro headlines and Sentinel for the bodycopy. The percentage for Type to Image was around 60 - 40 to the image. The percentage for story to advertisement was 50-50, this was interesting because the Metro relies on this advertising to pay towards the paper. 
What I found with this paper, is that the articles lead your eye down to the advertisement with the text used. The hierarchy and how the type has been arranged purposely grabs the viewers attention.

I cut out the main headline as the heavy weight type is what strikes you first:

What grabbed my attention second was the headline for the advertisement. I think this was done purposely to how it has been central aligned with the main headline. What also makes it stand out is the contrast in colour and how the white type stands out against the dark purple. It is quite a lightweight font with a medium scale so it shows type does not need to be bold to stand out:

Because of the main headline in the advertisement stood out second, this then lead me to the two smaller subheadings within the advertisement, as the main headline lead my eye in the first place. These again contrast with the purple background and were still in a light weight:

The second subheading:

The logo of the 'talktalk' I cut out next, This was due to the type used for the 'talk talk' logo. It was a rounded colourful font which again contrasted with the background it was on:

As my eye was not focused on the advertisement, the prices were the next thing that stood out. This was due to the colour of the type. The text itself was in red which contrasted with the white 'bubbles' they where in. What also stood out was the numbers/prices and how they were bigger than the text they were next to. This then continued to the other prices and so on until all three prices were cut out:

After the prices had been taken off the page, I proceeded to cut a smaller section of the advertisement that the same colour scheme of the prices. This was because they all linked together when I was looking at the page: 

Again taking more of the advertisement as my eye was focused on that part of the page. The type for this was still a light weight and small scale but again the colour helped it to stand out:

After most of the advert was taken away, what then stood out to me was the smaller headlines within the stores. This is due to them being a bold and heavy scale:

After all the headline had been taken away, the bodycopy started to be what was next in the hierarchy. However the bodycopy tends to blur into one when there is no other information and so I cut due to how I would still read the page i.e. The top right article grabbed my attention first and so on: 

Before I took out the last of the bodycopy I cut out the journalists names. Even though they were a small scale font, they were bold and a heavy weight, this is what made them stand out compared to the bodycopy:

Final Type Hierarchy:

The last type I noticed on the page was a small section of the advertisement. I noticed this last as it was extremely light and on a small scale. It also blended in on the bright pink background it was on, as the type itself was white - maybe if had been black type it would have stood out more?

Final Information Hierarchy:

After all the type hierarchy was completed, I rearranged the type into the information hierarchy. I re-organised this into the main stories you would read first and then the smaller/shorter stories. I then grouped all the advertisement together as you would read all this information last. I think this was a successful design in terms of leading the viewer to the advertisement but not successful if they want to showcase the article:

The i

I chose to de-construct the i paper as it is a cheap yet poplar paper. I wanted to see the reason for it being so cheap and whether, like the Metro, relies on a lot of advertising. 

With the i I found the page I chose had 12(ish) fonts and 5 typefaces. The 5 were: FF Page Serif, Sentinel, Luba Light and ITC Newtext (Nearest Match) could not identify the fifth. With the task of identifying the fonts, I found this the most challenging. As although I used identifont, most of the typeface were coming up similar but not the same and so what I have matched is a close replica to the typeface - Is that because most are modified for a certain brand/company?

The type to image percentage on the page was around 70-30 and the story to advertisement was around 80-20. What I found with this paper was, it leads you around the page and also has a wide variety of different sized headings - Is this to show the importance of an article? 

This paper still had a heavy amount of advertising within it. What I found interesting was the advertising headline stood out more to me than the main story headline. I think this was due to the colour of the text with how bright the colouring was and the scale of it. The main headline was what I cut out after this. I think the main headline did not stand out as well as it possibly could have due to it being lowercase and also a relatively small scale for a headline:

The second smaller headline was next to be taken out. Again due to the bold type used:

Once the headlines had been removed, I had difficulty thinking what stood out next. What I went for was the smaller titles of the pages as the background colour of them were bold and the position of the top left hand corner is where people tend to look first on a page:

I then took out some of the smaller headings of sections on the page as again they have a bold background colour which makes them stand out:

I then proceed back toward the advertisement and took out the 'Tesco' logo within it. It again was in a brightly coloured type but still a relatively regular weight:

More sections of the advertising cut out due to the colour and scale of it:

I started to take out the rest of the journalist names that were left, as they again were small but bold which helped them stand out against the bodycopy:

I then started on the bodycopy, again like the Metro I had to think of how I would read the paper, as again the type of the bodycopy merged into a blur once all the information had gone:

  

Final Type Hierarchy:

Final Information Hierarchy:

After the type hierarchy had been completed I rearranged this paper into the information hierarchy. Compared to the type, it looks much more efficient in terms of how you would read it. I again sectioned the information into what you would read first - The story being first and the advertisement last. This is completely different to the type hierarchy as most of the advertisement was at the top of the page within that:

The Guardian

I have chosen my third paper to be the guardian as it is a more expensive paper, read by a different target audience. It was interesting to see the difference in the adverting element, as compared to the Metro it was light with the advertising however it still had more than I was expecting. 

Within the page I chose, I found around 9 fonts and 2 typefaces. These were a Family typeface known as Egyptian (for all The Guardian headlines) and for the LLoyds Bank was a typeface called FS Jack (with alterations). The percentage for type to image was around 40 - 60 and the story to advertisement was around 75 - 25. What I found within this paper was although it had less advertising compared to the other two papers I have previously looked at, it had much more imagery. It still had a vast amount of text, but was still surprising to see the large scale of imagery they actually use. What I also found is that it doesn't lead you eye around the page as much as say the Metro and unlike all the typefaces used in the 'i' the guardian sticks to the one typeface with different scales which, in my opinion, makes the paper more consistent.

Like the 'i', what struck me first was the headline within the advertisement. This is due to this page not having a large main story headline and so this word 'fancy' is what grabs the viewer straight away as nothing else is competing for the attention. The reason this stands out is it being in a heavy uppercase type as well as the dark colour green, which accentuates the type further: 

Due to this headline standing out first, its smaller subheadings that were surrounding it stood out next, again due to the boldness, scale and colour:

After the main headings within the advertisement were removed the next thing that grabbed my attention was the prices/percentages of the advertisement. Again due to them matching the scale of the subheadings that I have previously removed. Also as this advertisement was all in the same colour, all the type within it linked, which made your eye move from type to type:

The smaller heading were next to be removed. Even though they were on a smaller scale the heaviness of them made them stand out:

Again cutting out the smaller scaled type within the advertisement:

After I had removed the main information from the advert. The next thing to remove was the headlines within the articles story. Even though they were not bold, the scale of them compared to was left on the page made them stand out:

The second headline on the page getting removed. This was second compared to the previous headline due to the placement of it and that I tended to look at the top right first on a page rather than the bottom left:

I then proceed to cut out things like titles within the article and the journalist names. Again due the weight of the font used:

I then removed the indentations within the page i.e. Smaller captions that were on one of the images, explaining what it was. These again were on a very small scale but all in a heavy weight as well as being uppercase. 

What I found next was the initial within one of the paragraphs was grabbing my attention. Even though it was a thin, light text, due to it being larger than the rest of the bodycopy was the next thing that stood out:

After I had removed the most text apart from the bodycopy on the articles, the leftover information within the advertisement seemed to be standing out more. This again was due to the colour used. I then proceed to remove this:

I cut out the terms and conditions on the advertisement before the articles bodycopy. This is because even though the terms and conditions were a much smaller point size, because of the composition the type for the T&C's looked more 'crammed' together which made it have more definition: 

After all the other information was removed, I started on the bodycopy. Again working in the same way as the previous newspapers, with the idea of what I would read first on a page:

Final Type Hierarchy:

Final Information Hierarchy:

The re-arranging of the information hierarchy. Again the 'information' looks much clearer and concise compared to the 'type' hierarchy. I think The Guardian is the most successful design out of all the three newspapers I have look at due to it having much more consistency with the type used.