When it comes to web design, you don\u2019t get a second chance with your visitors. The first impression is all that matters, and I\u2019d argue that the aesthetics of the text you use is a big part of that.<\/p>\n
That\u2019s 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\u2019s perception of your site or brand.<\/p>\n
5 Questions You Need to Ask Yourself Before Styling Text on Your Site<\/h2>\n
You never want to leave anything to chance on your site. And when you\u2019re trying to elicit the right emotional response, you\u2019re 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.<\/p>\n
Just to clarify, I\u2019m not talking about the actual quality<\/em> 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<\/a>.<\/p>\n Unlike catering to customers in person, a website prevents you from being able to see your visitors\u2019 faces or hear the inflection in their tone. You just have to assume that there\u2019s nothing unappealing about how the content on your site looks that may prevent visitors from wanting to read further.<\/p>\n 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?<\/p>\n Here are some questions to consider and what the science behind the answers say:<\/p>\n Most articles about weak font choices<\/a> and typography tips<\/a> will tell you the same thing. Don\u2019t overdo it. Use easily readable fonts. And make sure they jive with your brand\u2019s style. But do you know what each type of font actually tells visitors about your site and how they should feel about it?<\/p>\n In a 2006 usability study<\/a>, they tested a number of situational cases for each of the font types in question. Here is what they found:<\/p>\n The study also ranked specific fonts based on the \u201cpersonality\u201d they conveyed. Curious to see how your font choice stacks up? Here you go:<\/p>\n This is something I think about often as I\u2019ve been designing memes<\/a> for years and there\u2019s really no choice as to whether you can use all caps or not. (Which drives me nuts.)<\/p>\n Memes aside, what do readers of the web actually think about them?<\/p>\n In Legibility of Print<\/a><\/em>, Miles Tinker studied the legibility of all-capitals text. Here is a summary of what he found:<\/p>\n All caps is read 9.5% to 19% more slowly than lowercase text during shorter reading periods; 13.9% for periods exceeding 20 minutes.<\/p>\n The reason for this? Well, there are a few:<\/p>\n 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\u2019ve chosen a bold, beautiful font face, won\u2019t it draw in enough attention and speak for itself?<\/p>\n When we talk about emphasizing different elements on a website, we usually talk about things like bright colors for CTAs<\/a> 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?<\/p>\n A report from the Technische Universit\u00e4t Chemnitz<\/a> makes a number of valid points about styling text for emphasis (ed note: the report is no longer available on their site)<\/em>. Granted, the report focuses on technical writing, but I think most of what they claim here is relevant.<\/p>\n They emphasize three issues that can occur when text emphasis is done incorrectly:<\/p>\n 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.<\/p>\n Now, back to the original question, what sorts of styles should actually be used to emphasize text, if any? Glendale Community College<\/a> did a nice, succinct write-up on this (ed note: the post is no longer available on their site)<\/em>. Here is what they suggest:<\/p>\n Now that we\u2019ve established that all-capped text really isn\u2019t ideal for the header text on your site, let\u2019s talk about how you actually should style your headers since they play such an integral role in SEO<\/a> and the readability of your content.<\/p>\n There was a discussion in the Designer News community<\/a> a few years back about this very question. Should header text be:<\/p>\n Written in sentence case?<\/b><\/p>\n or<\/p>\n Written in Title Case<\/b><\/p>\n 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.<\/p>\n Title case\u2014which styles a header with all initial capital letters the way you would a book title\u2014gives off a more formal tone. So, this would be ideal for website or blog content dealing in more professional or serious matters.<\/p>\n Sentence case\u2014which styles a header with an initial capital letter and punctuation at the end\u2014gives off a more casual tone. So, this would be ideal for an article like this one where I\u2019m aiming to have a conversation as opposed to giving a formal step-by-step or how-to.<\/p>\n Basically, let the tone of your content dictate how you style your header text.<\/p>\n 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.<\/p>\n 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\u2019d 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.<\/p>\n 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.<\/p>\n According to Grammarly<\/a>, you can use the exclamation point to demonstrate a number of things, too:<\/p>\nWhat do different font types convey to visitors about your site?<\/h3>\n
Sans Serif<\/h4>\n
\n
Serif<\/h4>\n
\n
Cursive<\/h4>\n
\n
Modern<\/h4>\n
\n
![\"Styling](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/Text-Styling-Top-3-fonts.png\")
What do all caps actually mean to a modern audience?<\/h3>\n
![\"Styling](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/Text-Styling-All-Caps-Yelling.gif\")
\n
What is the most acceptable way to demonstrate emphasis in web design?<\/h3>\n
\n
![\"Styling](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/Text-Styling-Too-much-emphasis.png\")
\n
Should you use sentence case or title case for headers?<\/h3>\n
![\"Styling](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/Text-Styling-Sentence-vs-Title-Case.png\")
Are exclamation points ever acceptable on websites?<\/h3>\n
![\"Styling](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/Text-Styling-Neil-Patel-Exclamation-Points.png\")