In contrast of your website’s text.

If you’ve been surfing the web lately then you’ve probably seen a new trend in font treatments. We are now seeing fonts being used aside from Arial (which isn’t horrible) but using other fonts to seperate headlines or important information away from the rest of the content. I love the fact that designers have turned the web into another medium for practicing their typograpy skills. If not using different text, you’ve surely seen the colors used on websites change. We’re using more pastels, softer colors, more colors, and applying talents as artists/designers to the web.

Recently, I ran into a page that was stating that there are some designers that haven’t heard of contrast. (The difference in tonal values between light and dark.) It’s brought up that the new trend of using a softer black on websites for their content is an annoyance, and then they bring up images to compare the contrast of the text from Black (#000000) compared to Grey. It’s also stated and brought up that computer screens emit light, and that browsers were originaly displaying black text with a grey background for a reason–less strain on your eyes.

I’m not going to agree with this completley with the writer of this article, but I can understand their point of view. The new use of what he considers grey text is a softer black in my opinion. (On this site, my opinion is what matters!) I don’t see the softer black as annoying and I do think it helps readers read easier along with applying some basic knowledge of web typography to the content. So I’ll list a few…

1) Body Width: The width of the body content makes a difference on whether your reader will easily read through the content. If you’ve noticed, I’m using a narrow width for the content compared to a wider or full screen width. The reason is that the eyes will move less and the reader won’t feel eye fatigue, making it less strainful for their eyes to read the text.

*Try this out: Compare 3 different widths of your content. Try a wide body, a narrow body, and then a width in between. You’ll notice a difference in trying to read a long article.

2) Font Size: For a while web designers were using tiny the tiny font size of 11 pixels or even 10 pixels! I admit I’ve been guilty of that myself a few times, but over time I’ve realized that tiny font isn’t awesome. Larger fonts above 12 pixels are easier to read, even on a published project. Even though we sometimes reduce the font size on paper to try and fit as much infomation as possible, the web is much more flexible!

If you’re creating a site with a tremendous amount of content or large articles, I suggest implementing a tool on your site to adjust the font size for your viewers to read at their preffered text size. If you need help with creating a script for this, you can visit Dynamic Drive for a Text Sizer script.

3) Font Treatment: Try using different fonts or font treatments for headlines or navigation. You can even use a different font for links, or important information. Don’t over do this though, I wouldn’t use more than two fonts at a time on a web site, unless you can fit a third without making it look horendous.

You can also work with the font size and line height to make your text more legible. Don’t be afraid to work with the letter spacing either, or with the alignment. Even though you might notice I have a Justified alignment on my blog, I usually try to use Justify on a web site for clients but make sure there aren’t any rivers or gaps through out the content. (Not so much yet on the blog, I’m too busy!)

4) Colors: Applying colors in a manner to make your text stand out if it’s a URL, Visited URL, or even when you hover, or something of importance, is something a few web designers might get carried away with. (Here’s an example of what not to do.) Use your intuitive designer’s eye and understanding of color theory to make your text stand out. Also try different background colors to contrast your text in different area to seperate the content from the rest of the page. For instance, a white page using a soft black might have a navigation with colorful imagery, so you might want to use dark black or darker colors for the navigation.

In conclusion, soft black text (or grey text) isn’t horrible. Black text without any smoothing applied is really annoying to read when it’s bunched up. It sometimes has a wierd glow coming from behind it because of the screens light being emitted. So too much contrast could be a bad thing, and if grey text were so annoying, then why is it used so much now through out the web?

Have a good weekend!

Cheers.