Type Journal: Converse

It is hand rendered and has been created by a white marker. It is uppercase, sans serif. It is informal and trying to appeal to a young audience which I think works.

Type Hierarchies: Tabloid newspaper

Low-end newspaper: The Daily Mirror

the way my eyes moved around the page

I found the imagery more eye catching than the actual article. The advert was also very distracting from the editorial content.

type hierarchy - from left to right

With this page, the type in the advert caught my eye just before the article headline did, because of the huge use of the colour red. From there the bigger the text, the higher up in the hierarchy.

Type and image:

As you can see above, image takes up a very large area of the page. Tabloid newspapers tend to have less detailed text and more images to entertain the reader.

Fonts and types used:

• Woodblock font used for article headline
• sans serif font for smaller heading
• serif font for body text
• serif font for larger article quote

Type Hierarchies: High-end newspaper

High-end newspaper: The Guardian

This page is extremely dominated by the advert in the lower half, which surprised me about this type of newspaper.

Left to right in rows

The bigger the text the more it stood out to me on this page, and colour was also a huge factor, meaning the advert interfered with the article thus being more eye catching overall. However, the first piece of type that I saw was a quote from the article.

Typefaces and fonts:

• Fonts similar to Helvetica regular and light used in the advert, along with some unidentifiable fonts such as a serif one and a handwriting-esque one.
• Sans serif type used for body font
• Light serif font used for article heading and quote
• The reporter's name is boldened for effect among the light font

Type and image:

The image in the article breaks up the text very abruptly; I'm not sure if this is a good thing. It makes it seem like there are two separate articles. The image used in the advert is very large and takes up more space than any of the type used.

Type Hierarchies: Free newspaper

Free newspaper: Waitrose in-store newspaper

This page is neatly laid out and has no over bearing type.

From left to right in rows

The leftover type was indistinguishable in terms of the type hierarchy

Fonts and typefaces:

• ITC Avant Garde for Headings and large text, sans serif typeface
• Unidentifiable serif italic font used for bigger bold text
• serif font used for body text: quite similar to Garamond regular

Type and image: 

Image is used predominantly on the right side of the page and it doesn't interfere with the type. It is neatly laid out so it is separate.

Editorial content and commercial content:

There are surprisingly no adverts on this page considering it is a free newspaper. In this newspaper the adverts have their own pages so the articles aren't interfered with, which is different from the Metro (another free newspaper).

Type Hierarchy: Freebie magazine

Freebie magazine: ASOS monthly magazine

This page is organised within a simple grid system using photos and type. All of the text is pretty small so it was hard to figure out what drew me in first.

Because of the text size, my eyes naturally scanned the page from top to bottom, being partly distracted by the colourful imagery.

Fonts and typefaces:

• All sans serif
• Typeface very similar to Futura, I think it is the only typeface used on this page. Simple and straightforward, not costing too much time to plan out.
• Bold and italic are used

Type and image:

There is more image than type and it certainly dominates the type on the page, as it is what is more important in this context. The images are colourful and placed appropriately with the small type underneath.

Hierarchy of information and hierarchy of type:

The bold type is the names of the products, so is higher up in both hierarchies.

Type Hierarchies: Average magazine

I have picked a sophisticated magazine and a freebie magazine, so for my inbetween magazine I have picked Grazia, which is a fashion and celebrity gossip magazine.

The first thing that sticks out to me is the bright yellow, which contrasts with the white heavily, which contrasts with the black type. It is an interesting layout which is well executed.

How my eyes moved around the page

Fonts and typefaces used:

• Italic typeface for headings, looks very similar to Century
• Garamond for body font and biggest heading
• Sans serif font for small body text that is similar to Helvetica.
• 'Grazia' in Didot

Type and image:
Image is the main focus point on this page, so they are quite large. The text fits aroudn the images nicely, keeping to a simple and interesting grid.

Type Hierarchies: Sophisticated/well designed magazine

Sophisticated magazine: Red - "aimed at real women who lead busy but glamorous lives."

I displayed the hierarchy of the type on this page of Red above. The size is a clear theme in the hierarchy, and capitals. The red text was more eye catching than the plain black. I found the images quite distracting from the type.

This is the general direction my eyes moved around the page, I went from the logo and header to the smaller information then back up to the top again in a clockwise motion.

Fonts and typefaces:

• Only 3 or 4 typefaces were used
• Century regular and italic
• A sans serif typeface that I couldn't identify

Type and image:

There are a few images used but they aren't overbearing, and they don't take over the type.

Type Hierarchies: Commercial webpage

I chose to look at Amazon which is a commercial webpage, as it is a buying and selling website.

I found that there are many colours on this website compared with the last two I have looked at, and there is more image aswell.  The amount of simple information that is trying to be shown on this page is high.

Below is a sketch of the layout and how my eyes wander around the page when looking at the type and image.

I seem to be drawn to the middle of the page where there are deals and images of items for sale, and coloured type. Then I move on to the squashed together information on the right, then around to the other side. Below is a break down of the type hierarchy as I saw it.

It is clear that the top of the hierarchy is swamped with colourful type, which naturally is more eye catching. Also, boldness and size is a large factor.

Fonts and typefaces:

• Arial is used for the smaller text, that isn't trying to catch the viewer's attention straight away
• Century is used for one large header
• a few other sans serif fonts are used for different items

Type and image:

There is almost an equal amount of type and image on this page, which isn't suprising because it is commercial. The images back up the text.

Editorial content and commercial content:

It is all commercial content on Amazon.

Type Hierarchies: Well designed webpage

For my 'well designed' webpage I've chosen Typography Deconstructed. I think it's really simplistic and aesthetically pleasing, while being easy to navigate.

                           

