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.

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?

French Script MT

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.

In this article, we will present 10 great minimalist WordPress themes. Minimalistic designs not only look pleasing, but they also provide visitors with short download times. Because these themes use few distracting images, users can really focus on the content itself.

1. Tlight

2. OmegaX

3. The Buffet Framework

4. Karappo Style

5. MagaTheme

6. Zeeb

7. OpenArk Blog

8. Love The Orange

9. WP Framework

10. JS O3 Lite

Do you know any other great minimalist themes? Post them as a comment below!

Through python and perl, it:

• Queries Twitter for tweets about web design
• Processes each tweet and counts up the retweets
• Outputs the most popular retweeted posts in HTML format
• Repeats the whole process every 1 hour

Hopefully, everyone will stay up to date on the latest web design news! If you have some free time on your hands, please take a look at this section and post a comment with feedback. Thank you!

Stock.xchng – This site holds thousands of photos which are accessible after signing up for a free account.  Stock.xchng also includes a fairly large tutorial section which is available without an account.  

Stock Vault – Stock Vault is easy to use and has many useful additions including articles, links, blogs, and tutorials.  Not only that, but it acutally has a decent design.  Cheers to Stock Vault!

DexHaus – The site name is obviously not English (for that matter I have no idea what language it is in) but the rest of the website is.  Albeit the slow load time, DexHaus has a great selection of photography and a cool way of displaying it.  

Kave Wall – This texture site has amazing images and also fits into the category of great organization.  

Light Matter : Even though the site is fairly small, the pictures offered here are of amazing quality and the oddities section has some neat images that may be of interest.  

Morgue File – It might just be me but this site looks remarkably similar to Flickr.  Morgue file offers tons of images but you have to sort through the good and not as good quality.  Don’t bother using the browse by category system; it’s a pain to sort through.  

Free Photos Bank –  This site has a good variety of quality photos.  The selection is not focused solely on nature but offers technology, architecture and other types of images.  

Image Base – This free photo site has an easy download system (right click + save as) and is entirely free.  There are no restrictions other than using the images for unlawful reasons.  It also offers a nice set of nature-themed PowerPoint Templates.  

Pixel Perfect Digital – Although the site may seem daunting at first, once you figure out how to navigate it, you will find a nice selection of pictures.  Their digital art category includes a variety of renderings which make great textures and the site also has a useful links page.  

Free Digital Photos - A great source for free images, this site has high quality picutres.  Two setbacks are that free photos are  only 640(px) x 427(px) and all images used on websites require a link back to http://www.freedigitalphotos.net.

Some other resource sites you might want to look at are DeviantArt and Flickr

Do remember that it doesn’t hurt to take the old Google Image search path if nothing works.  Also, be sure to always read the Terms of Service or face the wrath of copyright infringement.  Best of luck from Lateral Code!

1. #E96AAE on #27AC1F
2. #934638 on #3426FE
3. #18A4C7 on #D97B9C
4. #E8171B on #7387F2
5. #D5ADBB on #09D881
6. #cb8601 on #0ca382
7. #059127 on #acf3e2
8. #3d3591 on #f2d30b
9. #70ad84 on #d5cfdd
10. #4ad952 on #819eac
11. #b85761 on #cadeba
12. #eada8e on #ea4936
13. #3823ba on #a8faa1
14. #b3f29b on #e2b748
15. #7a06fe on #6562fc
16. #a6f035 on #f4c724
17. #4bfd40 on #47dac1
18. #f4c142 on #5eeccf
19. #1780d4 on #e7aef7
20. #2b62e7 on #47f2a0
21. #65bf57 on #d7e4ea
22. #06b4cc on #c441a1
23. #3c1622 on #50bbac
24. #b582a6 on #22557a
25. #166d3b on #e9d00f
26. #9bcd65 on #b131ed
27. #0f7c13 on #5ddae2
28. #3980a4 on #4dcd5c
29. #8f3c36 on #8259d0
30. #a367ff on #cd7875

Post a comment with combinations you dislike!

I’d never actually met these people before I got to work, and it turned out they were a bit advanced in their years, and their eyes weren’t what they used to be. Even though I’m nearsighted, I can see pretty well in low contrasts, so I didn’t take this into consideration.

Further complicating this problem is that colors my laptop look different from colors on most other monitors.

I had used a background of #8CCCFA, a light blue color, with #FFFFFF, full white text. This is what it looks like:

This is #FFFFFF on #8CCCFA.

Can you see the text? Yes? Go ahead and turn down the contrast on your monitor. Once you get down to maybe 50% of what you had before, can you still see it? Probably not.

This got me thinking. I’ve seen some pretty bad color choices in the past, some that should just be avoided. For example:

This is #0000FF on #FF0000.

This is #FF0000 on #00FF00.

This is #FFFFFF on #FFEF73.

This is #F53792 on #10BEAC.

Human eyes are used to dark colors on light backgrounds, or vice versa. However, pure white on pure black can get infuriating to read, especially in low light conditions. The point then is to try to find a happy medium – perhaps white on a very dark gray. Try it, you might be surprised:

This is #FFFFFF on #000000.

And this is #FFFFFF on #111111.

It may not look like much now, but let’s say you’re staring at a long article. Would you rather read the one at 100% contrast or the one at 93.3%? Try it out. Take a look at #FFFFFF on #000000 and at #FFFFFF on #111111. Imagine if you were reading that for extended amounts of time. Which one would you pick then? Remember that subtle differences in design can have a large impact.

There’s a site I discovered recently, called Color Scheme Designer, that gives you random color schemes. Best of all, it lets you preview what it would look like in a light design and in a dark design.

Another problem is colorblind visitors. What may look like good contrast to you may be completely unreadable by colorblinds. For example, the color combos shown above can look pretty different between you and a colorblind. Take a look:

Comparison of normal vs. Protan colorblindness

Test what your site looks like to different kinds of colorblind people using the Colorblind Web Page Filter.

Pay close attention to colors when you launch a site. If your people can’t read your content, they won’t stay. When you pick a color scheme, make sure all your text is easily readable.