Have you ever been to a website where you just take a second just to think to yourself about the purpose of the font selection of the website your on. Something like, “Did the designer really think that this font combination was going to bring the best conversion rate?” Well this is often the case with many websites because with all the energy we as a community put onto our web typography, we barely put enough into the hierarchy of our web typography.
The most important aspect to consider when designing a website is how you can properly display the information in a way where it is cohesive and will draw the user/visitor in to read it. With that in mind, the order in which you plan to arrange your website’s typography should be carefully considered. That is why in this article, you will see a breakdown of what web typography hierarchy is and how to properly arrange it for your next web project.
What is Web Typography Hierarchy?
To understand what web typography hierarchy is, we first need to understand clearly what a hierarchy is. Now a hierarchy is an arrangement of different classes, starting with highest position/most important at the top and the lowest position/ least important at the bottom. In society, as you go up the ladder of hierarchy, members of each one carry more stature and relevance than those at classes below it. For example take a look at your national government is organized. The political leader, or presiding royal family member depending on where you live, will always carry the most stature and social relevance than a district level government official, or someone low on the list to becoming the next ruling royal.
How Should You Organize Your Own Hierarchy?
Now its time to take a look at the fonts being used on the website that you have designed and classify them from king to commoner.
King: This font will always be at the top of your hierarchy because it font will always be the first one that is seen by anyone that views your site, and carries the most pressure in terms of persuading visitors to continue browsing your site and more importantly your content. Typical places where you King are, depending on how site is organized, anywhere within the general space of your header area. This space includes things such as your logo or top navigation menu. Typically found only on the homepage in most instances.
Queen: This font is the second in line from your King and holds the responsibility of being the font that is able to take on the same responsibilities as the King when it is more relevant to the current page. Typical places of the Queen are body text headings, section headings, and taglines.
Knight: This font is third in line of importance, and is has a special role. By this I mean that a Knight font does not have to necessarily be used at all in your website. The Knight type font is what is used for when you feel like you need a little extra separation of content on your website. Typically if used, this font type will tend to be used in blockquotes, list headings, and tables or charts.
Pawn: This font is at the bottom of your hierarchy, and is more emphasized about being clear and readable than it is on creative character. However, this aspect is still considered. The Pawn type font is nothing all to special really, most commonly it is either Times or Arial. This is so because these fonts are well structured and quite easy to read. The typical location for your Pawn type font is the body text.
What To Walk Away With?
Like anything in life, there needs to be a certain level of clear organization for the proper functioning of your website. To get the best results you have to put in a good deal of time and effort into your planned organization structure, this includes spending a much of that time on your planned font font hierarchy. A website’s font hierarchy is a differentiating factor between having a website that is easy to read, follow, and understand versus having one that seems jumbled up, and confusing. Remember to take the time to really analyze your fonts in use, and putting them into the proper hierarchy roles, and you’ll come out with a well functioning site that is so easy to follow a toddler can do it.
I hope you enjoyed this typography article, please consider sharing it with others, it’s really a great way of saying thanks. Please don’t be shy to comment below! For more useful articles like this please don’t forget to subscribe to the RSS-feed and follow Inspirationfeed on Twitter+ Facebook!
