OK, so maybe it’s not that sexy. But it’s more important than you might think, and it can definitely make your content more appealing.
In fact, formatting your content can be just as important as the substance of your content. It’s something that generally only comes to mind as an afterthought, but the format of your content can have a significant impact on how well people read, respond, and retain what you have to say.
Want to make your formatting sexier? Your readers will thank you.
It’s All About Usability
We’ve all heard by now that we should never write in ALL CAPS beyond a few words at a time for emphasis. It’s considered “shouting” and a breach of netiquette, and writing in all upper-case letters is also terrible from a usability standpoint.
Writing solely in upper-case reduces the reader’s speed by thirteen percent (13%), because the reader has to take time to distinguish the different characters and then combine them into a word. Further, because all the letters are larger, each letter also takes a fraction longer to see.
Just like letter case impacts reading speed, so does the way you format your text. Text formatting also has an effect on how much of your information the reader will retain after finishing your content.
Formatting includes font type, size, and spacing. Let’s take a look at each.
What Font Type Should I Use?
The answer to this question is subjective and to a large degree depends on your website design, industry standards, and ultimately the type of content you are presenting. In many presentation formats the content portion of your presentation (the “story”), should be in serif fonts such as Times New Roman, while your attention and guidepost information (such as titles, subtitles, captions, etc.) should be in a sans serif font like Arial.
What Font Size Should I Use?
In general you should not use anything smaller than a 12-point font, and should allow readers to manually increase the size of a page’s text. The reason for this is because different operating systems display text at different resolution so no matter what size you choose, it will difficult to enforce it so that everyone sees the text in the same way. According to studies, 12-point Times New Roman and 10-point Arial result in the fastest reading speeds, while both fonts in 12-point result in the most legible text and best overall reading experience for the audience.
What Font Spacing Should I Use?
The spacing you use should vary depending on the letter case you are using as well as the alignment you use for your paragraphs. As I mentioned before, when you type in all upper-case it becomes substantially harder to read because all letters start looking alike. To alleviate this (if you must use all caps), you can increase the spacing between the letters of the word.
Make Your Content Sexy
It’s surprising how many people fail to recognize the importance of formatting as a component of good copywriting and content presentation. You painstakingly format your resume when looking for a job, or a dissertation for your professors before you present, right?
So why not bring sexy back to your online content?
Reader Comments (38)
Those are some good tips. I wish some of those bloggers who use tiny text would read this article (or any other article about text formatting!) because I’m sick of clicking command +.
Best. picture. ever.
The article was OK too 🙂
NEVER use Times New Roman on the Web. It’s not optimized for screen reading, use Georgia instead.
Julian, I agree. Georgia rocks–I use it for online sales pages all the time.
I was going to say the same. I think it’s best to stay away from serif fonts for your main copy.
One thing I notice about the study is that it’s over seven years old. It should be somewhat timeless in that people still read the same way they always have, but still I wonder if there aren’t more recent studies.
I tend not to trust things that refer to font sized online in terms of pts.
Still a good article and the main points are certainly valid.
Absolutely love the picture. And Nothing says sexy like text formatting. 🙂
Have an awesome day!
Dan & Jennifer
I think Ray Charles actually looked at that graphic before he wrote his famous song.
Definitely a very informative and useful post. I did not know that “According to studies, 12-point Times New Roman and 10-point Arial result in the fastest reading speeds, while both fonts in 12-point result in the most legible text and best overall reading experience for the audience.”. This is very useful especially in this era of sound bytes and corporate endorsed adhd.
I found this which blew my mind when I was able to read it.
Be well and enjoy the day.
Hi Brian,
I’ve actually unsubscribed from some feeds due to their lack of excitement. The written words might be fantastic, and might teach you a lot, but if it doesn’t entice you to read it there’s a problem.
Nice post.
Finally, a community of readers that comprehend what I preach. Formatting matters! I actually get few things that have been formatted unless I’ve done it myself. I thought I was just anal…until now of course.
Personally I use Verdana for body copy and TNR (or a nice serif) for headings.
http://alistapart.com/ has a similar setup that works well.
The usability study referenced is a bit flawed as it only uses Arial and TNR (Arial is popular because of it’s ubiquity, not because it’s the right font for the job).
Brian,
I’m still trying to figure out exactly how you do it, but your blog is one of the easiest to read (as well it should be!). You offer a great example of how to write for the Web. Maybe you would consider writing about best practices for writing specifically for the Web?
For me, it would be valuable to read your take on how to break up paragraphs and how to add emphasis, to make it absolutely a snap for readers. You alluded to one sentence paragraphs a couple of posts ago, just wondering if you will expand on that. Or maybe you have and I haven’t found it yet? Still digging through the archives… I’ve only been reading for about 3-4 weeks, and I’ve loved everything!
I second or third (to be specific) the use of Georgia instead of Time New Roman. It is definitely optimized for web better.
I have found that formatting the content can actually make a post or break a post. Adding emphasis, caps, and bold to the right words helps skimmers find the key points too. My tip: Write the copy under the assumption that every reader will read your article, but format the key points of your copy for the at-a-glance comprehension of the basics. This will ultimately benefit both the skimmers and the full article readers. It might even entice the skimmers to slow down or take the time to read an article that was well formatted and laid out.
I like the ideas on this page, that is “use the browsers default text size”:
I think that text formatting is crucial either on blog pages or in a document.
When you have to format texts for a web site their formatting and style should correspond with the web site’s text styles. They should be consistent.
Tim, Easy-2-Read standard is a very good idea. I have bookmarked this page.
Regards to all,
William
Also, don’t forget about line-height, which is the distance of the baseline from one line of text to the next below it. An optimal distance to improve readability would be 150%-175% of the font size.
I haven’t put in nearly enough time thinking about my presentation. Thanks for the tips.
Good article, it’s all about the presentation! A good layout makes your text scannable, so you help the reader. But on the web different rules apply for serif and sans serif fonts.
Last year I studied usability design. In that course they mentioned a couple of times that on the web sans serif fonts are easier and faster to read than the serif fonts. That is because the serif fonts should guide your eyes to the next word, but the resolution of pixels isn’t good enough.
You can read also this blog article :
http://www.bloggingads.com/blog/2007/06/20-things-to-remember-for-good-webblog.asp
Nice tips
Especially for newbies like me
Regards
Pierrot
Besides the combination you suggested for title and text fonts, you can also do the contrary and use a serif font (like times new roman) for the title and a sans serif for the text.
Also, while using black backgrounds it is easier to read a sans serif fonts, just like you have the “submit comment” button underneath the comment box. A strong serif font is also a choice, that is, as long as it is strong.
When you mentioned “increase the spacing between the letters of the word”, did you mean kerning adjustments?
Nice article, you should talk about color next 🙂
This was a good article overall but it misses some key points. As mentioned above, Times New Roman is not a good typeface to use on the web. Sans-serif fonts usually work better, although Georgia is a good choice if you want to go with a serif.
Line-height (or leading, for the typography purists out there) is another important part of good typography. This should be proportional to your font size. Also pay attention to the spacing around paragraphs, headers, and lists. One of my biggest pet peeves is when people remove spacing around paragraphs and they all blend into one blob of text.
There have been some great articles recently about setting type to a grid:
http://24ways.org/2006/compose-to-a-vertical-rhythm
http://alistapart.com/articles/settingtypeontheweb
These techniques will optimize readibility according to established typographic principles.
I’m so glad that someone is reminding people to make text able to be manually resized. I’ve visited too many websites that use the tiniest font imaginable, and set it so that the user can’t manually enlarge it. I use a fairly high screen resolution, so everything looks smaller as it is–I don’t want to have to deal with 2-point font! If I can’t enlarge it, I’m moving along and they’ve just lost a reader/sale/prospect/etc.
What if you are using ems or percentages for font size instead of PT?
Arial, Verdana, Tahoma for readability and skimability. Times New Roman for Styling Headline. I found this formatting have been done well by the theme creator, except you are creating your own website instead of using blog engine such as WordPress or BLogger, You will need to consider to understand this post carefully! 🙂
Great Post! Stumbled! 🙂
it seems that Times has well, blinded everyone. We cannot really see it anymore. This is why great fonts like Adobe Garamound Pro and Adobe Caslon Pro are great for reading for a exteneded amount of time.
As far as point size goes, 10 point is sworn by designers and I am hit over the head when even thinking about 12 point.
But, for an older audience, for the boomers, 12 is great.
Awesome post, btw.
Funny how font topics seem to have conversations like politics.
I prefer to publish and read a san-serif font for the majority of my web based content. (Large titles may be the exception)
I find that even the ‘older style’ typewriter fonts like Courier are better for my personal readability than the curlier serif fonts, purely based on the increased amount of space between the text/fonts verticals.
It may be poignant to mention that a ‘glasses wearing geek’ needs the same font size as the ‘oldies’ mentioned earlier.
12pt+ with plenty of white space makes it so much easier for me to digest the content.
websitePROFITS: Profit Boosting Tips in 37 words or less!
This article's comments are closed.