Web Typography
Rules of Thumb

Choosing the right typefaces can be a daunting task for any level of designer, but it doesn't have to be! Use these key guidelines to ease the process.

WebTypRulesOfThumb_Hero.jpg

The art of UX design hinges on striking a delicate balance between visual appeal and practicality. Designers must constantly be aware of this nuance during every step of the creative process and the Siteworx Design team takes this to heart. From color palettes to font choice, every aspect of a website’s design is made to not only be visually arresting, but also intuitively user friendly. In this article, we’ll be focusing on the finer points of web typography – a crucial element since it is present on every page of a website.

While choosing the right typefaces can be a daunting task for any level of designer, the process itself doesn’t need to be. Remembering these key guidelines can help to reduce speed bumps along the way.

Analyze Body Copy First

No matter your typographic decisions, there’s one hard and fast truth: your audience will have to live with your choice of body copy the most. If your design needs to support long-form copy, you’ll need a typeface that is built for on-screen legibility.

Consider Shapes

Think less about “jazzing” up the page and focus on the utility of the typeface. Consider larger counter sizes and x-heights. The distinctive shapes will be easier to digest from varying displays and screen sizes.
X-height

Consider the Content

Make sure to consider the actual content of your project as well. An application, for example, may require an alternative typeface choice if numbers and letters (like the number 1, the uppercase i, and the lower case l) appear to be too similar. Gill Sans is one example that may not be the best choice for digital screens.
Gill Sans

Then, Maintain a Clear Hierarchy

Guiding your audience through your design requires the use of a clear hierarchy. The audience should not feel overwhelmed when absorbing the content, or be left to decipher which information is high versus low priority.

Stick with Two Typefaces or Less

A general rule of thumb is to keep your typeface choices to a minimum, and many designers advocate sticking to just two. If the goal is to add a bit more personality to the page while also creating a distinct hierarchy between headlines and body copy, the body copy typeface should be different from the display typeface. Consider the content and audience of the page, and ensure that the personality you’re injecting into the design compliments the function.

Similar yet Different

When pairing typefaces, it’s important to look for harmony in the forms, but also maintain a level of contrast that keeps the hierarchy of the content intact. The level of contrast, however, is up to the design. Many typefaces have a Sans and Serif version that can be paired together for a safe bet.
PT Sans
Selecting two typefaces with higher contrast can increase the impact of the display text. The style of sans-serif versus serif is an obvious point of contrast, but other elements include differences in size, weight, form, and even color. Keeping certain aspects the same between the two typefaces—such as kerning and overall form proportions—will help to maintain visual harmony.

Merriweather
In the end, every design is different. While these tips aren’t hard and fast rules, they are a great starting point when deciding between typeface choices. Have fun, be adventurous, and most of all, scour the web for inspiration!

Resources

I learned many of these tips and tricks from these classes. Check them out!

GET IN TOUCH

Send us a note. Drop by. Or give us a call. We would love to hear from you.

Say hello.
Send us a note.
We park here, but work globally.
11480 Commerce Park Drive, Fifth Floor, Reston, VA 20191
  • Chicago
  • DC
  • NYC
  • Raleigh
  • Rochester
Ring. Ring.
1.844.256.0329