I’m not by nature a designer. I’ve always been far more interested and proficient with code and logic, but over the years I have had to pick up design and I feel like I’ve developed some useful coping strategies. I hope to share these with you all over the next few posts here.
This was originally going to be a step by step guide on pitfalls to watch out for when designing websites but it’s taken forever just to write the typography section, so you’ll have to make do with that for today. 
__________________
Typography is pretty much the most important part of design for print. You generally really want people reading the text in your design so it’s very important to present it as best as you possibly can.
Design for web however is a slightly different kettle of fish. Print layouts are immutable (assuming your printer isn’t utter shite) and will always be displayed on one medium; paper.
A website, however, will be displayed on dozens of different mediums which each interpret things slightly differently. You’ve got to worry about different browsers, different operating systems (Macs and Unix/Windows display colours differently), different devices and some people will resize your fonts… so getting consistently good typography can be tricky.
Good typography starts with picking an appropriate font. On the internet your choices are: Arial, Courier New, Tahoma, Verdana and Times New Roman as these are the only fonts you’re guaranteed to have on every platform.
Pick one of these and stick to it for the whole layout. My advice is to avoid Courier New and Times New Roman like the plague. Times New Roman is just ickyand Courier New is a monospaced font, like an old typewriter font. The only time you should ever use Courier New is when you’re displaying stuff that needs to line up exactly, such as source code.
You should also make sure the font is in a colour that contrasts with the background its on. If possible stick to white or black for the text colour, as it’s pretty hard to go wrong with these, but you may want to consider other colours too for things like headings. For your main text blocks you should avoid primary colours and complementary colours (opposite colour to your background colour on a colour wheel).
You may also want to use more exotic fonts for things like your header to make them stand out. There are two ways to display exotic fonts in a webpage: either put them in an image and plonk it in with an img tag (don’t forget your alt attribute!) or to use something like sIFR (although this doesn’t work without flash installed and javascript turned on). Just try make sure the font is appropriate: don’t use weird/cartooney fonts when you’re wanting to look serious.
Now that you’ve chosen your font, you’ll want to start using it to make certain parts of your text stand out. Firstly, you’ll want to concentrate on making headings have a bigger font.
My advice is start with quite a small font and upsize it for things like headings. You want quite a small base font size, about 10-11 point, depending on your font.
First rule of thumb is to never, ever use px sizes on fonts in CSS. Internet Explorer refuses to resize px fonts so it’s really bad for people with poor eyesight, so you should use em units instead. A neat CSS trick you may want to employ is setting your font size to 62.5% on your body tag. This makes the default font size 10px without the px units, so you can easily get the exact font sizes you want with ems; 1.1em = 11px, 1.2em = 12px etc..
Next you’ll want to make important blocks of your text stand out. Bold and Italic is the way to go in most places. I would advise against using bold and/or italic in your headings if you’ve increased the font size by more than about 2 ems, as it starts to look tacky.
If you want to draw attention to a block of text or a heading more subtly, you can use the CSS line-spacing and letter-spacing attributes. I can’t give too much advice on when and where to use these, but I particularly like using letter-spacing in my menus; it makes them look a bit different without having to prat about with images.
Things to watch out for
There are a few things that will really screw over your typography without fail every time; in particular you need to watch out for Widows, Orphans and Rags.
Widows are simply when a word is sat on it’s own on a line. Like…
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
…that. Hideous, isn’t it? What you’d want to do is put a line break in on the top line so that 2-3 words get pushed onto the bottom line…
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
…which looks better (although very forced in this example; it’s hard to show this properly in this forum). The only problem, as mentioned earlier, is that different web browsers display things differently; you could end up with a situation where a line wrap naturally occurs in one browser and not in another – thus royally screwing everything.
But there’s a nice little trick around this; use non-breaking spaces ( )! If you go…
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
…then the web browser will refuse to wrap the line between the anime and laborum, so you always get those 4 words on the same line. Voila! No more widows in this paragraph!
Orphans are like widows, only for the first line of a block of text instead of the last. Unless you’re really trigger happy with line breaks you won’t notice these so much.
The only exception is with your headings. Most of the time it looks fine, but every so often the page will come together in such a way that it just looks crap. Simple solution is to try and avoid one word headings, which is good for SEO too.
Rags, however, are trickier. Rags are to do with the margin on a block of text (usually the right one). When the text plonks into the block for it, it sometimes wraps in such a way that it makes distracting shapes in the whitespace on the margin. We want people looking at the text, not the space to the side of it!
Unfortunately there’s literally no tools for dealing with rags in HTML and CSS. The rule of thumb is that the less words you can fit onto a line, the more chance you have of acquiring rags. So you’ll find these more in things like side bars (where there’s less horizontal space for text) than in your main content.
You can sometimes offset rags by generating more contrast in the problem areas, but unfortunately they are usually something you just have to put up with. Most people are accustomed to them in websites anyway, so I wouldn’t worry about them too much, but for environments like flash and photoshop (which are pretty immutable) you should be on the look out for them.
Intelligent Internet Business
Intelligent Internet Business Tutorials
Read expert tips to website traffic – this is your own tips store.
Related Story:
