The Beginner’s Guide to Web Typography

While people are spending more time than ever on the internet, they likely won’t read more than 20% of a page’s content before moving on to something else.

This trend makes it increasingly difficult to engage users and makes it absolutely essential that they can easily scan the page without having to read through everything to find information relevant to them. Text content that is aesthetically pleasing and clearly structured is more likely to draw readers in and to keep them on the page longer.

Here are a few simple tricks you can implement to achieve this, whether you’re an experienced designer, or just someone looking to improve their site:

1). Keep it Simple

Use fewer fonts

There have never been more options available to designers than today, but the plethora of typefaces out there only makes the job of a designer more difficult. For every well-crafted font in existence, there are 100 free knockoffs claiming to be the same, but lacking the attention to detail, craftsmanship (and legality?) of their authentic counterparts.

When you’re not sure where to go with a project, it can be tempting to search for “inspiration” in the endless depths of free font sites, but in these situations it’s important to remember the words of legendary Italian designer, Massimo Vignelli, who famously used only a few typefaces during his career:

In the new computer age, the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.

While some would argue that this is an overly-restrictive (and even pretentious) design philosophy, the core idea is that successful design comes not from the choice of type, but from the *use *of type. A single typeface is enough to build an entire brand, and in the right hands can have an endlessly broad range of expression.

When we worked with Eugenia Kim to redesign their site, we wanted to highlight their fun, expressive products without letting any design elements get in the way. We kept the number of fonts to a minimum and let the imagery do the talking, which resulted in a beautiful site without any unnecessary flourish. Check out our work for them here.

2). Make it Clear

Create Levels of Hierarchy

One of the biggest indicators of design work done by a beginner is a lack of clear order and importance. Upon first look, it should be immediately clear what is most important on any given page, as well as what is secondary or tertiary information.

There are several tools at your disposal to achieve effective hierarchy, even if you have limited experience with design, that will elevate your work and make it clearer and more impactful. Each of the following qualities can be leveraged to create more contrast between different type styles and help improve readability:

• Font Size: This is perhaps the most obvious way to increase the importance of a title or section. It is easy, however, to go overboard with font sizes. Shifts in size should be used sparingly, and should be obviously different from one another. Making a heading only 2 points larger than the body copy will only make it more confusing for readers.
• __Font Weight: __Some of the worst typographical sins of our generation have been committed using large, bold letters. Bolding your type is basically like drinking – in moderation it can make you more expressive and interesting, but too much and you’re left confused and wondering how you got home last night. Or something like that.
• Line Height: Line height is an attribute most people never think about, but it can be really important if you have large blocks of small text. To make a block feel lighter, you can increase the line height to give the text more breathing room.
• __Measure: __This is another factor that few people consider when setting type. The width of your block of text has a lot to do with how it is read. Very wide blocks of text can work fine for headings, but can exhaust readers if they run on for more than a few lines.
• Letter-spacing: Altering the letter-spacing is not generally a good idea for large blocks of text (especially if you’re a beginner), but with some careful maneuvering you can tighten or loosen the spacing the create additional contrast in short lines of text.
• __Capitalization: __Like letter-spacing, this should generally only be applied to short lines of text, but setting a headline in uppercase or lowercase can make it a bit more stylized and create a more dynamic aesthetic. Be careful combining uppercase letters with heavy font weight, though, as that can come off as pretty aggressive.
• Color: This is the last on the list for a reason – color alone is a poor indicator of hierarchy for a number of reasons. For colorblind folks (like myself), this is a particularly frustrating mistake made by beginner designers. However, in combination with some of the other attributes above, color (even grayscale values) can bring a new level of visual interest to type, while making it more brand specific.

When we designed a site for Clark McDowall, we made use of all of these principles to create a dynamic, type-focused design with very high contrast. Check out our work for them here.

3). Pair With Care

Choose Your Fonts Wisely

In the design world – and even elsewhere – it has become a bit of a sport to ridicule “bad” typefaces (Comic Sans, Papyrus, Arial, etc.) and worship the few “good” typefaces (Helvetica, Futura, Garamond, etc.). The whole conversation has skewed a bit too much into *what *is good, and not *why *is it good. While it is important to equip yourself with the right tools, it is true that any typeface – used correctly, and in the right context – can be used to communicate a message if paired well.

When choosing complementary fonts, there are a few directions you can go:

• Contrasting Styles: As we mentioned above, it is essential that we create clear contrast when setting type. Using a contrasting (yet cohesive) font can make headlines and emphasized text stand out.
• __Similar Styles: __To create a clean, consistent look, you can find fonts that are very similar to avoid breaking the look of a layout.
• __Font Families: __As a continuation of the point above, you can even look at large families of fonts to pair. The fonts within one family of typefaces are designed to go together and will be easy to pair.
• __Historical Authenticity: __If the design application is closely tied to history or region, it can be helpful to do your research and pair fonts that have geographical or historical ties. This can be more subtle and more difficult to achieve, but it can also help build the narrative of a brand and establish its credibility.

For practical examples of these principles, check out this typographic dating game to see some pairings in action.

4). Don’t Lose Focus

Prioritize Readability Over Everything

With all this newfound potential, it can be tempting to over-indulge in our type, and thus lose sight of what we originally set out to do. No matter how many levels of type variation we create, or what cutting-edge fonts we use, the design must be first-and-foremost about readability. If the font size is too small, the line height is too high, or the measure is too wide, readability will suffer and all the time we have put into tweaking the design will have been wasted.

When designing, it’s not always necessary to re-invent the wheel, but it is imperative that the meaning of the content is conveyed clearly, and that ultimately, all the time and effort you’ve put into creating elegant and clear type goes completely unnoticed.

For more information on web typography best practices, check out The Elements of Typographic Style Applied to the Web, which is basically the bible of typography. It’s a bit of a dry read, but it’s a great resource for the more technical aspects of type.

This is the first in a series of typography-related posts we’ll be publishing. Check back soon for more!