Working with type is a centuries old discipline, and typography is a huge field. Technological changes, especially over the past 30 years, have revolutionised the field and created a new subdiscipline of digital typography. With digital typography came a whole host of new rules, options, and styles – but don’t let the amount of information intimidate you. The good news is that, regardless of the variety of typefaces, a few design tips cover most of what you’ll need to create documents that look great on the web.
The first question to ask yourself when working with typography is: what is your goal for the content you are creating? Do you want to provide straightforward information? Are you trying to influence people to take action? Or persuade them of your ideas? Understanding the impact you want to have on readers will influence your typography decisions. Knowing your intent and incorporating the following tips can help you create a site your readers will appreciate.
The first priority for web typography is making sure your message gets across. A few of the most important guidelines to improve the readability of your page include:
- Size and spacing
For web documents, a point size between 15 and 25 pixels is ideal for basic text. Line spacing should be around 120% of the point size. The length of each line should be between 45 and 90 characters. These elements can specified in a CSS document, but need to be adjustable for mobile layouts.
Choose a font that looks good when scaled small. Many users will be looking at their smartphone, so you need a typeface that can translate well to a limited screen size. Often, designers complain that Helvetica is overused on the web, but this is in part because it is very versatile and looks good in a wide range of sizes.
Colour has a big impact on readability. When choosing text colours that fit in with your overall design scheme, make sure that you have enough contrast between your text and the background. Not surprisingly, black text on a white or pale background is considered the most readable.
Of course colour also has an impact on design. For instance, red is usually associated with emotions, while cooler colours such as blues and greens denote calm feelings. Just be careful that your colour choices do not negatively impact overall readability.
Serif vs. sans serif fonts
Serif typefaces have decorative flourishes on the ends of many letters and are considered easier to read. They are also thought of as more conservative, which may or may not be appropriate to your project. Example fonts include Times New Roman, Courier, and Garamond.
Sans serif fonts lack the decorative serifs; they are considered more modern and minimalistic. Though they have a cleaner appearance, some users find them more difficult to read. Despite this, if you are creating a contemporary layout, sans serif fonts will almost always be your choice. Example fonts include Arial and Helvetica.
Most well designed websites use two fonts, one for headlines and one for everything else. Introducing more than two fonts on a page creates the danger of your site looking too busy or amateurish. So how to choose just two fonts? The best way, until you’ve designed enough pages to get a feel for your personal style, is to just compare a bunch side by side and see what looks good. They don’t have to be too similar, and they don’t even have to be two serif or two sans serif fonts together. The goal is to find two typefaces that complement each other and fit your overall design intent.
As a final reminder, determining your intent is the most crucial part of a successful design. When creating a document, if you are having trouble deciding between different fonts, layouts, or designs, think about your purpose for the page. For example, if you are trying to convey information, what looks the prettiest may not always be your best choice. A more utilitarian design that makes the meaning clearer would be the way to go in this situation. Good typography reinforces the message of the text and helps you convey your meaning more effectively.