Windows Live Mail is a great email client, no question. But one very longstanding complaint is the way it renders fonts. Whereas in other mail clients it’s stupidly easy to make mails look a specific way for text, in Windows Live Mail (and the previous Outlook Express) it is, put politely, a challenge.

This tutorial is how to get the fonts to look monospaced (i.e. Courier New) everywhere for email content. And I’ll also instruct how to switch back and forth between monospaced and rich-styled HTML format.

Windows Live Mail by default hides the menu bar. To show it, just press ALT. If you want it to stay there permanently, press ALT+M (to bring up menu options), then M again. To hide it, repeat process.

Click Tools then Options, then the Read tab. You see this:

Check the box for Read all messages in plain text. Then click the Fonts button.

You see this:

Set the proportional font and fixed-width font to Courier New. Then set the font size to Smaller. Then click OK.

Click the Send tab. You see this:

Check the box for Reply to messages using the format in which they were sent. You do this so when anybody sends you an email with photos in it and you want to include those photos in the reply, there’s no special steps needed.

Next to Mail Sending Format, tick the option for Plain text.

Click the Compose tab. You see this:

Set the Compose Font for both mail and news to 10 pt. Courier New.

Click OK.

When viewing a mail, such as the PCMech Newsletter, it will look like this:

If you want to view this in the original HTML version, there are two ways:

1. Click View, then Message in HTML.
2. Press ALT+SHIFT+H

Then it looks like this:

You can switch back to plain text by closing and opening the email again.

Lastly, on replies if the message is in HTML, the compose window will load everything, including all images, custom fonts and so on. If you want to switch to a plain text reply in the compose window, click Format then Plain text, otherwise leave as is.

Why use the plain text only option?

It decreases the risk of having malicious code executed in your emails. Granted, WL Mail is very good at suspecting phishing attempts and does not allow images from unknown senders, but choosing the option to read in plain text only adds an extra layer of security.

Why change all the font settings like this?

Configuring WL Mail in this fashion gives all your emails a uniform look that’s easier on the eyes. The default way it’s configured makes some mails have huge text while others do not, with little consistency from mail to mail.

Don’t like monospaced? Use any font and size options you want.

For those with not-so perfect vision, using the above methods with a different font (such as Trebuchet MS) with a larger size (such as ‘Larger’ combined with Trebuchet MS 14pt) will make all your emails much easier to read and reply to.

I have been a long-time reader of both UseIt.com and Web Pages That Suck. Both concentrate on what’s called web usability.

Web usability can be defined by answering a simple question: How easy is it to use your web site? A large portion of ease of use comes from your selection of colors and fonts.

Color: Foreground and Background

Black on white is always better than white on black.

To some this may seem confusing because one would assume white on black is better. However the problem with that is text to the human eye tends to "fuzz" when reading white on black, be it in print or on-screen.

The only time white on black ever works is when the fonts are oversized and thick. But if you do that with your web design, the text is just too big.

If using color: Dark on light is better than light on dark.

Color: Links should be a primary color

On a computer monitor, the best link colors for black on white are the primaries of red, green or blue. Or in hexadecimal values: #ff0000, #00cc00, #0000ff.

Links are meant to be seen and should contrast against non-linked text.

Font: Links should be underlined

Although there is no rule that says "all links must be underlined", people expect a text-based link to have a line under it signifying a link to somewhere else.

Another reason for underlined links is to accommodate the color blind. Without the underline, many literally can’t distinguish a link from regular text.

There are some instances where non-underlined links are okay, such as buttons. When it is very obvious that the text represents a button, the lack of a line under the word is fine. For example, the top navigation bar PCMech is button-style. If read as a sentence it makes no sense so it is easily assumed they are button links.

Font: People usually prefer serif

This is another one of those instances where people are so used to a specific typeface that it’s okay.

Serif fonts are better known as "Roman" style, like Times New Roman and Georgia.

Sans-serif fonts are serif fonts without the serifs (i.e. the little "accents" at the end of strokes), such as Arial, Helvetica, Trebuchet MS, Verdana and so on.

The default font in nearly all web browsers is always serif – even on Linux (in Ubuntu, Firefox follows the global font settings and it’s usually Bitstream Vera Serif).

Windows users are obviously very used to seeing Times New Roman as it’s been around for a very long time.

Why serif and not sans-serif? Why do people prefer this? It’s because newspaper and books use it most. That’s what we’re used to seeing, therefore serif is the better way to go.

Font: Minimum 14-pixel size is recommended for main text

Monitor resolutions are increasing but the fonts are appearing smaller as a tradeoff. Years ago you could get away with 11 and 12-pixel font sizes on web pages, but the bare minimum these days is 14. It has to be that else you run the risk of people not being able to read what’s on your web site or blog.

14 pixels of font size on a Windows system using CSS is any one of the following:

• 14px
• .88em
• 10.5pt
• 88%

If you want to play it safe, use the standard 16px; the CSS font-size rule for that would be:

• 16px
• 1em
• 11pt
• 100%

Quick tips for when you encounter a site with bad design

Bad design is when the fonts are too small, the pages are white on black and so on. You can skirt around these issues easily by doing the following:

1. Know your zoom controls.

All modern browsers (IE, Firefox, Opera, Chrome, etc.) have zoom controls. Know them and use them. CTRL and plus-key increases, CTRL and minus-key decreases, CTRL and zero resets to default.

2. "Turn off" the design.

Firefox-specific: Click View, Page Style, No Style. The web site will then look like it was made in 1999, but it will be a nice plain-jane black on white with a serif font and easily readable.

I especially recommend this method for viewing MySpace pages as they are in my opinion the worst-designed pages on the planet.  Watch how much easier (and faster) it is to get around with No Style selected. The difference is like night and day.

To re-enable: Instead of No Style choose Basic Page Style.

Are you looking to give your web site, graphics, papers, etc. a unique flair? If so a simple and effective way do this is with a non-standard font. While you could make your own, a better option is usually to use an existing one. If you are looking for a font to use, then take a look at Search Free Fonts.

The appropriately named site, Search Free Fonts, has over 13,000 free and 31,000 commercial fonts available for you to preview. You can browse by category, alphabetically, most popular and highest rated.

Fonts can be very expensive (either time spent or money-wise) if you want to develop your own, so consider taking a look here if you are in the market.