Choosing The Right Fonts For Your New Website
Although not the most obvious element of website design, fonts play a crucial role in the internet’s appearance. With thousands of different character sets in existence, choosing the right website fonts has become an increasingly challenging – and personal – decision.
From lead to pixels
Fonts have evolved over six hundred years, starting out as lead alloy blocks, and progressing to contemporary digital typefaces. In 1530, Claude Garamond developed a font which has remained popular ever since; John Baskerville achieved a similar feat in 1757. Printing presses established the concept of standardized typefaces, and audiences began demanding greater legibility and aesthetics as books, newspapers and latterly magazines rose to prominence. The style-conscious 1920s brought us Gill Sans, Bembo and Futura, while Times – the predecessor of Times New Roman – debuted in 1931.
Today, there are fonts for every purpose. Some are strongly associated with a particular location or brand, like the Johnston typeface used on London Underground signage in England. Steve Jobs’ dalliances with calligraphy in the 1970s inspired him to create the iconic Chicago typeface for Apple Macintosh computers, while the 1990s’ computer revolution led Microsoft to commission minimalist fonts including Georgia and Verdana. Some fonts have grown in popularity over the course of this decade (Futura, Garamond), while others have declined (Times New Roman, Courier).
Read all about it
Ultimately, readability is the most important attribute to look for in website fonts. That’s why intricately-finished serif fonts have largely been supplanted by simpler sans-serif alternatives. You can see an example of a sans-serif font right here – the Midphase blog is published in 10.5pt Arial. We chose Arial because it’s crisp and clean, and provides optimal readability against our blog’s pure white background. We also improve readability with double-spaced sub-headings, while bold is used in the paragraphs for visual impact. Conversely, we avoid italicizing words or phrases, because this makes things harder to read. Shadow fonts and 3D effects will also harm legibility, which we discuss in more detail below.
These are some of the factors to consider when choosing website fonts:
Compatibility.
A little-known font may not render correctly in certain web browsers, each of which will interpret graphical content in subtly different ways. Arguably the most important factor when shortlisting website fonts is ensuring they display consistently in every browser. If you’re unsure, Google has published a library of fonts, which are free to use. It’s a safe bet these typefaces will look equally clean in Safari, the Android browser, Firefox or even Internet Explorer.
Legibility.
As discussed above, this blog is published in the minimalist Arial font. Choosing an understated font with very clear definitions between letters optimizes legibility. Watch out for common failings – fonts where positioning the letter ‘n’ after an ‘r’ resembles an ‘m’ (Franklin Gothic), or typefaces where it’s not easy to distinguish between the letters ‘o’ and ‘a’ (Lucida Handwriting). If in doubt, test potential fonts out on a sentence containing all 26 characters – ‘the quick brown fox jumped over the lazy dog’ is a popular choice for this test.
Character.
If you run a vintage bookstore, an italic serif font might be useful for conveying tradition and an appreciation of classic publishing. If you’re running a car repair center, an italic serif font would look ridiculous. Fonts should reflect a company’s character or ethos, which is why modern brands tend to adopt post-war sans serif fonts like Helvetica. Equally, unless you’re trying to position a company as studiedly retro, Comic Sans should be avoided. This was the internet’s most popular font many years ago, but the world has now moved on.
Overuse.
Comic Sans fell from grace partly through overuse, because people wanted their websites to look individual rather than stamped out using a cookie cutter. In the age of WordPress templates, however, an overly generic font on a commonly used website design suggests a lack of character or imagination. Courier has suffered from overuse, as has the aforementioned Franklin Gothic. Even Arial – which we love here at Midphase – has become ubiquitous.