*I'm moving over to Lunarpages hosting so until further notice all comments have been disabled. If you need to get into contact with me, please email me at rileyhater2003@gmail.com and I'll respond as soon as possible. Until everything is done I'll be posting updates on my tumblr: babblative.tumblr.com.

Do's and Don't's of Text Size and Colour

Welcome to Do’s and Don’ts of Text Size and Colour. My aim is to educate people on proper font sizes, family’s and colours. Where did I get all these crap (and not so crap) colours, sizes and doo-dads? Well okay, so you didn’t ask, but I’ll tell you anyway, I got them from various sites around the internet. Interesting, isn’t it? Well, if you can guess which sites I’ve used then you’ll get a free plug here, I can’t offer much more other than imaginary Monopoly money so it’ll have to do.

Either use the contact form or try my email rileyhater2003@gmail.com.

This is white (#fff) on black (#000) and as you can [hopefully] see it’s quite piercing. There is too much contrast here, go for greys on greys as in the example below.

#box1 {<br/> background:#000;<br/> color:#fff;<br/> }

This is softer and easier on the eyes than the white on black. Even though black on white works quite well, it’s not true for the inverse white on black.

#box2 {<br/> background:#333;<br/> color:#ccc;<br/> }

You’ll probably have to highlight this text to read it because there isn’t sufficient contrast between the text colour (#bbb) and the background colour (#fff). Use a darker colour on light backgrounds, as in the example below.

#box3 {<br/> color:#eee;<br/> background:#fff;<br/> border:1px solid #666;<br/> }

This the dark on light ideal, there is sufficient contrast between the text and background colour which makes everything easier to read.

#box4 {<br/> color:#333;<br/> background:#fff;<br/> border:1px solid #666;<br/> }

If you’re looking at this in a larger resolution then you’re probably scratching your head and wondering what kind of idiot would make their font this small willingly. If you’re giving me a thumbs up for finally using a decent font-size, well you’re either Superman or on a very old resolution.

#box5 {<br/> font-size:7pt;<br/> }

This is a better font size to use, 11px is usually considered the standard for any website that is interested in not making visitors, who already have bad vision, go blind. However, IE 6.0- will not allow you to resize absolute font sizes, you must use a percentage (76% is about 11px, for example).

#box6 {<br/> border:1px solid #666;<br/> font-size:11px;<br/> }

All in all this is just a phenomenally bad choice of text colour and size, there is hardly any contrast between the text and background colours and the font size is just too darn small! And to think that I ripped this from an actual site.

#box7 {<br/> font-size: 7pt;<br/> font-family: Tahoma;<br/> background-color: #000;<br/> color:#5d604f;<br/> }

This suffers from the same problems that the last one did, even though the font size is bigger (9px) it’s still murder on the eyes of someone in a large resolution and or someone with poor eyesight.

#box8 {<br/> background: #242424;<br/> color: #999;<br/> font-size:9px;<br/> }

Ouch! Contrasting colours can look great when paired together, but not when the two elements are text and background. Also, big font sizes rarely ever look that good. Some people can pull it off, and pull it off well, but most of us can’t. Stick with a default font size because it’ll more than likely fit your style.

#box9 {<br/> color:#6A9857;<br/> background:#800000;<br/> font-size:18px;<br/> } }

Yeah this is pretty sad if you ask me, regardless of whether or not there are two slightly different shades of colour a dark colour, such as black or dark grey or any contrasting dark colour should be used.

This is what it looks like on the alternate “darker” colour, if you were wondering. It’s just as bad and as godawful as the first.

#box10 {
color:#5E87CF;
background:#d4d9d2;
}

#alt1 {
background:#bdc5ba;
}

Another offering from a real site. Although to be fair I don’t think that it is supposed to look like this. Internet Destroyer most likely displays it properly.

#box11 {<br/> color:#233A56;<br/> background:#000;<br/> font-family: Trebuchet MS;<br/> font-weight:bold;<br/> font-size: 11px;<br/> }

Oh look, another idiot who doesn’t know what contrast is. Big surprise. This is being used as a link colour on a rather popular site.

#box12 {<br/> font-family: "arial", sans-serif;<br/> font-size: 11px;<br/> color:#f7d1ad;<br/> background:#fff;<br/> }

Hot purple on a black background? Yeesh.

#box13 {<br/> font-size:7pt; <br/> font-family: tahoma; <br/> color:#E96FD9;<br/> background:#fff;<br/> }