“You can’t choose your family, but you can choose your font family.” – Wix writer
Choosing your font (or font family) for your website can actually be a bit daunting. Or maybe you went with whatever site builder you’re using had set as a default, and didn’t consider its impact or whether that choice is even a good match for you or your website.
So how to begin? First, what the heck is it?
Serif or sans-serif?
Serifs are those little projecting points or lines that some fonts have on the ends of their letters – Times New Roman, for instance, is from the Serif fonts family. Sans Serif literally means “without serif”. These fonts are typically the best choice for online texts. The one you’re currently reading on this site is Karla, a “quirky” sans-serif which happens to fit my self-identified character 😉
The 3 main font families: Serif, Sans Serif and Script
Serif fonts have little decorative trimmings on the edges of the letters; like Times New Roman or Baskerville. This family of fonts generally has a classic, more elegant look and is widely identified with “old-school” typeface. This makes them great for printed materials like newspapers, books and magazines but they are not as easy to read online.
Sans serifs, on the other hand, are fonts that do not have these decorations at the edges. They are classified as modern and clean typeface, like Arial and Open Sans. They are generally the standard for digital and web design because they are considered to be preferable for reading online.
Last but not least, Script fonts are a more ornate typeface. They’re the ones that look like handwriting, and can be very elaborate (think: wedding invitations). They are extremely cute and are a great embellishment, but with their fancy curves they can be a lot harder to read. Use them sparingly! Have you ever tried to puzzle out a word in graffiti? That’s exactly what happens with too much script font.
How to Choose the Font Family that Fits the Tone of Your Site
Your business and brand have a personality, which should be conveyed in your font types and colors. This will help you decide whether to choose serif, sans serif or script. You wouldn’t wear clothes that don’t suit your style, so why write in Times New Roman when your brand is more Helvetica?
Whether you have a chic online store, a member forum or a local coffee shop, it is important to pick the font that matches your brand. When you create a website, the typeface you choose sets the stage for your visitors and gives them a feel for your unique style.
Your intended use can make a difference too. For example, it’s a good idea to use serif for a lengthy text, while sans serifs are suggested for captions, headings, and charts.
Fonts That Fit Your Audience
You should also bear in mind your target audience. If you’re offering wellness services for seniors, for example, their needs for legibility are different from a teen demographic. Seniors are not going to appreciate tiny fonts or pale palettes that don’t have enough contrast. Their needs for legibility will be different from a teen demographic. If your website font is so small they feel like they need a magnifying glass, or it’s too pale to make out the words easily, you’re not winning.
While we’re at it, please consider extending that legibility in a more “accessible” way. There’s a whole segment of the population who are forced to rely on additional tools and gidgets to interpret websites when they’re online. Come on web designers – get out of your boxes. (More on that in a separate post to come.)
The Golden Rule: Keep it Simple
Beautiful fonts are essential for a stunning design – BUT, just like colours can be distracting, font types can be too. It’s best to limit yourself to two fonts. Don’t even try to add in three, no matter who tells you it’s okay. Three’s a crowd, and three (or more) fonts can be visually overwhelming and distracting.
Think I’m being too strict? Just consider all the possibilities you can create utilizing just two fonts – keep reading!
If you want to put emphasis on a header you can increase the font size …
… while smaller type (in this case, paragraph style) is great for long bodies of text.
Need some definition or emphasis within sections? Bold and italics are straightforward options without resorting to another font entirely and losing the focus of your message.
… You can also change the placement on the page.
S p a c i n g is also a great trick to use when wanting to accent certain words.
If you have access to a decent graphic design software, you can make all kinds of customizations including kerning (the spacing between letters, when the spacebar just isn’t right). You can even design your OWN font using opensource software like FontForge – but first keep reading to make sure it’ll display on your viewer’s browser!
To Mix or Not to Mix?
If using only two different fonts makes you feel restricted, play around with the contrast between different font weights and styles. Bold and thin, italics, and of course, uppercase and lowercase. Mixing all the options of serif and sans serif, bold and thin can be more fun than you realize.
How to Make Your Fonts Serve Your UX
UX (user experience) is where design meets function. It’s so common now that it’s evolved from a noun to a verb: “We need to UX our website.” Basically, it means that using a website intuitively makes sense to the user.
Intuitive UX design provides an overall positive digital experience for the user and creates a positive brand experience. Font choices that are clear and legible are obviously a part of that positive experience.
Will Your Font Display Properly?
Computers come with standard fonts locally installed—common “web safe” “system fonts” like Arial, Times New Roman, and Garamond. When a website or application is called up on that device using one of those system fonts, that computer recognizes it and renders it no problem.
But what happens when a designer wants to create a design with a custom or lesser-known font that’s not locally installed—say, one you just designed yourself, or one that’s available on Typography.com, Google Fonts, Fontsquirrel, or Adobe Typekit? If that font isn’t installed on your viewer’s computer, there’s a chance it won’t display. And you’ll lose the carefully chosen branding and graphic design you put into your site.
And don’t get me started on the multitude of problems that designing for specific browsers can incur – talking about you, Internet Explorer. (For extra reading kicks, here’s an article from another design company about font support for IE and how tricky it can be.)
When a designer wants to use one of these custom fonts, they can use a web font—a font that doesn’t have to be installed on a computer because it’s accessible via a server where the file is hosted. From there, that font gets called up and loaded into the browser where it can be viewed how the designer intended.
Below is an example of Google font (by the way, you probably won’t be able to see this link if you’re using IE!) You can preview some text there:
This particular article isn’t going to get too tech-y or in-depth about how web fonts work (we’ll save that for a future post). For now, it’s good to be aware of the possibilities and put some thought into your combos and experiment with what works best for you while still keeping it readable. Try to make sure your fonts flatter each other rather than detract from or compete with one another. And if you’re feeling a bit overwhelmed, you can always contact me for consultation!
Pro tip: Don’t rely on just your own opinion. Make sure you show your designs to a few of your friends and family, and get their feedback! A fresh set of eyes can help catch errors or omissions that will save you time (and even potential embarrassment) later.