B2B Marketing Agency for Technology Companies

Making Website Typography Work

Typography decisions with your website is about finding the right typeface, using the right properties & having the right execution.

Comments 0
by Brian Ledebur

In recent years, an explosion has occurred in the number of choices and level of control we have over type on the web. But with so many choices, and so much control, how do we decide how we treat and display type in a design?

This blog is a brief overview on the thought process involved in making decisions on three key areas: choosing the right typeface, giving it the right properties, and finally, following through on those choices with the right execution.

website-typography

The Right Typeface

Successful and effective website typography all starts with choosing the right typeface. This choice alone can make or break a site’s visual design. A number of factors are considered when a typeface is chosen, including:

  1. Style: In other words, does the typeface being considered stylistically fit the mood or personality we wish to convey with our site’s design? Does it fit the personality of the company and the subject matter of the site? Does it match or compliment the company’s brand? Like people, companies have unique personalities, and a successful design should communicate those personality traits.

  2. Readability: Regardless of style, type must be clear and legible at the sizes and weights it will be displayed in. Not all typefaces are designed specifically for the web, and many may look great on a printed page, but fall apart on the screen. Others may be designed for the web at larger sizes, but are not appropriate for body copy. When choosing a typeface, it is important to preview it in a browser using the sizes and weights it will be displayed in on the final design. Viewing the typeface in a graphic program like Photoshop can often be misleading.

  3. Completeness: For body copy in particular, it is important that the typeface being considered includes the appropriate styles and weights needed. At a minimum, it should include bold and italicized versions. In the absence of those, the browser will attempt to “fake it” by slanting or thickening the font, but you don’t want to rely on that (the results are rarely good). Completeness also applies to character sets – ensure that the typeface includes the punctuation and special characters you may need, including those for any additional languages the site will be translated for.

The Right Properties

Once the typeface(s) have been chosen, it’s time to focus on the details. Specifically:

  1. Font size: For body content, a size must be chosen that is readable on a variety of common devices and screen sizes. Many body fonts have an “optimal” size they look best at, and a minimum size that they begin to break down. Finding these numbers are key to setting a baseline font size, and setting a consistent “scale” to set larger and smaller type as needed.

  2. Line height: Line height refers to the space in between multiple lines of content. A good starting point is about 1½ times the size of the font, but that may vary depending on the typeface being used and the horizontal length of a single line. Lines of content that are packed too close together appear squished and become difficult to read, while those too far apart appear disjointed instead of as a single, continuous block.

  3. Line length: As in print, there is an optimal horizontal length of lines of type that maximizes readability. If the lines are too long, it becomes difficult to follow a line of text or continue to the next one. However if they are too short, the content will be broken excessively, making it difficult to comprehend what is being read. The exact length may vary, but a good starting point is around 80 characters.

  4. Color: The use of color is an extensive topic. But the most important thing to ensure is that type in the chosen typeface contrasts adequately with its background and the type surrounding it. When combined with the other attributes above, a headline's color should contrast well and be distinguishable from surrounding content.

  5. Spacing and Rhythm: Generally speaking, vertical rhythm means complementing font sizes and line lengths with appropriate spacing – for example, spacing below headlines or breaks between paragraphs and list items – so each line of text, regardless of size, falls in a consistent, predictable position on the page. A good vertical rhythm can do wonders for readability while giving the site a polished, professional feel.

The Right Execution

No matter how much care is placed into the above considerations, the typography of a site will not be effective without proper and faithful execution. Some factors to consider include:

  1. Consistency: This is by far the most important factor. Once the right typeface and attributes are chosen, we must stick to them when adding content. Similar types of text – whether they be headlines, paragraphs of body content, form field labels, or alert messages – should all be treated the same. Deviations should be carefully planned and judiciously done. Consistent type is vital for readability, cohesion and professionalism.

  2. Quantity: Free from the old constraints of print, you may be tempted to include as much content as you wish. After all, a page can always be made longer or a new one added with relatively little effort. It’s all too common to treat your site as a “repository” of anything and everything. However, for your site's success it is more important than ever to resist this urge. People read less on the web, and they tend to scan more than read. Keep content concise and focused on the overall message and site objectives. Break content into smaller chunks with clear headings and bullet points. Keep large amounts of archived content contained and separated, keeping the main areas devoted to promoting the overall message and generating conversions.

Additional Resources

If you are interested in reading more on the basics of website typography, here are a few places to start:

  1. On Web Typography
  2. A Guide to Web Typography
  3. Web Design 101: How Typography Affects Conversions
  4. Get Started with Web Typography
  5. Understanding Typographic Hierarchy

We believe a conversion-focused website — paired with the proper traffic, content, automation, and end-to-end ROI measurement — equips B2B technology companies with a real asset to scale their business.

18

Years in business

50%

Minimum growth in quality leads our clients see after an engagement

300+

Websites we've created, supported, or consulted over the last decade

 0 

The jargon we speak (we'll approach conversation like a layperson)