Five Color & Font Tools We Use Daily for Web Design

Keeping up with modern web design trends can be… exhausting. Even for professionals. Between the countless color combinations and fonts that already exist and the thousands more that gain popularity in the design space every year, it's pretty much impossible to stay on top of everything on our own. But, luckily, we don’t have to.

The trick isn’t to memorize hundreds of thousands of different font styles and color palettes on your own, but rather to use the internet to help you sort through them. Because of how layered web design is these days, people have built a bunch of websites and programs to help designers keep track of all the changing color and font trends. And that’s what we want to talk about today, our five favorite font and color tools we use nearly every day, how we use them, and more importantly, what makes them so valuable.

1. WhatTheFont

A screenshot of the WhatTheFont tool on MyFonts.

WhatTheFont is a tool from MyFonts, a digital library that houses a collection of over 270,000 fonts you can browse through, purchase, and use for your projects. They’re constantly adding new, fun fonts to their library, and WhatTheFont lets you test them before downloading. 

But for as great as the MyFonts library is, the WhatTheFont tool is even better. WhatTheFont is a font finder which can identify the font (or similar-looking fonts) in an image you submit. This tool has come in handy for us more times than we can count when we like the look of a font but don’t know it's official name.

A new, exciting font can be the difference between a page that pops and one with a boring wall of text that makes people lose focus and interest. We use WhatTheFont daily to find fonts that match our client’s brand voice and stand apart from the dull fonts in those dreaded text walls.

2. Coolors

A randomly-generated, customizable color palette from Coolors.

Coolors creates eye-catching color palettes within seconds based on your input. It starts by giving you one of their preset palettes at random, and if you like one of the colors, you can save it to your custom palette. Coolors then randomly produces a new palette for you to pick colors from, and it continues until you’ve found every color you want for your finalized personal palette. 

You can also ask Coolors to produce a palette by uploading an image or graphic and asking it to select the most prominent colors in the picture.

Coolors also has over one million preset color palettes to explore, and we love how easy they are to sort through. You can explore their countless options by arranging them by your preferred color or style. For example, if you need a palette that looks and feels like a throwback, just sort them in the ‘Explore’ tab by the ‘Vintage’ style and comb through dozens of eye-catching options for inspiration.

3. Eye Dropper Chrome Extension

The banner image on Google Chrome’s Eye Dropper extension home page.

Google Chrome’s Eye Dropper web extension lets you identify and copy any color from any page you’re browsing on the search engine. All you have to do is right-click on the color you like, and the Eye Dropper will display the color code and save it to your library. 

The Eye Dropper is great because it removes the guesswork and trial and error from finding the perfect color. Rather than applying similar shades to your website hoping to find the right match, the Eye Dropper identifies the exact color code you’re looking for.

4. Google Fonts

A screenshot of four font options from Google Fonts.

Google Fonts is an open-source catalog with thousands of fonts and icons. Though it doesn’t have the “font finder” tool or vast selection we love about WhatTheFont, Google Fonts does separate itself in a few crucial ways.

For starters, even though Google Fonts has a slimmer selection than WhatTheFont, all of Google’s fonts are free and available to download within seconds. Additionally, most of them come with detailed analytics to see how many people have used the font and what country most users are from.

Google Fonts is also more dedicated to educating its users than other font libraries. If you want to learn more about Google Fonts or typography in general, they have “FAQ” and “Knowledge” sections that will guide you through the basics.

Another small but impactful detail about Google Fonts is that all their available downloads are in the smallest possible files. That way, when you use them on your website, they won’t slow down your pages’ load times. 

5. Typewolf

The banner image on Typewolf’s home page.

Typewolf is another font library we love for more reasons than its font selection. Though it does have a nice, constantly-growing selection of free fonts, Typewolf strives to be more of a “typography hub” with learning resources, guides, and the occasional blog post for designers. 

One of Typewolf’s most helpful features is its typography checklist, which is a visual guide that walks you through some basic rules of typography that are easy to forget. Typewolf also has free and for-cost typography guides for more advanced lessons.

But our favorite Typewolf features are the Lookbooks. Finding fonts that pair well together and with specific styles can take hours, but Typewolf’s lookbooks take a lot of the research time out of the equation. Each book focuses on one typography style and gives you a curated palette of different fonts that match that style. That way, you can compare all kinds of fonts from a bunch of font libraries to find unique pairings that work well together.

There are plenty of color and font tools across the internet you can use to help with your web design, but these five have proven to be the most helpful for us. Give them a try for yourself and see what you think!

Previous
Previous

Everything You Need to Know About Squarespace Courses

Next
Next

8 Cute Fidgets For Your Office