If there were such a thing as the Web Developer’s Dictionary, you’d probably find the word typography defined as “The bane of your existence.” It seems silly really. How could something as small and seemingly innocent as a font cause so much turmoil in web design?
Font choices, like everything else in web design, have a significant impact on the overall reception of a website. Tone. Balance. Flow. These are just some of the ways a poor font choice can have a negative effect on your website and throw everything else into disarray.
If you’re tired of relying on default font choices from WordPress themes and want to more effectively design with typography, read on for tips and tools that will enable you to do this.
Your Guide to More Effectively Using Fonts in Web Design
Let’s start by addressing the obvious: there are way too many fonts out there. It seems like it would be more efficient to just use one of the default system fonts, right? While it would definitely be easier, it most likely would not be more effective – and I’ll explain why.
The words written on a website are the (digital) voice of a company or person.
Rely on a font that looks like everyone else’s and your site will get lost in the shuffle.
Use a default font without giving it a second thought and people will see through it.
Pick the wrong color and the relevant and insightful messaging may be too difficult to read.
Choose a font that implies a fun-loving, carefree lifestyle and people might not take your buttoned-up business seriously.
There is a lot at stake in the font choices you make. And because there are thousands of typography options to sift through, it’s easy to feel overwhelmed. Let me assure you, though, once you understand your website’s message, you’ll better be able to answer a number of key questions that will narrow down those choices.
Before you begin shaping and reinforcing your website’s digital identity through the use of typography, keep in mind that this isn’t about finding a single font to use site-wide. As you review the following tips and tools, consider the different types of text – and purposes – that you’ll employ throughout your website, like:
Hero image text
Body text for the internal pages
Functional typography (like for CTAs)
As you can see, the choices you make in typography have far-reaching effects, so it’s important to take this one at a time. Are you ready?
Tips for Narrowing Down Font Choices
Each of the following tips will provide you with guidance on making better, more effective choices in typography.
Tip 1: Co-mingle Your Fonts
When using different fonts on your website, think about how they’ll work together. While too much contrast may not work, you do want a little tension to make the differences between text types striking enough to gain attention. Consider pairing fonts that strike a balance. They should be compatible, but not matching. Striking, but not off-putting.Here are some of
Here are some of common pairing suggestions:
Serif + sans serif
Handwritten + script
Thin font + heavy font
is my go-to resource for font pairings and design inspiration. I could spend hours flicking through this site!
Tip 2: Don’t Overdo It
After going through this exercise, you may find that you’ve got a solid list of 10 or more fonts that will work well for your website. But remember that too much of anything, especially in web design, can end up being bad for the user experience
Keep your ultimate font picks to a minimum. Choose two or three different fonts, and then rely on different stylings to lend variety to different text types around the site.
Tip 3: Match Your Style
Font choice, while important, is probably going to be one of the last ones you make in designing a website. Once you’ve created your site’s aesthetics via colors, images, and white space, you’ll need to find fonts that mirror that same styling.
If you’re not already in the habit of doing so, create a comprehensive, single-page style guide that lays out all your branding choices. This will help you better visualize what story your design choices tell about your brand’s personality, too.
Tip 4: Match Your Voice
Style and voice differ slightly when it comes to design. Style is about the overarching identity. This is why a law office would probably avoid using cursive fonts on their website. Voice, however, is more about the tone of your message.
Does your voice convey a straight-forward, no-nonsense tone? Or does it lend itself to bigger, bolder phrasing? Every font has a built-in tone, so you’ll need to make sure it matches your own.
Tip 5: Treat Your Home Page Fonts Like Images
Thanks to minimalism and parallax styling, home pages are no longer comprised of bulky paragraphs of text.
Concise. Bold. Attractive.
That’s what we’ve all come to expect from home page copy these days. And, because of this, we can now have more fun with styling home page text. That doesn’t mean the tips above should be ignored, but it does mean you can use larger typography, stylized typography, and typography strong enough to add on depth to an otherwise plain, open space.
Tip 6: Make size matter
Font size matters, not just for readability but also in terms of establishing hierarchy. The standard recommendation for the smallest acceptable font size (typically found in body text) is 16 pixels. If you have a font with tight kerning or that’s thinner in style, consider starting with a larger pixel. Then be sure to amplify the header type sizes using that base size for reference.
It’s also important to keep in mind how font size will affect the length of the lines on each page (which can affect readability). Ideally, your font choice should result in between 45 and 75 characters on each line
Tip 7: Be creative, but not too creative
Web design is always an exercise in control, isn’t it? You’ve got one idea in your head, you go a little crazy in laying it out (because everything looks so cool!), and then you need to rein it in. I’d suggest you do the same with fonts. Feel free to be creative in the selection of your first batch of fonts. Then, when it comes time to narrow them down, find a nice blend between conservative and creative.
Stunning drag ’n’ drop themes with Upfront
Drag, scale, position, customize and see every edit you make to your website – in real-time – with our Upfront theme framework for WordPress. Choose from our collection of starter themes and get started customizing your site right away. You know that design you’ve got in your head? You can build it with Upfront.
Each of the following tips will provide you with guidance on how to best use typography within your website’s design.
Tip 8: Make Typography Responsive
When it comes to responsive design, there are a number of typography-related factors you should keep in mind:
Minimum font size (no less than 16 pixels)
Padding around the page and sections
Number of fonts used in a given space
Number of font sizes used in a given space
There’s no need to go searching for “responsive” fonts. What’s important is that you design your website with cross-platform readability in mind. If you’re interested in learning how to set up your CSS for fluid typography or responsive typography settings
, Smashing Magazine has a couple tutorials worth checking out.
Tip 9: Consider the Color
Color is just as important for typography as it is in everything else in web design. When deciding which colors to use in your design, think about the following:
Font colors should align with your color palette.
If you look at this Material Palette picker
, you’ll see their recommendations always include text color. These colors will always be a shade of black for easier readability.
Use color consistently throughout your site. If one hyperlink is light blue, they should all be light blue. This helps visitors learn your visual cues more easily.
Don’t be afraid to use contrasting colors between fonts as well as to contrast the other colors used on the site. This’ll help hold visitors’ attention better.
Use color to demonstrate relationships, create a hierarchy, or draw the eye to the most important messages.
Darker, bolder colors should be used for header text since those colors naturally draw the eye in.
Lighter text can be used in the body, but it should still be heavy enough to read against the background.
Avoid placing text on top of busy images, even if the “busy” part is around the text. Unless you’re positive the readability won’t be disrupted on smaller screens, it’s always safer to stay away from text-on-image design.
Tip 10: Improve Scannability and Readability
According to a recent study about eye movements and reading behaviors on the web, only about 20% of a web page gets read
. So rather than hope your visitors are not the norm, prepare for the worst and improve your copy’s scannability by using header tags (h2, h3, h4, etc.) for sub-headlines. By using bolder font choices in these headers, you’ll make it easier for visitors to skip down to sections they want to read.
Resources to More Efficiently Find and Use Fonts
By now, you should have a good idea of the type of fonts that will work best for you. The next step is to identify those fonts and then put them to use in your site’s design. Here are some tools to get you started:
Easy Google Fonts plugin
Google currently has over 800 fonts available for use. While you could go to their website
and sift through the font choices there, I’d suggest you use the Easy Google Fonts plugin instead. This’ll give you the ability to test out different Google fonts in real time on your website and give you an idea for how they’ll look alongside your design.
If you do want to take some time looking around for the right fonts for your website, I’d recommend you start with Font Squirrel. They may not have as many fonts as some of the other free font providers, but their offerings appear to be more expertly managed. They break out their fonts based on the types that matter most to designers (like serif vs. sans serif), so start here if you want to find your fonts more efficiently.
For some of you, the vision you had for your site’s fonts may not align with what’s readily available online. It may also be that you’d prefer to create a custom font that no one else has. If that’s the case, you can use the free FontStruct font-building tool.
Let’s say you’ve got a photograph or an image containing cool-looking text in it, and you really want to know what font was used. While there is some design software that can help you identify that font, use the Font Matcherator tool instead. Simply upload the image containing the text and let the tool find the closest matching font for you.
I’m a big fan of anything Canva does. Most of their design tools are free to use and they’ve done a pretty job at covering all your bases. So, it’s no surprise that they’d come up with this helpful “typography made easy” font-pairing tool. This is good to use if you’ve found one font that works well for your site, but aren’t sure what to pair alongside it. This also works if you just want to check your fonts’ compatibility.
Once you’ve selected your fonts, the Use Any Font plugin will help you load those fonts into the system and start using them right away. The alternative option
is to add new fonts to your WordPress website using CSS.
So what’s the big lesson to take away from all this? There’s no need to feel intimidated by the thousands of fonts available online. By using best practices and the right tools, it’ll be a lot easier for you to find the perfect fonts and to use them in a way that will impress your visitors.