Fonts & Colors

Web Design Fonts and colors

Fonts and colors. Something that takes less space in our train of thoughts could be, hum, how that pine cone got in the middle of the driveway (laugh people)? But actually, fonts and colors are the foundation of consistent web design. Such are these subtle designs elements that, when chosen with care and executed with intent, make a website (or magazine, or bag of rice, or hand dryer) look appealing; yet when done carelessly or whimsically, can cause the reader (or observer) to feel confused (or appalled).

This brief article will go over basic conceptions of fonts and colors and will list a few of my favorite tools for choosing the best fonts and colors for a project.

Fonts

Choosing the best font essentials boils down to either

personal taste
corporate standard operating procedures

However, there is a science to discerning fonts and with a little knowledge of this science we can make an informed decision on the best font for our project.

Take a look at these two screenshots (of our list of writings) and notice the subtle difference in the fonts.

Fonts and colors: the foundation of consistent web design

Helvetica Neue

Open Sans

Take a look at the "g" in "Designs." See how they are different? This is just a simple comparison of two extremely popular fonts (Helvetica used to be the font that shipped with all Apple computers [until they made their very own San Francisco font]). The fundamental way of choosing the best font for your project is to simply compare them side-by-side. Set a some content to one chosen font and see how you like it. Then set the same content to another chosen font and see how you like it. Generally, designers follow Apple and Google and only have a single font throughout the entire project. However, using two different fonts (one for headings and one for paragraphs) is also acceptable. In fact, using three or even four different fonts could be acceptable. The main goal is to minimize distraction and allow the user to focus on the goal.

There are many font tools

Let's take a look at a few font tools:

Top of the list is Typewolf, a tool in the sense that you can stay on top of the latest typography news from a veteran and in the field. Jeremiah Shoaf's Typewolf site is a very useful resource on current typography trends.
Rightfont macOS app is a great font management tool because it is affordable and fully featured. This is a macOS app that helps manage your fonts. It integrates with Google fonts and Adobe fonts as well.
Hoefler & Co. is an online font manager that has many features and premium fonts only available to subscribers.
There are plenty of free fonts out there but two of my favorite resources are found at a.) Font Squirrel and b.) Awwwards
Typ.io is a database of font pairings presented by contributors for your inspiration.

Colors

The same can be said for colors. The point of personal taste is even more relevant here (because who doesn't like pink background with blue font color?); nonetheless, there is also a subtle skill practiced to have an agreeable and attractive color scheme. With the application of color to elements of a website, common sense bounds us to ensure the user can read the text. This is why we would have a black background with white text or a white background with black text, but never a white background with white text.

Colorful holi festival in India

The easiest way to pick the color scheme for your web project is to use the colors that compose the logo. You can use a tool like Color Juicer and drop the image into the app and the app will show you the colors that are in the image. However, if you don't have logo then you would need to choose the colors for your logo. This is essentially up to you. Nonetheless, there is a complete science on color theory (here's a quick introduction) and how colors make us feel but a few tools to help decide which color is best for your project are found below.

Let's take a look at some free color picker tools:

(Note: There are copious apps and online tools (free and paid) but there are my favorites.)

The Data Color Picker at the Learnui.design is my favorite free color picker tool because the colors look amazing.
The unique color palette generator presented by Colrd is fun and intuitive
Of course there has to be an image color extractor on the list. Again, there are lots of tools similar to this free online color palette generator, presented by Fabrizio Bianchi, including macOS apps like Color Juicer (a.k.a. Vaunt).
Canva offers a beautiful interface for choosing your next colors

This article has addressed the basics of two broad fields of study. I wanted to address these two topics because fonts and colors are the foundation of consistent web design. In other words, the font and color should be consistent throughout the project. Choosing designated fonts and colors may seem time consuming but it's an essential element of successful and consistent design.