Readability, Legibility and Hierarchy – Brief 6

Understanding the terminology

I was set the task of curating concept ideas of typographic that display these three words (Readability, Legibility and Hierarchy). The first step of initiating the process of creating these typographics was to make sure I understood what the terms mean when they are applied to the context of typography.

Readability – refers to the way in which words and blocks of type are arranged on a page.

Legibility – refers to how a typeface is designed and how well one individual character can be distinguished from another.

(Both sourced from–webdesign-12211#:~:text=Readability%20refers%20to%20the%20way,can%20be%20distinguished%20from%20another. as this used a really good definition)

Hierarchy – A system for organising type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content.

(sourced from:–webdesign-11636 )

Researching, exploring and brainstorming

So now that I understand the meaning behind each of the terms I was then able to start considering how I would present these meanings through a graphic. I started my planning by searching by using google images for other work that I liked and that inspired me. I collected a few of my favourite designs and have displayed them in a mood board, as shown below, I plan to use these when it comes to sketching and devising my graphics and loosely apply these concepts to my own work.

My Mood board as mentioned in the above paragraph (all sourced from Google images)

After putting this mood board together and feeling inspired to create my own ideas, I decided to brainstorm a mind map of ideas of how I could communicate these words through different aspects of a graphic. This mind Map is displayed below.

This mind map above displays all the different brainstormed ways that I could initially think of for communicating these words effectively.

Researching and exploring suitable fonts

The next step I took was to explore which fonts I would think as appropriate for this task and communicating my work in the way that I need. I used Adobe Fonts to browse fonts and find ones that I liked. Shown below are just a few that stood out to me as effective fonts and appropriate for the readability, legibility an hierarchy graphics.

Sketching initial concept ideas

I had now understood the meanings of these three terms and what I need to communicate through the typography, researched how others have done so and displayed my inspiration in a mood board, brainstormed initial ideas through a mind map and explored different fonts that would work well with my ideas and work well with communicating the meanings of these terms. The next step was to sketch out initial ideas. I roughly sketched out two concept ideas for each of the three words, as shown below, and ended up with six total concept ideas for these typography graphics.

Putting ideas into a digital context – Adobe Illustrator

The next step after sketching out some concept ideas for these typographics was to make my final ideas. I decided to use illustrator to finish off these concept ideas and bring them to life.

Illustrator – mid-contsructing my hierarchy idea.

Utilising the fonts that I had picked out as my favourite, as shown above, I briefly put together my ideas, allowing me to explore with them more in a digitally visual way which is important as it allows me to get an idea of what it looks like.

Here are my final three concepts put together in illustrator:




Shown below are my three final designs for Readability, legibility and Hierarchy.


my final Readability design.

I only made one adaption to this as I was told from my previous design that there was too much going on. I had one too many ‘Readability’ texts on screen and this, as it is now, is much more viable and readable.


My final Hierarchy design.


I also adapted this one slightly from the initial design as shown in previous screenshots, this was because my peers advised me to instead of having ‘Legibility’ at the bottom of this graphic in capitals, to have it written as a normal word would be (e.g. capital first letter, rest lowercase). This was suggested as it’s known that words are much more readable or ‘legible’ when written in such a way. This really did enhance my graphic and made it much more readable and aesthetically pleasing. I was really happy to gain this feedback and adapt my work.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with
Get started
%d bloggers like this: