On the Internet, content is king. Content is what puts you on search engines like Google and Bing. Content is what brings readers to your site. Words, words, and more words structured into coherent, meaningful phrases.
But have you ever stopped and considered how you are presenting your content? What use is your content if you have it set at at 6pt font with no visible paragraphs? No one will read it if you don’t make it readable.
Here are a few tips on improving the presentation of your online content:
#1 – Line Length
Human eyes are conditioned towards reading lines of certain length, of between 40-80 words per line in print, and between 60-100 online. If you ever pick up a textbook or a newspaper, you will notice that they often print in columns. This is because it reduces the number of characters, thus making it easier for the readers to read.
For example, the textbook pictured below limits its columns to approximately fifty characters per line.
When writing shorter text designed to sell something, such as restaurant menu descriptions, don’t write more than a sentence, or you might lose the reader’s attention. By picking a width for your content area that makes reading comfortable, you make it good for your readers, and therefore good for yourself.
#2 – Line Spacing
Equally as important as the length of the line is the height of the line. Just as readers are conditioned to reading lines of certain length, they are also conditioned to reading lines that are reasonably spaced apart. A good line-height for online content should be around 1.25x to 1.75x the font size.
Here are some examples of different line-heights:
line-height: 1
line-height: 1.25
line-height: 1.5
line-height: 1.75
line-height: 2
1x line height is too squished to make reading comfortable, while 2x line height is overkill. Find a happy medium that not only you feel comfortable with, but your friends and family.
#3 – Letter Spacing
One of the most often ignored elements of content styling is letter spacing. While it may not seem like that big of a deal, a small change in letter spacing can make a huge difference in terms of readability and presentation.
Here are some examples of different letter spacings with the Arial font:
letter-spacing: 2px
letter-spacing: 1px
letter-spacing: 0px
letter-spacing: -1px
While the 2px letter spacing makes the words clear and easy to read for one or two lines of text, huge blocks of text at 2px spacing would be annoying and obnoxious. -1px can make a cool stylistic effect, but clumps letters together so tightly that it renders it hard to read.
Pick a letter-spacing that matches the font and the length of the content that you are delivering.
#4 – Font
It is extremely hard to stress enough how important font choice is.
There are a lot of sites on the web that use Comic Sans MS throughout the internet, as the result of the now-defunct GeoCities. While there’s nothing inherently truly bad about Comic Sans MS, there is nothing good about it.
Comic Sans MS looks like a font that a grade-school teacher would use. If your content is geared towards grade-school students, by all means, use Comic Sans MS.
However, if you are going presenting towards a more general audience, you want a more serious and neutral font. Who wants to read a block of text written in French Script MT?
Popular, neutral fonts for web content include Georgia, Arial, Times, and Trebuchet MS.
Another thing to keep in mind is web-safety: certain computers possess certain fonts, so just because you have a font doesn’t mean your readers have them. A good resource for seeing if the font you want to use is web-safe is this list of web-safe fonts. If you really want to use a font that is not web-safe, you can use certain text-replacement methods such as cufón.
Font Size
A key element of the font you use is the font size. If you expect your readers to mostly be a bit older, set your font size a bit higher to improve readability, as most older people have bad eyes. If you are writing for a younger audience, feel free to use a slightly smaller size. However, be reasonable with your font sizes. Fonts that are too large or too small are obnoxious and will drive readers away.
Of course, if your readership comes from a variety of ages, you want to have a more neutral font size to avoid alienating either group. A neutral font size is between 10pt and 14pt.
Another note is that certain fonts look better at different sizes. Sans-serif fonts usually look better at smaller and neutral sizes, while serif fonts usually look better at larger sizes. However, this is not always the case – many sites use Georgia, a serif font, at a slightly smaller font, and it can look great.
Experiment with your fonts and sizes, and always be sure to get a second opinion, especially from someone in a different age group.
Extra Notes
Emphasis on Emphasis
Most people are familiar with italicizing and bolding words for emphasis. In fact, the HTML tags for italicizing and bolding, <em> and <strong>, are short for emphasis and strong emphasis, respectively.
This means that when you want to put some emphasis on a word or phrase in order to catch a reader’s attention, you should italicize using <em>, and when you want to put strong emphasis on a word or phrase to show a key point, you should bold using <strong>.
For example, textbooks often use bolding in order to highlight keywords that students should know and remember.
Keep in mind that you should never bold and italicize something at the same time. This is over-emphasis and overkill. This is the same with capitalization: the only words that should be typed in full caps are acronyms and words that are actually spelled in full caps, such as HTML, JAVA, or ROFLMAO.