Styling Text on Your Website: What the Research Says
I was recently helping a friend build a site for his new podcast when he asked, “How do you make these all caps go away?” I’ve spent enough time in WordPress and with premium themes to know where to go to alter typography—and this quickly became one of those times where the theme did not provide an easy solution for changing the default type settings.
Which is incredibly frustrating.
In addition to the annoyance factor, there was also the confusion as to why a WordPress designer would choose to use all-capped text anywhere within their theme.
While I understand that all caps may have an appropriate time and place, to me, that signifies shouting and also a lack of maturity. All-capped text also makes it difficult to tell if there’s any sarcasm, puns, or some other unexpected emphasis that needs to be placed on a word.
I think that when you use a WordPress theme in your web development work, you might run into similar frustrations. The theme’s designer dictated the default font, styling, sizing, etc.—and it’s not always ideal for the story you want to tell visitors about your brand.
When it comes to web design, you don’t get a second chance with your visitors. The first impression is all that matters, and I’d argue that the aesthetics of the text you use is a big part of that.
That’s why I want to look at a number of potentially questionable text choices in web design and see what the research says about how each affects people’s perception of your site or brand.
5 Questions You Need to Ask Yourself Before Styling Text on Your Site
You never want to leave anything to chance on your site. And when you’re trying to elicit the right emotional response, you’re already treading on thin ice. Friction between your visitors and the site can crop up anywhere, which is why you need to make smart choices for your text.
Just to clarify, I’m not talking about the actual quality of writing. If you want tips on how to create great content that sells, check out our recent series on making money with your blog.
Unlike catering to customers in person, a website prevents you from being able to see your visitors’ faces or hear the inflection in their tone. You just have to assume that there’s nothing unappealing about how the content on your site looks that may prevent visitors from wanting to read further.
Thankfully, WordPress has provided us with editing tools that are easy to use and that come full of formatting and stylization options, so you can gain better control over the appearance of the text on your site. The question now becomes: do you know what kind of styling will go over well with your visitors?
Here are some questions to consider and what the science behind the answers say:
What do different font types convey to visitors about your site?
Most articles about weak font choices and typography tips will tell you the same thing. Don’t overdo it. Use easily readable fonts. And make sure they jive with your brand’s style. But do you know what each type of font actually tells visitors about your site and how they should feel about it?
In a 2006 usability study, they tested a number of situational cases for each of the font types in question. Here is what they found:
- 62% of those surveyed preferred sans serif fonts for website text.
- In general, there isn’t one clear emotion users felt when viewing sans serif fonts nor was it a clear indicator of a brand’s personality.
- These are probably the safest font to use in terms of readability and appealing to a mass audience.
- 67% said they preferred serif fonts for basic website text.
- These fonts typically implied a sense of stability, practicality, and maturity.
- More formal writings would do well with serif fonts.
- 53% liked to see cursive and other decorative fonts used within web graphics.
- Highly stylized fonts often elicit more emotional reactions from readers.
- These fonts could be seen as youthful, creative, casual, and even rebellious.
- Cursive fonts also tend to be more associated with femininity.
- Modern display fonts were the typography of choice for specialized web text; 47% liked to see them in graphics, 44% liked them in header text, and 44% liked modern fonts in ads.
- The association made with these types of fonts wasn’t all too positive as readers indicated that they felt rougher and more assertive than others.
- Modern fonts tend to be more associated with masculinity.
The study also ranked specific fonts based on the “personality” they conveyed. Curious to see how your font choice stacks up? Here you go:
What do all caps actually mean to a modern audience?
This is something I think about often as I’ve been designing memes for years and there’s really no choice as to whether you can use all caps or not. (Which drives me nuts.)
Memes aside, what do readers of the web actually think about them?
In Legibility of Print, Miles Tinker studied the legibility of all-capitals text. Here is a summary of what he found:
All caps is read 9.5% to 19% more slowly than lowercase text during shorter reading periods; 13.9% for periods exceeding 20 minutes.
The reason for this? Well, there are a few:
- Lowercase letters enable people to read by word units whereas capitals cannot (they are understood at the individual letter level), so all caps requires more time to process.
- All caps consumes roughly a third more space, which means it greater attention is needed to get through the full length of a word or body of text than those in lowercase.
- Roughly 90% of people find all-capped text to be harder to read, in general.
Despite the general understanding that all caps are more difficult to read, a number of WordPress themes and web designers continue to use them as default header text. This is because some believe that capital letters imply a greater emphasis. But if you’ve chosen a bold, beautiful font face, won’t it draw in enough attention and speak for itself?
What is the most acceptable way to demonstrate emphasis in web design?
When we talk about emphasizing different elements on a website, we usually talk about things like bright colors for CTAs and framing elements strategically with white space. But how do you properly emphasize important bits of text without overwhelming readers with too much bold, italics, color, and so on?
A report from the Technische Universität Chemnitz makes a number of valid points about styling text for emphasis (ed note: the report is no longer available on their site). Granted, the report focuses on technical writing, but I think most of what they claim here is relevant.
They emphasize three issues that can occur when text emphasis is done incorrectly:
- There’s the issue of overkill. In other words, if your text is littered with various styles, it’ll become too much for visitors to focus on the actual message of the content.
- There’s always the risk of inconsistency—something you have to be careful of, in general, in web design.
- And then there’s the matter of logic. If the wrong words are emphasized, you could be causing unnecessary confusion in the minds of your visitors.
As you can see, the potential for harm in text stylization is really no different than what can happen when poor design choices are made.
Now, back to the original question, what sorts of styles should actually be used to emphasize text, if any? Glendale Community College did a nice, succinct write-up on this (ed note: the post is no longer available on their site). Here is what they suggest:
- Never use the underline. On the web, this indicates a hyperlink (or a broken one, which is much worse).
- Stay away from all caps. See point above.
- Exclamation points can be used, but never in plurals. (I’ll talk about that down below.
- Go light on the italics. Too many words italicized in a row can be too difficult to read.
- Bold is ideally your best choice, though be sure to double-check with your style guide before committing to it.
Should you use sentence case or title case for headers?
Now that we’ve established that all-capped text really isn’t ideal for the header text on your site, let’s talk about how you actually should style your headers since they play such an integral role in SEO and the readability of your content.
There was a discussion in the Designer News community a few years back about this very question. Should header text be:
Written in sentence case?
Written in Title Case
The general consensus here was that neither sentence case nor title case really affected the readability negatively or positively. However, what does need consideration is how you want your text to be read.
Title case—which styles a header with all initial capital letters the way you would a book title—gives off a more formal tone. So, this would be ideal for website or blog content dealing in more professional or serious matters.
Sentence case—which styles a header with an initial capital letter and punctuation at the end—gives off a more casual tone. So, this would be ideal for an article like this one where I’m aiming to have a conversation as opposed to giving a formal step-by-step or how-to.
Basically, let the tone of your content dictate how you style your header text.
Are exclamation points ever acceptable on websites?
I remember a time when an exclamation point was considered taboo in the workplace. I made the mistake of including one in an email a few years back and my boss reprimanded me for coming off as too emotional and informal with our client. So, for me, the question is more about whether or not exclamation points are acceptable in professional or marketing communications.
As texting becomes a more acceptable form of communication with customers and clients, and social media grows into a more powerful marketing medium every day, it makes sense that we’d adopt the rules of those platforms into our professional communications. This is part of the reason why shorter bits of text on websites are so prominent today. People want less talking and more showing.
This is what many argue the exclamation point does. In essence, the exclamation point can give otherwise seemingly boring or uninterested-sounding content more clear emotion.
According to Grammarly, you can use the exclamation point to demonstrate a number of things, too:
- Importance of a point
- Genuine excitement
- An emergency (you’ll see this a lot in super salesy landing pages)
Neil Patel’s blog content is the perfect example of this. He’s one of the most well-known influencers on the web and you’ll often find exclamation points littered throughout his content. This blog post actually has 13 of them, and I bet no one viewed the content to be any less professional than posts without them.
I think the main point to take away from this is that the exclamation point is okay to use on the web so long as 1) your audience finds it an appropriate form of punctuation, 2) it makes sense in the context of the message, and 3) you don’t overdo it. The one thing every source agrees about on this topic is to never double up on them. One will always suffice.
Eventually, your visitors and readers will become familiar with your brand’s personality and style of writing to the point where your choice of font or styling of text won’t matter much. But for those new visitors seeking a positive first impression, what story will your site’s text convey to them?
I think this requires a closer examination of what you actually hope to accomplish with your site and the brand behind it. A better understanding of your brand’s persona and that of your customer will ultimately direct you towards what is the best practice for styling text on your site.Tags: