Best Practices For Choosing Website and Brand Fonts That Work!
Regardless of Browser, Computer, or Anything Else!
Choosing website and brand fonts for your business can be time-consuming and tricky. You want it to be just right! Right? If you’ve ventured into the world of fonts—you’ve probably at some point selected an awesome font you found (maybe even dropped some money on) only to find that it won’t play nicely on your website—or it looks funny on your friend’s Macbook Pro.
It’s frustrating. But it’s also avoidable—and I’ll be the first to admit the fault was all my own. I, too have spent FAR too many hours obsessing over which font to choose.
Picking fonts is something you probably put a lot of stock in—after all it’s the first impression for your website visitors. But too often—choosing website fonts can be detrimental to progress. And if you can’t find just one or two—you might be inclined to pick several. Don’t give in to this—but more on that later. With that said, choosing solid fonts, sizes, and colors are important in helping make long paragraphs of text readable. But don’t
We’re going to give you some tips in picking fonts and sizes that will save you headaches down the road. We hope that after this post, we’ll have provided you with the confidence to choose fonts that you love—so you can move on and shift your focus to the bigger picture. Sorry, designers I know you’re not happy about this.
In this blog post, we’re going to cover:
Before we get started though, here are a few of our favorites if you’re just looking for a quick fix:
- Montserrat (modern, spaced sans serif)
- Raleway (modern, elegant sans serif)
- Lato (modern, sans serif)
- Playfair Display
- PT Sans (modern, sans serif)
- PT Serif (modern, serif)
- Abel (modern, condensed sans serif)
- Cinzel (roman gothic)
- Pacifico (script)
- Permanent Market (hand-written alternative)
First Things First. How do I pick a font that will work on my website?
Fonts can function differently and even look different based on a number of nebulous variables (your operating system, browser, word processing software, you name it).
Do you want the honest truth? Just steer clear of fonts that are extremely unique. At least for your primary brand and website fonts. Just stick with Google and Adobe webkit fonts—but more on that in a minute. Not only do fonts appear differently on different computers and browsers—but they also tend to have so little importance—compared to your product, service, and especially content—that it doesn’t make any sense spending your time on something that has so little value.
Choose a site font that is web-accessible and supported by most content delivery networks (“CDN”). This will ensure that your fonts load quickly and don’t bog your site down. You don’t want slow pageload times—as that can have a negative impact on your site performance and drop-off rates. Since the effectiveness of your website relies on more on quality of content and experience—and lesson subjective things like fonts. As long as you’re not using comic sans or wingdings.
Choose a widely supported font and then focus on your content. These resources are great and are widely used:
Both of these tools also offer “font pairing” recommendations—perfect for anyone who doesn’t have the first clue about what fonts look good together. Now I want to take just a minute to clarify and provide some context… Really custom fonts still have their place. We’ve all seen Instagram accounts with motivational quotes on them and drooled over them. Custom fonts are perfect for non-standardized (“artsy”) work. And if you’re wiling to take the extra time and spend the effort to implement some text in image form—then please do it. Those fonts add character and especially if you’re an artist or photographer showing off your work—make your brand/logo stand out. But stick with Helvetica, Arial (yuck), or something a little more modern like Raleway or Roboto for your standard website font selections.
Font Types (OTF vs TTF)
You may have heard a graphic designer at your old desk job talking about OTF over TTF—but for most people who haven’t worked in a web, writing, or graphics capacity before these are just two more meaningless acronyms for the storage closet. So let’s break it down. OpenType Fonts (or OTF) are newer and more flexible to work with than their predecessors—TrueType Fonts (you guessed it, TTF). OTF and TTF are font formats as well as the extension used to identify a font file type.
OpenType Fonts were actually based—in part—on the TrueType Font, along with Compact Font Format (CFF) tables leading to widespread adoption by word processing software, editing applications, and web standards.
If you want more on font types, take a look at this article on Differentbetween.net.
Font Styles (serif, sans serif, huh?)
Aside from the file type and format, there are a lot of font style options to choose from. Some of these terms you may not have heard about since the grade school days when we actually believed that every adult used cursive on a daily basis.
- Serif: A serf is a small line, often curved, attached to the end of a stroke of a letter. If your font has curly “feet” on it, it’s a serif—giving a more creative, less rigid feel to your copy.
- Sans Serif: In contrast to serif fonts, sans (a french word meaning “without”) serifs do not have a line or curve attached to line strokes. These fonts give a little more “gothic” and official look to your copy. The font used on our site here is SANS serif!
- MonoType or Monospace Fonts:
Monotype refers to fonts where every single letter takes up the same horizontal space on your screen. They are typically used to display code and are very cool for engineering and software developer "styling".
- Handwritten & Script: Fonts like Lobster provide a fun, and more human, “handwritten” feel. These are great for creatives, artists, and use with your <blockquote> tags.
How do I pick a font size that’s readable? Multiple font sizes?
Choosing balanced font sizes helps make your content easier to consumer and plays a large role in the aesthetic of your site and company. We always recommend choosing slightly larger (14px to 16px) sized font for your paragraph copy and then larger sizes for headings (The largest h1, h2, h3, and so on to the smaller sizes).
The exact choices for your font sizes will depend on how you’re building your website. Particularly, is it responsive? (Does it automatically resize to adjust to desktops, tablets, and phones?) Here are some examples of font sizes for the various headings and paragraph text to get you started.
NOTE: These may vary based on your site’s theme and custom stylings. Otherwise, these are subjective.
Heading Text Sizes
- <h1>: From 48px all the way up to 72px (page titles)
- <h2>: 32–40px
- <h3>: 24–32px
- <h4>: 20–28px
- <h5>: 16–20px
- <h6>: Use you paragraph size
- More: You can have more headings if you wish. We like to keep it simple, even 6 is a lot.
Paragraph (Body) Text Sizes
- <p>: 12–18px (We like to shoot for 14 or 16px)
Use the <span> Tag for Other Text Sizes
When you need to use other sizes—use the
<span> tag. You can provide subtext or additional notes through the span tag with some basic styling—or even commit commonly used styles to your css using helper classes.
For example, take this “Important Note”.
IMPORTANT: This is an important note to all of you readers!
Let’s say we want to make it stand out a little bit. Using our span tag, we’ll bold the note and make it slightly smaller than our standard paragraph text size. The styled span tag might look like this:
<span style="font-weight: bold; font-size: 0.6em;"> NOTE GOES HERE </span>
The result is:
IMPORTANT: This is an important note to all of you readers!
Knowing that fonts display differently on different devices, browsers, and machines—Err slightly on the larger side. This will ensure your content is readable without a magnifying glass. In most cases, 14px to 16px is a good place to start. But you might want to go even larger with specific fonts—or if your pages are main title focused without a lot of paragraph text. You can also use a standard paragraph size on posts only.
The best way to check this is to review your website from multiple device types (i.e. Desktop, laptop, phone, etc.) and on different screen sizes to ensure that the general experience is a positive one. There are a lot of tools to do this, in fact your web browser has Developer Tools that are built right in.
What is the maximum number of fonts I should have?
As a rule, we don’t pick any more than 3 fonts to use on our websites. With various font weights, and character styling options—that offers plenty of flexibility for headings, paragraph text, and more. Just ensure that you have contrast so that your content is easy to read and digest (e.g. bold headings and thin paragraph text)
Why shouldn’t you use more than that? Well to start, you’ve probably heard he saying “less is more.” It will be easier for you to maintain consistency and and less distracting when you offer fewer fonts. Technically though, each time a webpage needs to load a different font, it will make a http or https call for the resource. If you decide to use lots of fonts (and approach other parts of your site with the same mentality) you’ll experience a measurable decrease in speed and performance. And visitors won’t like that.
In summary, don’t let choosing fonts slow you down. Your brand and your content are most important. So pick a font you like, use google fonts, or even the stock font your website or demo is using—and get to work on your content. You can always change fonts later if it becomes a show stopper.
We hope this has been helpful to you when choosing fonts to use on your website and other resources. If you have any feedback, don’t hesitate to leave us a comment below. Thanks!