Visual Hierarchy and Visual Legibility

In Graphic Communication visual hierarchy is an important factor in any design that uses text or imagery or combines the two.  It is the order you see first.  A good graphic designer should be able to guide the viewer around the design in the exact path that he wants.

Newspapers are great examples of visual hierarchy, different parts of the newspaper need to grab your attention at different times.   

The headline is the first thing to catch your attention, then it’s the ‘Free DVD’ font, then the Daily Mail header, then the image, then the Sub-heading and finally the text comes last.  This is more or less how the designer of the newspaper intended the view to read it, so the layout’s visual hierarchy works.      

There are some devices that can be used to create this visual hierarchy, the colour and typography are the two main ones.  Obviously the biggest and boldest words the page will catch the viewer’s attention first and be read first.  Hence the reason the headline is the biggest on all newspapers.  The colour or the difference in colour between the background and the text helps make words stand out well, in the newspaper examples the white on blue stands out better than the white on red, although it also helps that the words are also big and bold.  The yellow on blue text, makes it easy to read but makes it step back slightly from the bold ‘Free DVD’ text.

With images clearly the bigger the image the more it stands out but the colours in the image can sometimes alter that. 

The positioning can also plays a big role in the hierarchy, because we read from left to right we will (supposedly) view the design from left to right, this is why in most cases the headline is positioned on the left and the large image on the right.

Another important factor in Graphic design is legibility.  The viewer needs to be able to read what’s on the design.  This may seem obvious but still happens.  The main culprit for creating illegible text is using really small font.  If the viewer has to struggle to read it there not going to bother.  Although in some cases a smaller font can still be readable and benefit the overall design.

Is the font here legible?  The white on black font makes what would be an illegible size font somewhat readable, although I personally think that this font is still too small even though it can be read...ish.

Another factor that can affect legibility is the use of colour in the text and the difference between the background and text colour.  As we have seen above white on black works well in making the text stand out, but colours like yellow font on a white background is never legible and a combination of red and green causes confusion for many people making the text or image less legible.