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.)
Choosing Your Website’s Fonts
One of the benefits of the way I code website design is that the website’s primary two fonts (body and headings) are noted in a single parameter that can be easily altered; I change any aspect of a font (typestyle, size, weight, etc.) in one place and everywhere it appears within the website changes. So, changing your mind in this aspect is not a big deal if you realize you’ve made the wrong choice! In book and magazine typography, a sans-serif or display font is almost always used for headings and a serif font was used for the body. This rule is regularly broken these days and there really is no rule; whatever you think looks good is what we can go with. However, if the use of any font gives a website visitor to exert even the slightest bit of effort to read — you might as well have never written anything in that font in the first place. Website visitor can have very short attention spans and we don’t want to cater to them! The internet is rife with folks that have used decorative fonts in colours and sizes that are almost indecipherable on many screens — which is why we need to test out your fave fonts on a wide range of devices before implementing them. Google has created a wide range of public domain fonts that are available at no cost and can be used within any website I create. Unless you’re really particular, you should find something here that you like and that’s workable. Note that the Google Fonts website allows you to actually type directly into the demo boxes of the fonts and to change and view them at various different sizes and with different aspects. This is very helpful in envisioning what they’ll look like when displayed in your new website. The primary heading and body fonts that you eventually choose are often termed a “font pair” and the FontPair website does an excellent job of showing you two Google fonts together in a context where they’re juxtaposed as they would be on a web page. An interesting article indicates the 15 most-used and fastest-growing in use Google fonts of 2018. However, you might want to use this list as those fonts to not consider. After all, do you want your website’s content to look like so many others?! Do some Google or Bing searches on choosing website fonts and you’ll come up with a whole lot of opinions and perhaps end up even more confused! In summary, if the fonts you use on your website are easily readable by your visitors and do a good job of immediately indicating which are subject headings and which are content, then you’ve got it pretty well figured out already.Did you find this post interesting? Perhaps you’d like reading one of these others:
