Top

Design a Readable Hierarchy using Web Typography

It’s a no-brainer that websites are crafted by layering information into page sections. The most important content usually falls near the top of the page and gradually cascades down. Capturing attention requires a sense of natural order to your page content. Web typography can relate to the typeface, but it also relates to overall structure and flow while reading.

I want to suggest a few tips for web designers who wish to bring sequential order to their typography. This occurs through a number of changes that require careful attention to detail. A great place to start is by reading popular online magazines to capture the essence of their typographic flow. Otherwise just keep practicing design features by quickly iterating new concepts on-the-fly.

responsive web design devices book

Sizing & Structure

One of the biggest topics to consider would be font sizing. If a website is primarily using large oversized fonts then you need headers, links, pull quotes, and sidebar elements to match accordingly. Headers are usually bigger than paragraph text and often appear as the largest text on a page. If you’re having trouble with proportions it might help to sketch out ideas to further visualize this process.

Related to font sizing is the structure of font placement. When talking about structure we could even get into page architecture which includes navigation items, images, content sliders, buttons, and other similar pieces to the digital jigsaw puzzle. While solving puzzles can be infuriating the process is also fun and quite rewarding once completed.

Use that frustration as your motivator to push through and find the perfect page structure. When I’m stuck for new ideas I like to write down all the required page elements along with possible ideas for CSS properties. This list includes headers like H1-H6, paragraphs, links, input fields, practically any elements you might find on a webpage.

A properly structured page requires an understanding of sizing and proportion. But it also requires an understanding of the page hierarchy – that is, what should be most prominently displayed in comparison to something else? Asking the right questions will get you started and soon you’ll be placing the outside pieces ready to move deeper inside the puzzle.

Suggestive Spacing

A popular term amongst designers is whitespace and it’s popular for a reason. Every composition needs some whitespace or the piece would be filled up to the rafters with… stuff. But too much whitespace is another common issue which doesn’t provide much consolation either.

When thinking about space consider the relative positioning between elements on a page. Think about how elements relate to each other based on the amount of space put between them. Nowadays responsive websites make this topic more elaborate because space on a 1080p monitor is different than a mobile smartphone. But the exact pixel measurements are not as important compared to the relative positioning of each element.

web design books helpful tips

This is why spacing is so important to create an implied relationship. A large page header might include some related information about the page such as the author, publication date, or category. This info might be directly under the text or spaced by a wider margin. Also consider this effect between headers and paragraphs or individual items in a list of content.

Spacing can have a varied effect based on the situation. Photographs used within an article might require more space than a series of thumbnail images in the sidebar. Just keep in mind that everything on your page is relative to something else. Consider how much space is needed between elements based on their relationship to the content.

Contrasting Effects

I don’t want to push too far into a discussion on color because it is a relatively deep subject. I do want to mention that color contrast is a huge part of content hierarchy because it defines what will stand out. Users will first generalize a page before biting into the meaty parts.

Everything on the page will contrast regardless of color choices. While the hue is very important this will mostly stand out between elements directly in contact with one-another. Generalizing the overall page is more important to first impressions, which I’ve heard are kind of a big deal.

While designing a mockup think about each element location on the page and its relative importance. Using a large navigation might require sub-links with a lower contrast than primary links. But the overall header might seem like background noise compared to the page header and introductory paragraph. There isn’t really one correct answer because each website has a different set of needs. Contrast is very important when talking about color but it’s also important when talking about the overall composition.

Font Choices

Lastly I want to bring up typefaces because the subject does have a reputation of being overly dramatic yet it is quite important. The number of fonts on a page should stay below an average limit of 4-6 based on how many different page sections are required.

Over the past few years resources like Google Webfonts have surfaced with a library of free typefaces. It’s easier than ever for designers to include 5 or more different fonts into a layout – the question becomes how many are really needed? Within primary content it’s best to stick with only 1 or 2 keeping everything consistent.

google web fonts screenshot homepage

When veering into other page sections like the footer, header, or sidebar there is more flexibility. But to create a uniform browsing experience I would recommend a hierarchy that puts similar fonts into similar roles. So headings on the page and in a sidebar widget could use the same font but different styles. Navigation links could also use this same font or a similar style as the page content.

To break up the repetitive design style try mixing up features with CSS. There are plenty of options like all-caps, border underlines, background colors, text shadows, and even letter spacing. Crafty CSS properties can make a website using 2 or 3 fonts appear like a site with 5 or 6.

Closing

Great content will not always find an audience without some deliverable medium. Even if you’re a fantastic copywriter it takes some connection to get people open and willing to read what you have to say. Content hierarchy goes far beyond just typography, but when done properly all page content will be much more readable and easily digestible. I hope these tips can get you started thinking about content from a hierarchical perspective beyond just typical design traits.

If you’re having trouble with web typography you might look into custom site builders. WBI has a great list of website makers for the less tech-savvy designers who want to focus more on typography and less on coding.

Jake Rocheleau

<p>Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @<a href="http://twitter.com/jakerocheleau">jakerocheleau</a>.<br /> Connect with Jake on <a href="https://plus.google.com/117805273496374929333/posts">Google +</a></p>

No Comments

Sorry, the comment form is closed at this time.