How to Choose Fonts and Colors for Your Website
Having the right fonts and colors on your website is an essential part of creating a pleasant user experience. It’s important for users to be able to not only be able to see what’s on your site but to quickly read and recognize the content of your pages. Not only does this make it easier for them to find what they need, but it also improves their overall impression of your site. To help you select just the right color scheme and font for your site, here are my top tips to help make the process easy and on-point. 1) Know Your Branding: This might seem like a no-brainer, but often, it’s easy to get caught up with using a lot of pretty colors that might compliment your brand’s color scheme but aren’t actually part of its palette. Overall, stick with your brand’s colors. As you might have noticed, this website uses mainly a dark-colored background. That is part of the branding for my business, as its color palette includes three shades of gray and two shades of green. The choice for a darker background is easy on the eyes for most, especially those who have vision difficulties. 2) Consider Legibility: When you’re selecting colors to use for text and buttons on your website, use the colors from your brand’s palette that are easy to read. You might want to add your brand’s font to special sections or to the headers of your website. This is a good option, however, you need to be sure that no matter what size the font is, it is legible. Additionally, you don’t want to use some fancy script for the entire body of text on your website. Regardless of what font you select and by the way, your theme will likely have appropriate suggestions for you to help you make a decision; be sure you know how it looks in a variety of sizes and on different devices. The general rule of thumb is to use common-style fonts for your website, such as sans serif fonts – Arial or Helvetica works best as they are easier to read on screens than serif fonts like Times New Roman. 3) Think Contrast: Good contrast is essential when it comes to legibility. If you want something more creative than a white background with black text, consider pairing high-contrasting colors together such as navy blue text against a pale yellow background or white text against a deep purple background instead. One of the tools I use to help me select a great complimentary color to use for fonts on the websites I build is https://webaim.org/resources/contrastchecker – WebAIM’s Contrast Checker. A bonus is, this tool helps your site to be compliant with ADA specifications too. 4) Use Color Strategically: As well as providing good visual appeal, color can also help draw attention to certain areas of your website, such as key information or in the form of buttons. Here again, be sure that you’re using color wisely, especially since you want this information to “pop”. Use a background color in which you’re using a font color that is easy to read. When I created this website, I started with a nearly black background and selected eight different colors that complimented the black color of the background for my text. At that time, I wasn’t certain of what I wanted to use for my brand’s color scheme, so I had lots of room to tinker. After a couple of months, I started to weed out the colors that didn’t exactly read well with the background, in headings, or in the smaller fonts I was using. Similarly, I did the same thing with fonts. I had two different styles that I tested and finally picked one that was easy on the eyes, no matter what its color, size, or boldness. In closing, don’t forget to stay true to your brand, be sure that your website is easy to look at, and easy to read, and don’t be afraid to test, rinse, and repeat until you get just the right feel and combination.
How to Choose Fonts and Colors for Your Website Read More »