The Sexy Side of Online Content: Text Formatting

The Sexy Side of Online Content: Text Formatting

Reader Comments (38)

  1. 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 +.

  2. NEVER use Times New Roman on the Web. It’s not optimized for screen reading, use Georgia instead.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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).

  8. 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!

  9. 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.

  10. 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

  11. 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.

  12. 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

  13. 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 πŸ™‚

  14. 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.

  15. 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.

  16. 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! πŸ™‚

  17. 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.

  18. 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.