January 16, 2012

Text display in blogs and websites matters a lot!

One of the many things that we observe during our detailed blog-reviews is poor display of text. We have come across many more such blogs - and websites - during Indian blogosphere surveys that we conduct for updating the Directory of Best Indian Blogs and blog-rankings. So this post specifically on display of text on websites and blogs.

When you start a blog or a website and when you tweak it, text display probably comes the last in your list of priorities. If you have a blog on Blogger or Wordpress platform, you might think that the default text scheme suits your blog and playing with it will only make it less appealing. After all, these big blogging platforms spend a lot of time and energy in creating the best in the industry. And when you think that your blog needs some change, you tend to choose from the numerous ready-made templates available on the web. When you engage a web-designer to make a website for you, you discuss background, layout, images, columns, logo, content positioning and so on but feel that the text suggested by the designer [often unmindfully and sometimes to impress you] is fine and no discussion is required on text aspects. Many superbly-crafted websites too suffer from this disregard for text – the building brick of a webpage.

Appeal and functionality should go together

Like all other elements of display, a website must have appealing text. Appeal does not mean too flowery a font or too much variation in size and color [colour]. What it means is that the text should look normal and pleasing. It should not put off the reader by its gaudiness and difficulty in reading. Real ‘beauty’ of text lies in not inviting attention but doing its job beautifully.

We always advise bloggers and web designers to care for the functionality of all site elements, and text is no exception. Functionality, like visual appeal, depends upon many factors. The two are also very closely related.

The quality of text display depends a lot on text color, but since we’d not be able to do justice with all aspects of text display in a single post, we’ve another post on the importance of color on blogs and websites.

Text characteristics

Font is one of the most important aspects to look at. Fonts with stylish curves, embellishments, quirky shapes, ligature, etc may look artistic but they are often less readable than simple fonts such as Arial. Too slanting a font too is not good for a website. There is another problem associated with unusual fonts: they do not render well. So, the text may not look the same as it looks on your computer and a particular browser. In some fonts, alphabets with similar shapes mix up [e.g. c and e; e and o; u and v; 3 and 8].

Text size is equally important. We have seen may websites that have good content but very small text. What purpose does the content serve if people find it difficult to read it? If your site has a lot of matter to read, do have text of 11-12 point, no less. If you need to use slanted, short or italicized text in big blocks, do raise the text size to make it properly readable.

You need to choose the size of the text of the title with care. In a few blogs that we reviewed in detail, we found an inconspicuous title, followed by bold description and huge post-headings. On the other hand, some blogs had stuffed so big text in the title that it hung down half the screen.

Text shape and size also impact navigation. Consider this especially in the case of sub-titles / post headings / widget titles. Maintain uniformity of text [and accompanying bullet] for similar elements.
right font helps readability of blogs and websites
Choose the right font.

Choose the hyper-linked text with care. The text should always make sense to the viewer and should also have direct relevance with the subject of the link. We have given below an incorrect and a correct way to place links:

incorrect: This website contains the best blogs on India and by Indians and you can reach there by clicking here.
correct: This website contains the best blogs on India and by Indians.

Some text should mandatorily have hyper-link. For example, the title text. People use it to navigate to the home page from other pages. Similarly, the post heading. Widget heads in many cases need to be hyper-linked. All external links such as web-pages in the main content and blog-roll should be hyper-linked. When you break a long post with ‘jump break’, do have an expression such as ‘Read more’ and it should expand the post when clicked [as in the case of this very post].

Do not write big chunks in italics, CAPS or slanting text. Unless it is your style, do capitalize the first letter of sentences and proper names [In the exceptional case, it needs to be uniform].

Text variation is important always and more so when your post turns big. It can be brought about by varying color, size, boldness, italicization etc.

Use a different color / bold text / italics for highlighting a point. Use quotes, line-break and italics to make direct speech distinct from narration.

Enhancing readability

For a good reading experience, it is also necessary that the text column is neither too narrow or too wide. The text column should have no less than 30 character width, for proper flow. However, there are other distracting elements on its side, and therefore try to keep the main reading column much wider than this minimum. In general, keep the main column of the website at least twice as wide as sidebars.

Paragraph size is also closely related with text display and readability. On the web, paragraphs should be short [usually under 7-8 lines] and clearly separated. If the separation is not clear, you should increase line space between paragraphs.

If paragraphs look mixed up, make the first letter of paragraphs bigger and bolder and in a different color. If you make it too big, be warned that its line will have higher height than others, and this might look odd.

Avoid ‘justified’ text. Usually keep it left aligned. Do not break words unless necessary. Do not right-align text except for special effect. [We are not talking of Arabic and other such languages.] Do not centrally-align text except for special effect or for poetry. Unless there is a compelling reason, do not animate text.

Have sub-titles wherever possible. They should, of course, not look out-of-place and labored. Use a different font / text size / color for sub-titles and make them bold.

Take care of line height if you are using an unconventional text. Lines should not be too close or too distant. Overall too, the text should look properly spaced. Too scanty and too loosely placed text looks as irritating as a large chunk of text without breaks. Avoid having single-sentence paras in a row.

We strongly advise breaking text monotony with photographs and sketches. [Do visit ITB series on images in blogs.] Image size, alignment and captioning should be such that the image enhances the quality of text content and does not mar readability. Take care that (i) the image does not leave a very thin column for text, (ii) the image is not centrally-aligned with text on two sides [This leads to many types of problems in reading.], (iii) there is enough - just enough - space around the image, and (iv) the caption does not merge with other text.

Unless you have a strong reason to do so [e.g. accessibility / photo-blog with bright images], use black-text-on-white-background and not the other way round. Similarly, avoid light text over light background / images and dark text over dark background / images, especially when they are of similar or un-matching colors. Even if you like white-on-black-background text style - and it is supposed to be less stressful to the eye - it will show up its limitation when you highlight text in a different color or when a hyperlink changes color on clicking.

Some website designers and bloggers tend to use light text display that they perhaps find trendy, e.g. light grey text on white background or mid-dark blue on light blue background. This type of display might look soothing but before applying such themes, you should ask yourself whether the text is adequately readable. [Do also consider that not all monitor screens are set at the same brightness, and web-page rendition on all computers / other devices / browsers may not be the same.]

When embedding text in images

In case of blog titles and description, try to avoid embedding text into an image because changing the text in future would involve re-processing the image itself.

Avoid putting text in the background image of the website / blog; it has the potential to badly impair readability of the site.

If you must put text in an image, do it with care. Since text embedded in images tends to smudge, you should take extra care of font, text-size and contrast. Re-sizing of text inside images plays havoc with it. So, if you want to put a 1000x100 px image behind the title, with text embedded in it, do image re-sizing, cropping etc to bring the image to this size before putting text into the image.

Copy-pasting text from word processors

If you copy-paste text from a word processor such as MS Word, do take care that the hidden and visible special attributes do not create a mess when the text is pasted in the html page of the website / blog. As we advised earlier on ITB along with other tips on blogging, remove special attributes before doing the paste, by first pasting the text into a text editor or email composer.

Care to look at the Indian Top Blogs post on  importance of text color for blogs and websites?