Typography is a second language communicating on a subtler level beyond your actual words. The actual content is what you say, but typography is the first impression of how you say it.
Typography creates an experience before users have even read a single word or clicked a menu button. Typography doesn't just tell a story, it creates an atmosphere and emotional response the same way as a tone of voice.
As we described in Interaction Design Best Practices, words are the foundation of all interactions. Great designers understand this distinction and treat text not as content, but as its own interface.
In this article we'll talk about how to use typography to its fullest extent. We'll begin by exploring the levels of typographic hierarchy, then dive into individual elements, and finish off with additional tips.
Levels of hierarchy
As we described in Web UI Best Practices, typographic hierarchy is a subset within visual hierarchy. Typographic hierarchy arranges lettering so that important words stand out easily to readers who are scanning for information.
Without this hierarchy, every letter and word in a design would appear identical. Your design would be about as visually appealing as an MS DOS command prompt. As a general rule, designer Carrie Cousins recommends that your typography supports at least three levels of hierarchy.
Try to shape your typography into these levels:
Primary – The most noticeable text on the page, usually bigger and a brighter colour than the other layers of text. Because it's so powerful, this level should be sparse – reserve it only for headlines and decks (known as 'furniture').
Secondary – Less noticeable than the primary level, but more noticeable than the main content, the secondary level handles everything in between. This level features some minimal but distinct elements in size and colour , and typically includes subheads, captions, pull quotes, infographics, or supportive blocks of text separate from the main content.
Tertiary – This is the main content, the most common, and the least noticeable. It should be simple and not flashy – the goal of the other layers is to attract attention; the goal of this layer is to encourage the reader to become immersed in the text, hence less distraction.
Other – Smaller levels of hierarchy can be created by sparingly applying italics, colour , bolding, underlining, and other effects to tertiary type. These levels might include underlined links, a few bolded words for emphasis within paragraphs, etc. Text that shows up in banners, logos, or other background graphics also fall in this category.
In order to illustrate the separation of layers utilized properly, let's look at the below example from Jon Tangerine.
Courtesy of Jon Tangerine: http://v1.jontangerine.com
The typography here has three distinct layers to clearly explain the elements of the piece without explaining a thing.
The title is obviously 'We, Who Are Web Designers', but why is it obvious? The text is bigger (size), bolder (weight), and is set at the top-left where the viewers eyes go first (position).
The second level is the publication date, set in a different size and colour than the rest of the text, and also italicized to give more distinction.
The third level, the article preview, is devoid of features. Compared to the other layers it may seem plain, but that is so readers aren't distracted when trying to appreciate the actual content.
WEB DESIGN
We are a professional web design company with an experienced team of creative professionals. We create outstanding designs for Websites. Our team is adept at implementing the latest web standards and programming techniques. Pixotri technology is a creative house developing quality web designs, E-Commerce solution. SEO services and Gaming development .
Contact us for your web design requirements . email-info@pixotritechnologies.com Visit our website: www.pixotritechnologies.com
No comments:
Post a Comment