Design Principles: The Readability of Type Order

Today was looking at how readable type is in different categories. Whilst still looking at the 4 main categories of Gothic, Block, Roman and Script the first sentence was cut out so each word was individual and now movable.

The type was then arranged so that each sentence was constructed from one different type category. The first thing that is noticeable is how the sentence does not read in order. For example the second sentence reads 'brown the fox quick' and the fourth 'quick brown fox the'. This shows off perfectly what was realised earlier: that script and roman are harder to read compared to gothic and block.

Now the task will be to use the order of these sentences and change the position and scale of the words to make them read in the correct order. Each of the fours sentences will be attempted and played around with to see how far type can be pushed and still be readable.

---------------------

An interesting thing that was noticed was how the position doesn't overly matter it is more the size and how the next word links on to it. Below show three examples where the words aren't in the correct order but still read 'the quick brown fox'.

The words work down the page and the sentence decreases in size. All is in the correct order minus fox which is slightly out to the left. Because it is not inline with any words it doesn't read in the same sentence but it read afterwards.

Even working backwards the words still become readable as a sentence because the sizing and linking between words is correct. If the brown was situated next to the quick on the right then it would read as a sentence increasing in size. But because it is jumbled your eye is attracted to the the and then follows the sizing pattern.

Working clockwise round the 'the' has worked very well in leading your eye in the correct direction. Even though the 'brown' is bigger than the 'quick' it doesn't appear to matter as the 'quick' is a more legible typeface on screen and from a distance because it has no serifs.



-------------------------

This works down the sentence in the correct order. The 'fox' has been made even smaller so that it is not the first thing that catches the eye.

This works equally well by decreasing in size but also varying it from left to right. Having the 'fox' written vertically downwards means your eye doesn't necessarily recognise it as a word or not at least a word that jumps out so it reads it last.

This one was being slightly more adventurous in the idea of having 'the'  and 'brown' together on the same line of text but underneath having the word 'quick' larger so that the eye automatically jumps there first.

Once again playing around with the idea of the sentence being backwards but still reading from right to left clearly because of sizing and the base line.

---------------------

Interestingly having the fox higher up but smaller and coming off of the quick still makes it read last. This is because the 'brown' is easier to read and stands clearer than the 'fox'.

This one works the best because it is neat and straight to the point. It reads in the correct order and looks the nicest and least complicated.

This works well as the size is varied so that the words stand out in the correct order. 

-------------------------

The two starting words are the harder ones to make noticeable so  here show  how they are bigger than the ending san serifs. This way they grab attention and hold more of the focus.

Playing around with a similar idea as before of having the end words vertical so that the eye doesn't register them as quickly. This one may work better if the 'brown' is below the 'k' flick and inline with 'fox'.

A simple but probably the most readable given the set order of the typefaces.



----------------------

This exercise has been very useful as it has shown that if different types of type are in the same point size and  rest on the same base line some will stick out more than others. It has also shown that they don't necessarily need to be in the right order to read correctly.