In our first two installments (Part 1 & Part 2) in the content makeover series, we’ve talked about how important your audience and point of view are to your web content. Refining your message is the critical first step in connecting with your audience, but in a visual world where people have increasingly short attention spans, an essential aspect of the connection is how your message looks. Designing content for the web is just as important as writing it because if a user isn’t engaged by their impression of your content, they will not stop and read it.
When we think about designing content, we need to think about it from both an aesthetic and functional perspective. Aesthetically speaking, your typography is the visual display of your voice. Although selecting a font can seem a simple choice, it can dramatically impact a reader’s perception of your content and your organization. Let’s review our revised About Us paragraph from our first installment:
Why choose ACRONYM?
Every year, 30,000 students turn to COLLEGE NAME for our ability to provide an outstanding college education that's affordable, accessible, practical and personal – an education that is specifically geared toward today's emerging and in-demand careers. But it doesn't end there. Explore the top seven reasons why our highly diverse student body loves ACRONYM.
Now, let’s look at two options for visually displaying this content on a site:
Both paragraphs say exactly the same thing, but before you even read the text, your mind creates a near-instantaneous perception about the institution that posted the content. Although some of the font differences are subtle, option 1 may be perceived as more serious, conservative and rigid. While option 2 might denote playfulness, fun and a more down-to-earth approach. Regardless of which adjectives you associate with each, the choice of typography will clearly convey different tones about your content.
From a functional perspective, your typography is also critical to the overall legibility and readability of your site. Let’s look at the same paragraph again, now styled in the same fonts, but with differences in font-size, letter-spacing, line-spacing and line length. For most of us, one of these paragraphs will be easier to read than the other.
Now imagine how a full page of content would look if it was styled to match Sample 1. The design of the content wouldn’t draw visitors in to want to read more, and likely could turn them away because it wouldn’t be comfortable or easy to read. Sample 2, on the other hand, provides some breathing room and allows the message to come through more clearly.
We would be remiss not to mention the importance of the medium for your message, which, in the case of your website, means desktop versus mobile. One of the enormous benefits of utilizing a responsive design approach to your website is the ability to have your typographic layouts scale to the appropriate environment. On mobile devices, in particular, your content should be sized so that someone can read it without difficulty. This means large enough (but not too large) font sizes and line spacing that supports easier readability. Line-spacing is also important for in-line links which will require enough space for someone to press with their finger without having to zoom in on the content area. However, having too much line-space could break-up the flow of the content, making it difficult for someone to easily read a paragraph without scrolling several times.
With so many design and usability considerations around typography, it should be evident why this is something not be overlooked when thinking about content. However, it is important to note that the most effective typography should ultimately go unnoticed. If your typography is drawing too much attention, it is likely distracting from the content and message. Strong, well-crafted typography will bring your voice and tone to life, engage users in your message and make the experience of exploring your content more enjoyable.