I deconstructed the type to make a hierarchy as seen above. Obviously the website name caught my eye first, as it is bold and larger than any of the other pieces of text. My eyes then travelled to the slogan placed underneath it, even though the type is very small in comparison. My eyes then travelled to the large block of blue with text in it in the middle of the page to the right, because of the contrast against the white background to most of the page. From there my eyes travelled all over the page depending on the boldness of positioning of text. The 'search' bar definitely caught my eyes last.





Typefaces and fonts:

• The website name is in a typeface very similar to Vekta Serif Bold.
• The body font is helvetica
• Georgia is used for headings

Type and image:

There is one image used on the homepage, places in the middle to the left of some text. It is not overbearing and isn't distracting from the text on the page. It also follows the same colour scheme.

Editorial content and commercial content:

There is no commercial content on this page, it is all editorial content which makes the type all work together very well.

Hierarchy of information and hierarchy of type:

the information that is at the top of the type hierarchy is about posters that the website is selling, showing that is what they want the viewer to see first.

Type Journal: RCA

The letters R and A have been designed to match the C with the negative space. They are still legible as the same letters but have different features. the A has also been designed so that the stems have the same angles as the R to make it a very mirrored logo.

Type Journal: Vertigo

This poster was designed by Saul Bass who always uses a similar style. This typeface is hand rendered, uppercase, sans serif. It has a sketchy style to it. I think it is successful as a typeface and suits the poster perfectly.

Type Journal: Elephant

Production

Digital, or hand drawn as it is an image used as type and vice versa.

Anatomy

The letters are all different sizes to create an image, so there is no set anatomy. This typography doesn't have a proper typeface.

Identity

It is the logo for Jumbo Records, which is a record shop in Leeds.

Character

The word 'jumbo' means very large, which is connotated with elephants, and after some researching I found that there was a famous elephant around in the 19th century called Jumbo.

The name 'Jumbo' has been created using a simple image of an elephant: the 'J' symbolizes the trunk, the M is the biggest letter to create the legs of an elephant, and the flick of the 'o' is the tail. Two flower symbols are used for the eye and tail to give it more character and life.

Type Journal: Flow

I found this typography featured in a It's Nice That article and I thought it was really intriguing.

Production
It has been created using acrylic paint on plastic, and folds and shadows to create "dimensionality".

Anatomy
There is no identifiable anatomy apart from that it is sans serif.

Identity
It is a personal experimentation using acrylic paint, and it is image used as type (or type used as image). It was created by Sawdust.

Character
This type is colourful, playful and fun.

Design principles: 'the quick brown fox'

In the last session we cut up each individual word used in 'the quick brown fox' in lowercase and mixed them up like this:

We were set the task of taking these and arranging them four times, so that the words would be read in order; 'the' needs to be seen first, then 'quick', and so on. I found this quite puzzling as I needed to keep looking at the arrangements with fresh eyes, which was a hard task.

I think the most successful is the third one down, as the sizing of the types works the best. Haettenschweiler made it difficult as its boldness is overpowering and catches your eye very quickly no matter what, but I tried to size it effectively. Mistral is also a bold font, but not as readable as the other fonts. This made it a tricky situation as it is the first word, but I just made sure it was the largest word on the page.

I experimented with the layout, especially in the last design. I wanted to see how the sentence would work, and I found that in a diagonal line the words can still be read in order when the sizes are adjusted.

Type Journal: Asian Graphics Now

'Asian Graphics now!' seems to take a very eastern style to fit with the Asian theme. The letters are very fitting with each other to the extent that they look extremely similar to eachother.
Character - a very decorative font.
Production method - Digital but inspired by bone.

Type Journal: Wild Art

This is a book about art and design that I came across in Waterstones.

Production

lead

Anatomy

italic, sans serif, tall and narrow

Identity

I couldn't find out which font it is, but it is an italic sans serif gothic font.

Character

This type is bold and simple.

Type Journal: Young Turks

Young Turks are a record label, and this is an album cover.

Production

woodblock, or digital.

Anatomy
sans serif, consistent in style, very tall, narrow and slender.

Identity
Rama Gothic Condensed or Headline Gothic are the closest fonts I could find to this type if the shadowing wasn't there, but I haven't been able to identify it.
It is condensed and symmetrical.

Type Journal: Sheffield Doc/Fest

I found this type on an advertisement for a festival. It is digital but has a typewriter style to it to make it seem dated and scruffy and personal.

Design Principles: Legibility and readability

We were set the task of printing 'the quick brown fox jumps over the lazy dog' on A4 in uppercase and lowercase in block, gothic, roman and script.

 Block: Haettenschweiler

Gothic: Avenir

 Roman: Century

 Script: Mistral

In groups we had to find which one was the most readable, and which was the least readable. We chose somebody's gothic font for most readable, and the least readable was a block font. This was a common finding in the class, and we discussed how block fonts are mostly for headings and for show; they are there to catch attention, they aren't used for readability. However, gothic fonts are used as 'invisible' types. They are extremely simplistic and make you focus on the content rather than the type characteristics.

We experimented with distance, and found that the further you move away from the sentences the easier the block fonts were to read.

Factors that contribute to readability:

• thin lettering
• sans serif
• lowercase
• distinction between glyphs
• alignment - justification
• kerning - dependant of font
• space between letters
• border around page
• uppercase and lowercase
• usage
• roman and gothic are easiest to read
• script and block - harder
• proximity of glyphs
• stretched letterforms
• lines of type
• the 'x' height - blocking
• speed of reading
• readability
• intricacy
• contrast of anatomy