Ever find yourself staring at a fonts dropdown menu realizing you have no clue which font you should use? Maybe you have opened a color picker and found it discouraging to move the small circle around the screen to pick the perfect color out of 10 million options.
The mental block you get when trying to decide which fonts and colors to use is something everyone experiences. Even professional designers find themselves in a quandary about which fonts or colors are best to utilize.
What creates this design obstacle? Two things:
- A lack of font options to choose from
- Too many colors to pick from
This post will cover tools and tactics to preview and find the right fonts, as well as paring down color for the best fit.
Let’s begin with fonts. Get excited!
When choosing a font for a project, there are two main things missing from typical menus that you should seek out:
- An easy way to view font options in action before choosing one.
- Extensive font libraries.
View fonts in action
By visualizing various fonts in action in the context of a page, you can start to see which combination of fonts works best for individual projects. For example, it’s easier to see if a font looks great in a large format but not as great in a smaller format. It’s also helpful to see how it responds to being mixed with other fonts in different arrangements.
One of the best sites for viewing fonts in action is FontShop, which allows you to view as many fonts as you want in a single page at various sizes and weights (thickness of the characters). This is perfect for coming up with a quick sample of how things will look before you officially decide on a font and / or ultimately purchase one.
Extensive font libraries
With the lack of fonts available on your computer, you need a way to flesh out your collection with various new unique fonts. What better way to do this than with free font libraries, such as Google’s Fonts? It offers up to 650 various fonts to choose from and expand your collection.
Awwwards has also published an extensive list of 100 free fonts for you to download that range from the simplest of font styles to more complex and fancily stylized fonts.
If you are willing to pay a fee for a new font that fits your design, there are even more font libraries available. Adobe’s TypeKit has a lot of font styles to sort through along with a great method of previewing them. Other alternatives with similar preview options include FontFont, H&CO, and Fontspring.
At the end of the day there are a lot more options available for fonts than our computers lead us to believe.
Choosing the right font
Choosing fonts to use all comes down to the elements on your page. Bolder fonts are best for calling out important text that should be read first by users. Lighter fonts are best for longer text, descriptions, or sub-titles. As the font gets thicker for various elements, those fonts are also usually larger in overall size.
A basic set of fonts that you would see in a design includes a title, sub-title, sub-sub-title, paragraph, and text for things like navigation items or buttons. The first four font groupings descend in sizing in order to show the informational hierarchy on the page (see Fig. 1)
Once the fonts that are applied to titles and paragraphs are figured out, it’s best to decide on a font for other elements on the page that are used with interactions. Buttons, for example, should have a distinct font style that is easy to read when people interact with it. If the button has a bright or dark color, it’s good to invert the text color to a more lighter color or white. (see Fig. 2)
As more elements are added to the page, it will be easier to decide which font style a specific text element should fall into and whether or not you need to add another font style category.
Unlike choosing fonts, luckily, you don’t have to scour the internet for free colors or to find tools that help you discover great combinations. However, colors are daunting for a whole different reason – There are literally 10 million colors visible to the human eye from which you can choose.
The problem with colors does not lie in being locked behind a paywall or needing to seek out colors themselves – The problem is sorting through those millions of colors to find the right pairing.
Technically, a matching of two colors has a little less than 50 billion possible combinations, which could take a century or more to asses all combinations. Thankfully there are tools out there that pair color combinations in a way that it is easy to get a sense for how well they complement or contrast each other.
Coolors is a website that allows you to quickly peruse through various color combinations by generating combinations that work well together. By clicking the space bar and locking the colors that you like, you can generate the optimal palette in no time.
What if you find colors you like in another image or website and you want to duplicate it into your design?
Check out these color picker apps that allow you to save that color’s hex code or RGB value. For Mac use Couleurs, which allows you to choose from anything on the screen; for PC use Chrome’s Eye Dropper extension, which allows you to choose anything from a browser.
Choosing the right color
When thinking about which colors to use, web designers usually start with picking one or two base colors. These base colors are typically used for elements on a page that should be called out to the user on a regular basis for interaction and viewing (Fig. 1).
The base colors also provide inspiration for the rest of the color palette by allowing for more shades of those base colors. A green, for example, could have a darker shade or lighter shade to complement it. The same can be applied to a second blue base color. These shades are then applied to elements in a design that are not as important for the audience to interact with or look at (Fig. 2).
After adding base colors and complementing shades, it’s best to add more neutral colors for elements of a design that don’t need to be called out as much. Typically a dark grey, light grey, or a grey with a slight tint from your base color works best (Fig. 3). Neutral colors are then applied to things like the page background, dividers for content, lengthy text, and other elements that indicate the structure of a design.
The last color that most designers add to a color palette is a brighter color that could act as a way of calling out elements on a page or adding a slight decorative detail (Fig. 3). This color is not used as much as the primary, secondary, and neutral colors – Otherwise, the design will have too many colors trying to get your audience’s attention and they will lose track of what’s important on the page.
This method of building a color palette can serve as a great start to a new design, however, a palette can always be essentially anything the designer wants. Color palettes could have no dark colors, no light colors, or only neutral pastel colors. In the end, it’s best to make sure the colors work for the elements you have designed for. As time goes on you will notice sometimes a color palette will also change or expand. (Fig. 4)
Don’t forget, color blindness is common!
Color is one of those things that a lot of us take for granted, especially considering that 1 of 200 women and 1 of 12 men have color blindness. When someone is color blind, it is possible for that individual to see red and green as the same color (or blue-yellow color blindness as another popular color ambiguity).
What we see as red and green, they see as a muddy brownish color for both colors. Luckily, there is a way to help account for this 8% of men and .5% of women, with a few color adjustments. Thanks to Sim Daltonism, you can make these adjustments easily by previewing your computer screen through the eyes of someone with color blindness. For PC users, check out Color Oracle to get the same color blindness simulation.
Now that you know the best sites to consult for help choosing fonts and complementary colors, it’s time for you to get started with your own designs. Try new things, be innovative, and most importantly, have fun with it!