Basic Tools
Design Essentials
Layout, and the All Important First Page
White Space
Continuity and Change
Graphics and Visuals
Typeface and Fonts
Glossary
Typeface
Fonts come in two varieties, serif and sans serif. Serif has slight curls on the edge of the letters which enhances letter shape. When people read something, they generally recognise the shape of a word, thus serif is easier to read and best for body copy. Sans serif is less readable for body copy, but contrasts serif and is thus used at larger sizes for headlines.Fonts also sometimes have different versions, like light, heavy or condensed. Heavy has been redrawn for more impact and so is a better choice for headlines.
A swash character is a special font where each character has been drawn in a highly decorative manner and is used only for the first letter to introduce a piece of writing, this would rarely be used on an Internet page.
Typographic Refinements
In choosing a font it helps to know a little of the technicalities of the letters. The baseline is the line the letter rests on; a descender is a line that crosses down past the baseline in certain letters, like ypgj etc.
The x-height is the line at the top of each vowel, iouae, imagine drawing a line at the top of the letters iouae and that's the x-height. The x-height is usually larger in fonts with longer descenders. Bowls, counters and eyes are the shapes in vowel letters or, for example, in the letter b, the lower case b refer to the circle. The clearer the shape in the bowls, counters and eyes then the more readable becomes a font.
Ascenders are lines that go up above the x-height in letters like tldhkb etc.
Fonts with a high x-height have short descenders and ascenders to their shape are more easily recognised because of the extra space within the characters, but the impact of ascenders and descenders is diminished. If ascenders are very high, then readability is diminished and the font becomes unsuitable for body copy.
Sometimes a font is a name is followed by the word condensed, they usually give an image of speed and power. Expanded versions of fonts give extra impact to headlines etc. Some fonts are versions of handwriting and give an informal look. Decorative fonts are for a specific image, logos, possible headings etc. Remember that any non-standard font might not be installed on the computer the viewer is using, which means the browser will use its default font. As mentioned elsewhere, you can make graphic text, animated or stationary, for free on the web at
www.mediabuilder.com. Even better than this site is www.cooltext.com
Widows and Orphans
A widow is a word alone at the bottom of a text block; an orphan is the same but at the beginning of the block, they often occur in justified text. Also, occasionally a word processor will change the letter spacing in a long word so that it fills the column, but the large gaps are unacceptable - all of these things can be avoided by either:
- Transposing an earlier word.
- Adding an earlier hyphen.
- Adding an earlier non-breaking hyphen.
Copyfitting
Copyfitting is essentially writing to a word count. Sometimes, despite the most valiant efforts at copyfitting, there's still too much or not enough text. If there's too much text that really can't be edited down, then reduce the size of everything evenly, the headline, photos etc. If there's too little text, then increase the size of everything, but make sure that the extra white space is distributed evenly. This is of course much more of a problem in print than on the web, where you can just keep on writing until your megabytes, money or interest run out, but there can still be too much text on one page, making it slow loading and too 'scroll-heavy'. So the answer is to have a number of smaller pages and a good index. Some designers say each page shouldn't be longer then three screen-widths or people will get bored of the scrolling. I don't know about that but it's probably in the ballpark with many types of pages. Remember to try and write small, self-contained essays.
Initial Caps
Initial caps are the large characters that come at the start of articles in magazines, or each chapter of books because they indicate commencement. They're used in print ton good effect, though rare on the web, if you want to experiment here are some ways to make the most of them.Types of Initial Cap
Raised = Raised higher that the body text, with forced a line break and white space above the first line it introduces.Dropcap = falls below the baseline, forcing a text-wrap.
Margin = in the margin, leaving the body text unchanged.
When you use them, then notice that when professionals do so, they line them up with the surrounding text properly. What I mean is, say a drop cap is dropped five lines, it lines up perfectly with the base line of the fifth line, if it was half way between the fifth and the fourth baseline it would have less impact and make the lower spacing appear gapped.
Make sure the initial cap is big enough or it might not look intentional, at least three times bigger than the body text is a good rule of thumb. Also, try using colour (carefully).
If you use a drop cap, make the text wrap as tight as possible.
Another good idea you'll see in magazines is that after a drop cap, or any type of initial cap, the first line of body text is in small capitals to further lead the eye into the article, and this is very effective.