Colors & Fonts
Don’t delay, get your FREE copy of this eBook before it goes away!
Weekly tips, strategy, and advice for building & leveraging your website to maximize your business.
In this episode of Websites Made Simple Podcast I am going to provide you with some simple tips and education around fonts and colors.
Specifically, how to pair fonts together for the best design on your website and how to select a good color scheme not only for your site but for your entire brand.
Plus, as a special and limited time offer, I am giving away my Font and Color Guide eBook for FREE!
You are not going to want to miss getting this 20+ page guide with beautiful examples on color palette, font pairings, plus all the color codes for each.
Let’s start with the basics and cover some important definitions. Font vs. Typeface.
Typeface is a collective name for a family of related fonts (e.g. Times New Roman).
Font refers to weights, widths, and styles that constitute a typeface (e.g. Times New Roman Italic, Bold).
Most people use typeface and font interchangeably, and that is not correct. In most cases when people say font, they really mean typeface. Easy to confuse and it really started with the rise in digital “fonts” and that computer operating systems call them fonts when in fact they are typefaces.
Here are some further examples of font naming conventions:
Weights: light, book, medium, demi, bold, extra bold
Styles: Italic, oblique (a slanted roman), small caps
Effects: inline, outline, shadow, fill, bevel
Let’s take a quick view of typefaces to keep things simple. There are three primary classifications: Serif, Sans-Serif, and Script.
Serif: these are called “serifs” in reference to the small lines that are attached to the main strokes within each character. Times New Roman is a serif typeface.
Sans-Serif: meaning “without” serifs or in other words, these do not contain the small serif details on each character. Roboto is a sans-serif typeface.
Scripts: are based upon handwriting and are considered more fluid letterforms. Brush Script is a script typeface.
There are many sub-types of each but for now, just understand the difference between these three categories. There are no hard rules when you should use each one, but generally, you will find many websites that will use one serif and one sans-serif. One is typically reserved for headings while the other is used for the main body text. Utilizing this strategy presents a great visual and clear distinction between your main body message and the headings you want to grab your customer’s attention.
If you decide to use a script typeface, please use sparingly. They can generally be harder to read especially at smaller scales like mobile devices.
Lastly, if you find that you are in love with just one particular typeface, don’t be afraid to use it for both headings and body. Just make sure it comes in a variety of weights and styles so you can break up your headings.
Similar to fonts, let’s start with some definitions to clear up the different color codes.
CMYK (cyan, magenta, yellow, black) is primarily used in printing and ideal for flyers, brochures, and other marketing mailers. CMYK color is considered a four-color process is derived from a combination of tiny overlapping little dots made up of each of the four colors.
RGB (red, green, blue) is the most commonly used color profile for computers, televisions, and mobile devices. RGB is the process of rendering combinations of the three colors on screen.
HEX (hexadecimal color) is used in web design and is expressed by a six digit combination of numbers and letters defined by its mix of red, green, and blue (RGB). Basically a hex code is an abreviated version for its RGB values…sortof.
Colors and Emotions are connected.
Colors can make us feel happy, sad, energized, or relaxed. It’s important to understand the psychological effects color plays on the average person…your customer. Here is a short guide to help you understand the connection between color and emotion.
Red: passion, aggressive, important. Effective in triggering strong emotions and urgency. Examples include Target and Coca Cola
Orange: playful, energetic, cheap. Orange is a color that inspires action. Sometimes viewed best for impulse shoppers. Examples include Amazon and Harley Davidson
Yellow: happy, friendly, warning. Can grab attention quickly but can also strain the eye. Use sparingly on your website. Examples include Best Buy and National Geographic
Green: natural, stable, prosperous. The easiest color on the eye to process so it can be seen as relaxing. Examples include Animal Planet and Whole Foods.
Blue: trustworthy, inviting, serene. Often used by brands to convey trust and security. Blue is referred to as the number one choice for both men and women. Examples include IBM and American Express
Purple: royalty, success, mysterious. Can have a calming effect on people and often used in beauty and “perceived” high-end products. Examples include FedEx and Cadbury
Pink: feminine, sweetness, fertility. Used often to promote products and services to women and young girls. Examples include Barbie and Victoria’s Secret
When considering the colors to use, first think about your ideal customers. Do you plan to help men, women, or both?
Yes, different colors appeal to different types of people, but generally, men and women prefer different colors. Studies show that women prefer softer colors while men prefer brighter colors. In addition, men have a higher tolerance to achromatic colors (those with no hue like black, white, and gray).
Knowing this you can begin to make an informed decision on your dominant color. Once you have your dominant color you will want to use this strategically on your website. Reserve it for those areas you want your customers to pay attention to or to take action…like your buttons or Call to Action (CTA).
Other areas to consider is your navigation menu and headings.
Moving on, let’s consider choosing an accent color. Worried about how to choose the right accent color without having a Ph.D. in color theory? Nah. There are wonderful free tools that will do the work for you. I recommend Adobe Color CC. Using this tool you can play around with different harmony rules like analogous or triad to get accent colors.
Additional features include finding gradients or even uploading an image and letting the tool select the best colors. Now using those accent colors on your website…try to limit to just one or two. More than that can be confusing and distracting. Use the accent colors to highlight secondary information like subtitles, background colors, and color changes when a user mouses over the element.
I am a proud affiliate of some of these tools. That means if you click the links and then make a purchase of those products, I will earn a small commission. Affiliate links absolutely do not cost you anything additional.
All of the affiliate links are clearly marked for your benefit. Please know that I recommend these products and chose to be an affiliate because I truly believe in them, use them, and know they work.
Created for the non-techie entrepreneur, John Dockins reveals all of his website and online business strategies, income sources and killer marketing tips so that you can be ahead of the pack with your website and online business.
Self proclaimed “coffee addict”, you’ll learn how to build authority online using content management systems like WordPress, email marketing, search engine optimization, content marketing, and much more so that you can create something amazing without burning yourself out.
Websites Made Simple Podcast
John is a family man who also owns his own web design agency and has won several design awards for his work.
Don’t delay, get your FREE copy of this eBook before it goes away!