Home Introduction Legibility Readability Visual Appeal Workshop Sources

Typography: Design & "Design"

By Briar Anderson

Typography is the art and technique of arranging text. The goal of good typography is for the text to legible, readable, and visually appealing. It is made up of both usability and aesthetic design considerations that work together to create an overall effective web design.

Typography is a key component of usability and interface design. Writing is the main content on a webpage, so it is crucial that it can be read easily and understood effectively.

Legibility

To make text legible, it must be clear enough to read. There are many factors to take into account when it comes to legibility:
  • Size
  • Contrast
  • Clear typeface
  • Spacing

READ
Legibility
Use Legible Text to Design Your Website

LISTEN
Typography




Size

Perhaps the most important factor of legibility, any text you write must be large and easily seen. 16px is the minimum text size you should stick to. This is the default text size for web design for a reason. 18px is a better place to start, and 20px+ might be necessary if your webpage is text-heavy.

READ
Don't Compose Without Scale



Contrast

Contrast refers to the difference between the text and the background. Good contrast means the text pops on the page instead of disappearing into the background. Dark text on a light background is typically more legible than the reverse. To avoid your text being too glaring, use a more muted dark color instead of black so that it is still clear but not too stark against a light background.


Typeface

Typeface choice can make or break a webpage’s legibility. Legible typefaces are often referred to as “transparent” because they don’t call attention to themselves. They should also have large features that are obvious and easy to recognize. Your typeface should not be too light or too bold. Avoid typefaces with decorations or differing weights in stroke.

READ
It's About Legibility



Spacing

Adjusting the tracking of your text will keep readers from misreading words and letters if they are too close together. Also consider your leading so lines of text aren’t stacked on top of each other. Whitespace or negative space can be utilized to better emphasize your writing; don’t muddy up your pages with extraneous text and graphics, leave some empty room for the eyes to breathe.

READ
Significance of Letter-Spacing For Web Design



Readability

Readability is another aspect of creating user-friendly writing on the web. Readability refers to the complexity of the content as a whole. The guidelines for readable writing are simply to keep it:
  • Simple
  • Short

READ
7 Proven Ways to Improve Website Readability and Boost Conversions
Writing for the Web



Simplicity

Writing should be kept plain to enhance readability. Avoid large, fancy, and hard-to-read words. If it’s kept basic, your writing will be friendly and inclusive for all readers. Target a reading level of 12th-grade, though it might vary depending on your target audience. Simplicity is maintained by keeping written content at or below the audience's formal education level.

Short

Short words, sentences, and paragraphs help keep the user engaged in your writing. Because the typical user scans instead of reads, your information must be able to be taken in at-a-glance.

Visual Appeal

Aesthetic considerations are just as important as usability considerations. Humans are naturally drawn to things that look beautiful, which is why typography is a major factor in your website’s look and feel, and we can consider this without disregarding legibility and readability. We can create visual appeal by addressing:
  • Font choice
  • Font pairings
  • Color

Font choice

Like how font choice affects usability, it also has an affect on the aesthetics of your web design. Typeface can reinforce your message by generating an emotional response based upon what we are looking at. Serif fonts are more traditional in look while sans-serif feels more modern.

READ
Aesthetics & Emotions



Font Pairings

Using different fonts is okay! The general rule of thumb is to use 2 different fonts; one for headings and one for body text. This helps creates contrast and allows words to jump off the page when the fonts differ. Ensure that the fonts are different enough to generate interest, commonly approached by pairing a serif with a sans-serif, or by using variants of the same font family.

WATCH



Color

Color choice was addressed briefly when discussing contrast, but it’s another aspect to having visually appealing text. Your writing should follow the same color scheme used throughout the website to keep your entire design consistent. Varying colors, like fonts, will also help to differentiate blocks of text or headings.

READ
Typography and Color



Workshop

Choose a web interface you have previously created or designed. Make a duplicate of your design and adjust your typography choices considering the above guidelines and resources. Compare and contrast the typography of your interface. If you can, have two people perform a usability test of each. Use the results to perfect your interface's typography.

How does your typography influence usability?

How does your typography influence visual appeal?

How do usability and visual appeal work together to create an effective design?