When tasked with evaluating your nonprofit’s site design, you may wonder where to start. What are you supposed to be looking at? What is the most important part of your design?
While there are a lot of important elements of your website design, one of the most important is your typography. In fact, some have gone so far as to claim (with some merit) that web design is 95% typography.
Typography is the creation, arrangement and appearance of written information. It’s important because your primary form of communication with your website user is often your written content – your mission statements, your calls to action, your stories etc. Some sites smartly use typography to make their content approachable and easy-to-read, while others scare off potential readers by making it seem complicated or dense.
Your designer will likely spend a good amount of time optimizing your site’s typography to make it easy to read and grab your viewer’s attention. But how can you evaluate if the look and arrangement of your site’s content has been designed to encourage easy and active reading?
Here are a few web typography basics to help guide you.
Clear Header Hierarchy
Header styles dictate the look and feel of the titles and subtitles within your site’s content. Here is an example of a header style hierarchy.
Your heading styles should clearly develop a hierarchy of information and should structure your content to be understood with only a quick scan. This is important because most website users first scan content before deciding what to stop and read.
Your sub-header style should be smaller and less prominent than your top header style. The next level down should be even less prominent. This will help visually show visitors how all of your information fits together.
Make scanning easy for your users by creating heading styles that stand out from the rest of the content and relate to each other in a meaningful way.
Make Sure the Type is Big Enough to Read
Having really great content in type that’s too small to read is an all too common mistake in web design. The most important thing you can do to improve the legibility of your site is to make sure your type is big enough. How big is big enough? That’s a question up for debate, but generally anything smaller than 12 pixels is too small and anything over 16 pixels will be an easy read.
The best test, however, is to just look at it yourself. If you’re having trouble reading some of your type, let your designer or developer know and they can bump up its size.
Petsmart Charities does a great job of making their type large and legible.
Give the Type Some Breathing Room
An important step in making users want to jump into your content is to give them some space to do so. Avoid dense paragraphs of text and super long line lengths. Your designer should also make sure that the individual lines or blocks of text are not bumping up too close against each other. There is nothing like a congested page to make a user click away.
Best Friends Animal Society leaves a lot of white space around and within their blocks of text.
Make Your Links Stand Out
One of the important functions of the text on any webpage is to provide text hyperlinks to other pages or to help you perform specific actions. For the typography of these interactive links you need to have a special link style.
To make these links easy to find, they should look different from their surrounding text. Usually a color shift or an underline will do the trick. Avoid making the link style a different size or font as its surrounding type as this can become distracting to the user and interrupt their reading flow.
Big Brothers Big Sisters has a very clearly defined bright blue link style that is easy to find.
Typography for Your Nonprofit’s Website
These are just a few ways you can optimize the typography on your site. Make sure your websites’ content is easy to see and read. What your organization has to say is important, but your design should highlight it.
Have you come across any sites you thought were particularly easy to read? Or have you been through the process of critiquing the typography on your website? Let me know in the comments.
Image courtesy of Kyle Van Horn