Often overlooked for its more exciting design counterparts, typography plays an integral part in creating the tone and overall experience of any successful website. As Oliver Reichenstein so astutely put it, “Web Design is 95% Typography”. So we better pay attention to how to do it well.
The Basics
Typography is the art and science of using type to communicate through language, in clear, legible and visually engaging ways. It involves the intentional selection of font, color, size, spacing, layout, and alignment. It can convey a message quickly and evoke emotion when done well on a website. When not done well, it can make the overall experience messy and hard to engage with.
Serif vs Sans Serif
The two major categories of fonts are serif and sans serif. Serif fonts have serifs, small feet, at the end of the letter stroke. Sans serif fonts do not have these feet. Serif fonts usually convey a feeling of professionalism and tradition. While sans serif fonts carry a feeling of being modern, clean and fresh.
Sans serif fonts have been shown to be easier to read online in body copy, with the opposite is true for print. This is because serifs make it tougher for the eye to follow on a lit screen.
Diving into the Deeper Concepts
Line Height
Line Height refers to the space between the individual lines of text. Having the right line height can make a website’s text more readable and easier to scan. If it’s too close together it can cause the reader to have to squint. If it’s too far apart it will be confusing to look at.
Line Length
Line length is the number of words in a line. A good line length will allow the user’s eyes to move from the end of one line to the beginning of the next with ease.
Color
On a website, the colors are created by light. This means thinking about contrast is even more important than in print, because there’s a higher risk of a user having to strain to read. Dark text on a light background provides the most contrast with the most comfortable reading experience.
Hierarchy
Hierarchy can sound like an obvious concept, but is an easy one to get lost once someone has gotten deep into writing their own content. It is what organizes and defines how to read through content and assigns higher importance to different areas. This plays a huge role in making copy successfully scannable for the reader. In typography hierarchy can be created through size, color, weight and uppercase lettering. In all of these categories it’s important to choose a few intentional variations but not too many, or the organized hierarchy will be lost to chaos.
The Number of Fonts
Using multiple typefaces can aid in creating hierarchy, bringing a unique style and tone to your website, and helping with scannability. However, it can be a thin line between this and too many fonts, which can cause the website to feel unstructured, disorganized and unprofessional. A good rule of thumb is no more than three type families and to use the same ones throughout the site. And a lot of the time one or two families will work just fine. Keep in mind that they should compliment each other. Meaning, that they should flow well with each other on a page, but not so similar that the change in font seems like a mistake.
White Space
White space is a break from content on the page. Simply put, it’s empty space. It doesn’t have to actually be the color white, but it’s a break from content. This is important, especially on content heavy websites, in order to give the user’s eye a break. Otherwise the content can feel like a dense wall, which is not enticing for anyone to jump into. This concept lends itself to the design approach of “less is more”. While people like the idea of white space in theory, once you’re working on your own site it can be easy to want to fill up every space with content. Try to remember that the more concise you are, the more likely someone is going to want to actually read what you have to say!
Conclusion
Most importantly, whatever rules you establish, stick to them. Consistency creates a flow and allows the user to enjoy going through your website, without having to relearn the structure over and over agin. Typography is really important to a website. And when it’s done well, you probably don’t even notice it, because it’s doing its job of guiding you smoothly from one place to the next without making you do all the work.
If you’d like to dive a little deeper into the color side of things, take a look at Morgan’s post on “How Website Design Colors Affect Your Users”.