How do you evaluate a website for good typography? Is it simply the colors? The font? The size? There’s a lot more that goes into type design for the web. Let’s look at a few components that make up a typographically dynamic webpage using relayforlife.org.
Let’s start with the font-family. This page consistently uses a sans-serif typeface at various sizes and in different colors to differentiate between content while still creating a cohesive look. This use of size and color are what establish the hierarchy of the page, with the headings either purple or blue and in a larger point size than the gray text of the paragraph content.
The text is left justified, which is common and easiest to read, and the line spacing varies based on the font size to make sure everything is legible and doesn’t run together. The page uses appropriate font sizes throughout with nothing too large or too small. Everything, including the footer, is legible.
An appropriate amount of whitespace is used between information so that the content does not run together and sections are separated. There are also purple borders on the left and right of the page, centering the information on the screen and balancing the page so you aren’t overwhelmed with content displaying across the entire browser window.
The contrast is where this webpage can lose a few points, depending on who is reading it. There is enough contrast for me to be able to read it. However, I don’t know how easy the gray on white or the gray on gray content would be to read if someone is more visually impaired. It might be okay, it might not…I can’t be positive.
All of these elements-font-family, font-size, color, hierarchy, line-spacing, alignment, contrast, whitespace, etc.-make up the websites overall readability, or how easily the content can be read and understood. Overall, the Relay webpage is easy to read and grasp. The first thing on the home page that catches your eye is the scrolling banner of images with the slightly transparent text box anchored to it. All of the text on the page is legible and separated into its own logical section.
So what grade does this page earn on the typography test? I’d say it deserves a solid A…easily read and understood.