“You can’t choose your family, but you can choose your font family.”
– Wix writer
Choosing your font (or font family) for your website may not be something you’ve thought about, but you should – it can actually be a bit complicated. 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. If your logo has sans-serif font, do you want to use a sans-serif font throughout your site, or a serif font? And what if you want to use some funky font nobody else has used? Will it even show up properly on someone else’s computer?
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 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 is generally considered to have 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.
*Extra tip: Script fonts can also be difficult for sign shops to replicate into printed vinyl. They can also be more difficult to apply as cut vinyl to a window display – lots of extra swirly bits to line up.
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.
Accessibility
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, gidgets and gadgets 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, isolate a small section into a blockquote, or even play with s p a c i n g to accent certain words. Just bear in mind that search engines won’t pick up on your crafty typing and might not recognize the word “spacing” in that way.
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.
Web Safe Fonts vs Custom Fonts
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. This can vary between Mac and Win users.
What if a designer wants to create a design with a custom or lesser-known font that’s not locally installed? This might be something you just designed yourself, or one that’s available on Typography.com, Google Fonts, Fontsquirrel, Adobe Typekit etc.
If your visitor doesn’t have that same font on their computer, they will see something else!
If a custom font (or other non-web safe font) isn’t installed on your viewer’s computer, they will see something different. The good news is your web design can suggest what that something else would be. Web designers can set styles to use available fonts or we can distribute fonts along with the site. There are various ways to do that but they can slow down page loading time, so keep an eye on your page performance.
And don’t get me started on the multitude of problems that designing for specific browsers can incur – talking about you, Internet Explorer. (If you’d like to geek out a bit more, here’s an article about tricky font support for IE.)
How to Find (and Use) Web Safe Fonts
Fonts vary from computer to computer, so the safest best is to always stick with “web safe” fonts. Web Safe and Web Font Family with HTML and CSS code. lists many “safe” fonts – and the percentage of Win and Mac machines that have them.
If I look at that list it tells me that while most Mac users have Helvetica, most Win users do not. So if I want to use Helvetica Neue I might set up my style as follows:
body {font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;}
If a user viewing the site has Helvetica Neue that is what they will see, but if they don’t then it will show Helvetica. Without Helvetica, then it will show Arial. And if they don’t have that, then it will use a sans-serif font that they do have. It’s a good idea to include at least one font common to Macs and one common to Windows in that list, to make sure most scenarios were covered.
If I want to go beyond Web safe fonts, say for headings, I can use a service that will include the fonts so the browser can render them. Typekit (paid service) and Google Fonts are two good options for this.
Web Fonts
When a designer wants to use one of these custom fonts, they can use a web font. This is a font that is 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.
Below is an example of Google font (you may not 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.