Almost as important as the colours you choose for your new website are the fonts. Also known as typestyles (which fall under the general heading of typography) the style of the lettering used in your website for headings and in the body can be very evocative. Some might say that they are subversive in nature in that they help to support your brand and corporate image. Regardless, some thought — and perhaps even some experimentation — should go into choosing which ones are going to be best for your new website. As a general rule, you will go with one type of font for headings and one for body text. While a third font might be introduced and used for special headings, warnings, and other extraordinary uses, you should generally stick with two — at least at the outset. Fonts fall into five categories:
- Serif. Fonts that have little “tails” on them. It’s a generally-accepted fact that serif fonts are the easiest and quickest to read and digest. This is why they’re preferred for body text in long passages (e.g. books) and certainly make sense in blog posts that have lots of large paragraphs and long sentences. Serif fonts can be used in headings, but they’re not as common that way. The most commonly-known and -used serif font is Times Roman.
- Sans-Serif. These are plainer fonts and don’t have the serifs (tails) on the characters, giving them a more modern and streamlined look. They’re okay for body text if they’re not in long paragraphs, but are more commonly used in headings. Sans-serif fonts (the most common one is Helvetica) are also good for use in short “labels” in websites; buttons, menu headings, and such.
- Display. These fonts are the show-offs of the world of typography. They evoke significantly more in the ways of feelings and style than the previous two categories of fonts do and would never be used in body text. These most certainly can be used in headings and would almost certainly be employed in any website where style is important (i.e. an online fashion store). One thing to be very careful of here is that display fonts are very trendy and can often be overused. Thoroughly check out similar websites to yours — especially those of competitors — to ensure nobody else is using the same display font. It’s kind of like two women wearing the same dress to a party!
- Handwriting. These fonts are obviously designed to represent handwriting and, as tempting as some might be, I would strongly recommend never using these on a website. The only possible exclusion would be to use one of them very sparingly, to carry words that were “being spoken” by the company owner or a customer giving a testimonial. Used in this way, they may evoke significant credibility, as if the owner or customer were directly writing the words on the website.
- Monospace. Pretty well all of the above-mentioned fonts are proportionately-spaced. That is, some letters take up less lateral space than others. (For example, a small ‘i’ takes up less space than a capital ‘X.’) Characters that are this way look nicer; as if they came from a typeset book. Monospace fonts look as if they’ve been typed by a typewriter or printed on an old dot-matrix computer printer. Each takes up exactly the same lateral spacing. Monospace fonts look boring and there are few good reasons to use one on a website, although their use in a style-centred website might be considered radically-trendy.
- Size. Fonts are measured by their height and are most typically expressed as ‘points’ (pts). A single point is 1/72 of an inch, so a character printed or displayed at 12 pts is 1/6 of an inch high (i.e. 12/72″). It stands to reason, therefore, that the letter ‘C’ in 24-point is exactly twice as tall as the same character (in the same font) printed at 12 points. However, font size is exclusively stated as a height; the breadth of the font will change depending upon the font type. So, some words (or sentences or paragraphs) will consume more lateral space.
- Emphasis. Fonts can be altered slightly in order to give the words they build more emphasis. Bold, italic, and underline are but three of the most common. Capitalization, letter spacing, and strikethrough are other ways of adding emphasis to words. Of course, words can be double- or triple-emphasized by adding on emphasis aspects. For example, bold-italic.
- Weight. The font’s weight is the thickness of its elements. When a font is printed in bold, its weight is greater because the lines that make up each character are thicker. Many fonts have multiple weights available, ranging from thicker than bold to thinner (lighter) — sometimes even lighter than regular.
- Leading. While not directly a font aspect, this parameter has some effect on the look and readability of a font because it indicates the amount of space that goes between each line of text. (This term is also called “line spacing.”) As we’ve all experienced, having too little space between each line makes it harder to read, as having too much spaces also does. (This term’s first syllable is pronouced like the lead in a pencil because it relates back to the days of manual typesetting and how much lead, in the form of narrow strips, the typesetter would place between the lines.)