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.

There are also some other overlay style scripts to use, but we’ve been comfortable with this one. You might also want to check out Light Box which is another great script.

Check them out, and remember to give some thanks if you’re using them.

A bit tricky, because Dreamweaver and Flash produces this “twice-baked” method which I read about at A List Apart, and reading more into including some other sites, I’ve decided to use a script that write the object or embed tag dependent on what browser you are using. Pretty neat, I didn’t come up with it, but it’s cool because it works! It just writes over a Div and if you don’t have Flash or Javascript enabled, you can set the Div to pull graphics or content you’d want to replace instead of the Flash file.

Anyhow, this seems to validate and works. The bad part is I also tried creating a dynamic background using Flash and CSS by positioning everything Absolutely, which isn’t being very consistent so I’ve given that up. (Dangit!) I’ll continue looking for a few different methods, but until then…regular plain gradient background and pattern.

Designing the site has been quite a project, since I haven’t produced anything for myself in a while. I still have to produce all the content, but I’m being so picky with every little detail for now. I’ll have to drop that attitude, and develop everything and come back in later to clean it up if I want to finish soon.  (or chug a few redbulls and stay up late nights!)

Okay, well I hope everyone is a having a good week so far, and I’ll be posting up some of my own artwork soon that I’ve started.

Anyhow, designed out the website and finishing up all the mock-ups before I start developing the entire site. I’ll probably be integrating a lot of Javascripting and Flash, so I’m very excited! I plan to make this site kick ass and really show what I’m into and capable to produce. (but not limited to!)

Well, I’ll post an update as soon as I start doing the Flash, and I’ve also started documenting how I’m building it because I have a lot of friends that are interested in web design, and I’d also like to have some documentation of my process for my clients.

Thanks for reading.

-EB