# Typography

Typography is the system of font sizes and weights to establish a logical flow and hierarchy for your content.

# Overview

At its most basic level, a site’s content should be effective and persuasive with only text — images, animations and other graphics are there to support that content, not supplant it. Therefore, clear and consistent headings, highly legible body paragraphs, clear labels and sentence length are critical. To ensure a clean typographic system, we suggest the following basic guidelines.

# Hierarchy

Hierarchy signifies importance by structuring something based on its inherent importance.

Users should be able to scan content and identify the differences quickly. Clearly define information with headings, list groups, blockquotes, and assorted display faces to signal a change from one level of content to another.

• Organize your content thoughtfully by breaking it into sections with appropriate headings.
• Position the most valuable information first, and cascade to secondary or tertiary info from there.
• Try to use weights and sizes that are not too close to one another.

# Contrast

Items with a higher contrast to their surroundings are recognized first.

Don’t assign every item with the same weight or size — this will defeat the purpose. Rather, define the relationship of the content first, and assign weights that properly represent them. Clear differences between content will help users navigate your site.

# Scale

Scale works in concert with contrast.

Whereas contrast helps define both readability and scanability of your content, consistency in sizing across elements maintains consistency and promotes a better user experience. A visual type scale is baked into all our templates to help you create sites that adhere to best web practice standards.

# Resources

• IBM's Typography methodology
• Web Typograpy 101
• 10 Tips On Typography in Web Design