I fear for what I’m about to say.
Colored fonts are evil.
I’m not talking about colored fonts in the website design, nor colored fonts in headings within your content. I’m talking about colorizing the words you are reading as you read, just because, and the because usually isn’t a good enough reason to make us suffer when we read your site.
When teaching nature photography, we found all the students going through the “filter” phase, adding sparkling star filters, going heavy on polarizers to paint the sky half dark blue and the rest washed out, warming filters, purple filters, green filters, special effects filters…sometimes we thought they were more interested in the filter than their subject.
My husband would say that using filters and special effects in photography is like cooking with spices. “A small amount can make the dish but too much will spoil the meal.”
In the pre-1999 web design days where we were locked into grid patterns with table-based web designs, many designers put their energy into font colors when there wasn’t much else we can do. Today, that’s not acceptable.
More importantly, it dates your site.
[Can I stop now! It hurts my eyes!]
Here are sure signs your site, content, and maybe even you, are out of date.
- Using more than two font colors on a single article. Stick with easy to read black for the text and color in the headings – unless you are announcing a birth, wedding, death, war, or emergency.
- Center the text of poems or featured content no more than 4 lines high. Centered text is hard to read, looks odd, and extremely old fashioned.
- Learn how to properly quote references and what other people say. Use
blockquotesnot fonts to help us see that these words aren’t your words. - Italics are used for foreign words, air quotes, and short notes rarely longer than a few lines. Italic tends to be hard to read and is considered a shout from a web page.
- Bolds are for emphasis on specific words like instructions or titles. Words set in bold randomly (or not) across an article makes the reader’s eyes ping pong around the page, forcing them to skim the content not read and enjoy it.
- Indent is dead. If there was no space between paragraphs, indents would be a clue as to a paragraph beginning and ending. On the web, not necessary, and old fashioned.
- Mixed fonts are fun for a while, allowing your creativity to shine when it comes to clicking a couple buttons, but reading through a variety of fonts in a sentence, let alone throughout an article, makes the reading difficult and often sends readers running. Show your creativity in other ways.
- Using link dumps are old fashioned and hard http://lorelleteaches.com/2013/01/08/what-is-a-properly-formed-link/ to read. Create links properly so they are easily read and not a distraction of code in the middle of your article.
- Crowding in any way is old fashioned. Content needs room to breath, to give a reader the chance to literally read between the lines.
- Using any of these outside the content area, such as in the sidebar, to overemphasize something. It just adds to the clutter and distracts from your content.
Don’t let your content compete, even with itself.
Your blog exercise today is to clean up your out-of-date messes.
If you’ve a habit of mixing fonts and using colored fonts, break it now. Go back over some of your old posts and remove all the colorization and turn the fonts into one kind. Readable.
When I brought this topic up in my class, one student pipped up with, “Friends don’t let friends f**k with fonts.” It put me on the floor. He was so right.
So tell your friends not to abuse fonts and help them make their sites more readable, open, and friendly.
More Modern Web Design Resources for Your Blog
The following are links to articles and blog exercises to help you clean up your site and bring it into the 21st century.
- Copyright: How to Quote and Cite Sources
- Links and the Anchor HTML Tag
- The Basic Structure of a Blog Post
- What You Must Know About Writing on the Web
- How to Add HTML in a WordPress Blog Post
- What is a Properly Formed Link?
- How to Add Images in Your Post Content
- Writing with Single Lines Not Double in Your Blog Posts
- Writing Better Blog Post Titles
- Blog Exercises: Make Post Titles Matter
- Blog Exercises: Fix Images in Your Content
- Blog Exercises: Quoting and Blockquotes
- Blog Exercises: How to Publish Code
- Blog Exercises: How Many Words in a Link?
- WordPress.com Blog Bling « Lorelle on WordPress
- Blog Exercises: Writing Poetry and Recipes in Your Blog
Remember to include a hat tip link back to this post to create a trackback, or leave a properly formed link in the comments so participants can check out your blog exercise task.
You can find more Blog Exercises on Lorelle on WordPress. This is a year-long challenge to help you flex your blogging muscles.
Via Feedburner
Subscribe by Email
Lorelle on WordPress 
10 Comments
In the past few weeks, I went through some old posts and was confronted by some very colourful texts and irregular headings. Terrible! I was appalled! This post arrives at the right time to help me with my continuous editing. Thank you.
I used to use colours to highlight text, and it was because I didn’t know the existence of Blockquote and many rules of writing for the web, therefore many stylistic problems also occurred.
I picked up the rainbow text habit as I work with teenagers. In school, teachers use coloured texts and ‘children-friendly’ ppt slides, in the name of ‘interactive lesson.’ And, most teachers are particularly fond of the comic sans font.
Your concepts above are very helpful — has the WordPress team ever issued advice on style like this? If not, do you think it’s such a useful list that WordPress should help spreading?
I have one particular issue with background colour. I find some people love using white font on black background. My vision is poor, and contrasting colours as such hurts me. I sent some polite messages to some bloggers to tell them how I felt with the black-and-white colours, but most of the time I was ignored. I left some blogs simply because my eyes couldn’t cope with the colours.
I feel that if people have some awareness of how it feels like being visually impaired, they’ll pay attention to the choice of colours on the web. I also work with dyslexic children, and choosing the right colours for them is important to enable them to read.
Excellent point about the black background and white text, however many people see better with that, if done right. Some can’t. There is a wide spectrum of vision issues so it is important that web designers be schooled in visual testing of their site designs for various vision abilities. Unfortunately, few “get it” until they turn 50 or 60. 😀
I’m a former elementary teacher and I completely get the whole multi-color thing. I think that’s different when used in that context. Guided Language Acquisition Design (GLAD) does it brilliantly, for example.
I think white on black is appropriate in some cases, like musicians, photography, things like that. But it can still be softened just a tad to make it not quite as harsh.
I’m a Mac user and use Safari. In the upper right next to the URL bar is a blue button that says “reader.” When I click that button it takes the web page and turns the content (content only) into black text on a white background. I don’t know about the other browsers, but I’d be willing to bet there’s an equivalent. I don’t always see it on every site, but usually the blogs for sure. Hope that’s helpful. I have to use it quite a bit, actually. I have terrible astigmatism and even with glasses it can get a little painful.
Well put. Thank you for letting us see through your lens, literally.
I think if more people spoke out about how the world looks through their eyes, we’d be more appreciative of what it takes to really see.
A great example of this is Caroline Casey’s Ted Talk.
Many thanks for your great tips, Edee. Yes, I came across the Mac – Safari – Reader feature by accident a while ago and I do use it sometimes to get rid of distractions. The trend these days is for teacher to use the yellow background and I’ve found this guide from the British Dyslexia Association helpful.
Thank you Lorelle for Caroline Casey’s fantastic TED talk. I’m so moved by her energy and passion. I can fully understand her idea of not labeling children. However, I’m not sure how practical it is not to label children in today’s education. In Britain, we label children so that they can get appropriate help, so that the school receives the funding to allow experts to help them. It’s not fair, but funding is strictly linked with labelling and it makes education very challenging. Some middle-class parents fight to get their children labelled, so that their kids may receive benefits in the exam, for example, to be given extra time.
Does labelling restrict children’s ability and chance from achieving the unachievable? Possibly. Does it give them better support? Possibly too.
Love this! Even worse than multiple colors on a site? Multiple colors on a site with a dark- or black-colored background. Seriously, though, another reason not to use too many colors within text is if you have a sentence that is normal but has words or phrases that are colored for “effect,” the reader may assume those are links. I experienced this on a web designer’s website a few months ago. It was a frustrating experience not only because nothing was clickable, my eyes were so distracted by all the highlighted words/phrases I couldn’t actually read the full article and found myself skimming.
Thanks again. But those first few paragraphs were a doozy to look at, so will you please pass me some eyeball bleach?
😉
LOL! Ain’t it the truth. I’d invest in some eyeball bleach myself!
I’ve long said to let nothing get between you and your reader, as well as their ability to comment, and I’m serious about this. Just because you can do it doesn’t mean you should.
Thanks!
I with Edee Lemonier who said:
Excellent points..Using too much of font colors will reduce the standard of your website. Now web designing get rid of table based designs and grid patterns, so it is not a good idea to provide much emphasis on font colors.
Table-based designed were out-moded in 1999. Usage actually violates web standards and web accessibility laws, so designing with tables breaks laws in many countries including the United States. Soon I expect Flash designed sites will also come under such laws unless designers using Flash, and Adobe, come up with ways to make it compatible with those laws. Fortunately, few people are embracing Flash any more with the advent of HTML5. Thanks.
One Trackback/Pingback
[…] « Blog Exercises: Don’t Let Your Content Compete With Itself […]