Website Typography Best Practices
Typography is more than just what fonts you use. Typography is everything that has to do with how text looks – font size, line length, color, and even more subtle things like the whitespace around a text. Good typography sets the tone of your written message and helps to reinforce its meaning and context.
Headings
Research shows that the majority of people only read headlines on the Internet. When user behavior is such that many of your readers won’t even bother with the body copy, then you have to make the typeface of the headings really stand out to grab their attention and persuade them to read further. The headings in your site copy are arguably very important.
The trend with Heading size is definitely bigger is better – 38 pixels is the average these days when it comes to the font size for headlines. Clearly, to attract mainly headline-reading users, more and more websites have had to resort to boosting the size of their headlines.
Body
The body of your website makes up the most important part of your content—even if fewer people read that than the actual headings and headlines on webpages. The most frequently used serif fonts for body copy are Georgia and Chaparral Pro, almost mirroring the proportions for headings. On the sans-serif front, the most frequently used sans-serif fonts for body copy are Arial and Helvetica. (note: for a clear definition of Serif and San Serif font difference, click here).
Body copy needs to be styled much differently than headlines, so it’s no shock that the typical font size for body copy is considerably smaller. However, one thing holds true, even for body copy: the general trend for the font size is larger than you would expect – aim for 14 and 16 pixels for body copy.
Visual Hierarchy
I often talk to my clients about visual hierarchy on key pages of their website – “what is the primary message or objective of this page?” Once identified, we design graphic elements in ways to tease out that hierarchy. Visual hierarchy is the concept of organizing elements on a page in a way that establishes an order of importance, allowing readers to easily navigate the page and find relevant content. When done correctly, it should guide the reader’s eye throughout different sections of the page. Visual hierarchy is very prevalent in typography, and forms the basis of typographic design theory.
Visual hierarchy can be broken down into 5 different parts:
- Size & Weight: Size and weight are the two easiest ways to create visual hierarchy. They easily indicate what is important, and readers’ eyes naturally jump to them. By simply styling those two, a sense of importance is already created.
- Positioning: Positioning is another way to create visual hierarchy. Here, the title and author is above the rest of the text and centered, showing its importance.
- Typeface: Contrasting typefaces can create a distinction between different elements and achieve visual hierarchy.
- Color: Setting important text in a different color is a very easy way to create visual hierarchy. However, only do so sparingly as using color everywhere causes it to lose its distinction.
Gestalt Laws of Typography
Law of Similarity
The Gestalt Law of Similarity states that entities that look similar tend to be grouped together. For example, if all clickable texts are sky-blue, the audience will assume that all textual content that is sky-blue is clickable. In typography, the law of similarity just means to keep your styles consistent on elements that serve the same function. Group of elements should also look similar to other groups that serve the same function, for example: the visual styles of one blog post should look similar to another blog post. On the other hand, elements with a different function should not look similar to one another.
Law of Proximity
To master the positioning of elements, it is crucial to understand the Gestalt Law of Proximity. The Law of Proximity states that humans perceive objects that are closer together as related objects. And vice versa, objects that are farther apart are perceived as different groups. In typographic design, “proximity” refers to the amount of whitespace created by line height, margin, and padding. There should be a distinctive and noticeable amount of additional whitespace between two different sections. Note that the Law of Proximity does not mean that you should squeeze related content in a small container. No, free flowing whitespace is important too. Simply add noticeable, additional whitespace between two separate sections.
Choosing Fonts
Choosing fonts is a creative and emotional process. Different fonts convey different feelings, and you want a font that complements the tone of your text. We start by finding a good font for body text. When combining multiple fonts, it’s important to keep your body font constant, and try to find other fonts that go well with it
Here are some fun tools to help experiment:
