Website Fonts

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 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. Although you could introduce a third font for special headings, warnings, and other unusual uses, you should generally stick to two fonts – at least initially.

Fonts fall into five categories:

• Serif. Fonts that have little “tails” on them. It’s an accepted fact that serif fonts are the easiest and quickest to read and digest. Therefore, 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. While serif fonts can be used in headings, they aren’t as common. 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” on websites; buttons, menu headings, and such.

• Display. These fonts are the show-offs of the world of typography. These fonts evoke significantly more feelings and style than the previous two categories of fonts, so they would never be used in body text. Any website prioritizing style, such as an online fashion store, would almost definitely use these in headings. One thing to be very careful about 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 clearly meant to look like handwriting, and although some might appeal, I strongly advise against using them on a website. The only possible exclusion would be to use one of them 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 the above fonts are proportionately spaced. 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 resemble typewriter or old dot-matrix computer printer output. Each takes up exactly the same lateral spacing. Monospace fonts look boring, and few good reasons exist for using one on a website. However, a style-focused website might consider their use to be radically trendy.

Fonts can have several different aspects:

• 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 only 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 modified 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 strike-through 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 you print a font in bold, you increase its weight because the lines that make up each character become 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 shows 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 pronounced 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 benefit of the way I code website design is that I note the website’s primary two fonts (body and headings) in a single parameter that can be easily altered; 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, designers almost always use a sans-serif or display font for headings and a serif font for the body. Nowadays, people often disregard this rule, and there really is no rule. 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 written nothing in that font. Website visitor can have brief 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 free to use on any website I create. Unless you’re really particular, 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 different sizes and with different aspects. This is very helpful in envisioning what they’ll look like when displayed on your new website. The FontPair website effectively showcases two Google fonts together in a way that simulates their juxtaposition on a webpage, like you would see with the primary heading and body fonts. An interesting article indicates the 15 most-used and fastest-growing in use Google fonts of 2018. However, 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 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 showing which are subject headings and which are content, then you’ve got it pretty well figured out already.