7 do’s and dont’s using text in a blog or website

Readability has two definitions:

One is about the text itself. Is the meaning of the words clear? Does the style support that meaning?
The other definition is about the design. Can you read the text? Is it easy to read the text?

The guidelines for text on a screen are not that different from the guidelines for text in any use. Whether it is on a screen or on paper, on a truck or on the facade of an office, always ask yourself: “Can people read this in an easy and clear way?”

#1 Well designed letter fonts

serif sans serif fontDo:

Choose a letter that is properly drawn and has a clear appearance on the screen. Fonts that are optimized for display on screen are for instance Tahoma, Verdana, Georgia. The difference between Tahoma and Verdana with Georgia is that the first two are sans serif letters and the Georgia is a letter with serifs.

Do not:

Don’t use script letters like Comic Sans for a business text. No one will take your text seriously. When I get an invoice in the Comic Sans (and you wouldn’t believe it, but I really do) my first thought always is “Did I buy something in a toy store?”
Use a script letter for articles about illustration or comic books. And use them sparingly. Read my article about manuals!

#2 Know what you are doing if you modify fonts


For printed text a serif letter generally is recommended because the serifs guide the reader more smoothly. For fonts on screen recommendations are not that clear. The tests found on the internet are usually instigated by Microsoft, who is the editor of the Verdana. And the tests show that you can best use the Verdana. Duh.

text in a blog or websiteNo matter what font you choose it is advisable to use the “normal” version of a letter. It is called “normal” for a reason! For parts of the text that need more attention, such as headings or quotes, you can take the bold or italic version.

Do not:

Modified letters are more difficult to read. The extended, condensed, black or light versions are hard to read in the drawn version, but even more so if they are digitally edited. You can be sure to give your readers a headache if you do.

#3 Choose the right size of the font


You as an author have no control over the way the viewer sees your text on a screen. The viewer can adjust the size whenever they want. Yet it is wise to choose a letter that is not too large or too small. A good size is 12 or 13 points. Do take in account that a PC-screen shows letters in a bigger size that an Apple-user will see them.

Do not:

Some programs give the choices: x-small – small – medium – large and xlarge. I strongly advice against the use of x-small.

#4 Justified text is old fashioned

justified textDo:

Left-aligned text provides a quiet image with equal word spacing. Text is readable well if the overall impression is a plain ‘gray’, without darker or lighter concentrations.

Do not:

The technique of lead typesetting required justified text. Those days are long gone, but still a lot of people hang on to justified text. The main disadvantage of block text is the appearance of “ditches”, which make reading very tiring for your eyes.

#5 What do you want to emphasize?


Distinguish between the different parts of a text in a clear way. A heading in a larger size, or an intro in bold or italic for instance.

Do not:

If you want to scream, then PUT YOUR TEXT IN CAPITALS. Capitals or uppercase make reading difficult, so limit the use.

#6 Increase the line space

[bol_product_links block_id=”bol_591af6681a19f_selected-products” products=”9200000011556075″ name=”typographyCC” sub_id=”” link_color=”003399″ subtitle_color=”000000″ pricetype_color=”000000″ price_color=”CC3300″ deliverytime_color=”009900″ background_color=”FFFFFF” border_color=”D2D2D2″ width=”250″ cols=”1″ show_bol_logo=”0″ show_price=”1″ show_rating=”0″ show_deliverytime=”0″ link_target=”1″ image_size=”1″ admin_preview=”1″]


It is better to increase the line spacing. 120% to 150% let the characters come out better and keep the lines of text clearer.

Do not:

It’s never good to exaggerate. A too tight spaced text will color the text an even gray, but makes it difficult for the reader to find the beginning of the next line. A too large spacing provides too little coherence in the text.

#7 Beware of the column width


Set columns at a sufficient distance from each other. For the width of a column 10 to 15 words per line is a good thumb of rule.

Do not:

Don’t turn your blog or web site into a tennis match. There are people who have a large screen (mine is 27”), which makes a broad column really annoying to read.

Do you have tips of your own to add? Put them in the commentbox below.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.