Colors and Typography

What you need to know

Inkbot Design

Published in

Inkbot Design

10 min readMar 1, 2017

Creating a great website is not just about delivering high-quality content and making it look good.

There are many other aspects that play an equally important part in making a website well-liked by the masses.

When someone visits your site, they are more likely to emotionally bond with your website in a positive or negative way.

And, whether people form a positive emotion or a negative one lies entirely in your hands.

Put simply; a good website design is the one that can make visitors feel comfortable whenever they visit the site.

Furthermore, such a design will help in creating a bond with your audience that will assist your organisation to thrive in the long-run, beyond short-term gains.

Fortunately, plenty of techniques are produced year after year to guide designers create visuals that have a very profound impact on the psychology of the viewers.

These types of techniques mainly focus on understanding about the design elements — and how their use — influence the user experience while browsing a website.

The most important design features that help in making the right impression on your audience are colors and typography.

Implementing color schemes and elements of typography in the right way can dramatically affect how a visitor feels about your site.

In fact, the combination of both colors and typography helps add a whimsical touch to the website design that not only quickly attracts viewers’ attention but also stimulate visitors to make quick decisions — that you want them to take.

In a nutshell, colors and typography are two of the most important key elements that play a crucial role in determining the success and failure of a website.

As a matter of fact, typography and colors used in a site are what makes the first impression.

This clearly suggests that to ensure website success, you need to make the best use of colors and typography.

Through this post, I’ll help you understand a few guidelines you must take into account, so as to make use of the right color and typographic choices for your website.

Guidelines For Using Colors Effectively

According to internationally renowned person-centered design expert and environmental physiologist, Sally Augustin:

The design of the spaces that we’re in and the objects that surround us matter a lot. They profoundly influence our lives. Colors, shapes, textures, scents, sounds, ceiling heights, and other features of our world have powerful psychological effects on us as human beings.

Based on an interview with Augustin conducted in Forbes, it was concluded that color affects our emotions and impact our mood.
However, remember that the psychological impact of color can vary from one person to the other. As per the “Emotional Reactions to Color” write-up by Kathy Lamancusa:

Blue is the top choice for 35% of Americans, followed by green (16%), purple (10%) and red (9%).

Besides, as you may have observed, today’s online viewers have limited attention spans.

In order to grab their attention, you need to use elements that can help you stand apart from the crowd from other sites competing for their attention.

You can achieve such an objective by making use of the right colors.

For example, the Quicksprout website red color bar placed at the top of the page generates 11 percent of new leads:

The above theories clearly suggest the significant role that colors play in design.

Before getting started with the process of using color in your website design, it is vital for you to have enough knowledge about certain topics, including tints, hues, saturation, shades, types of colour schemes (like triad, monochromatic, compound, etc.), and tones, to name a few.

Here are some basic generalities that you should consider as a designer if you want to make use of the right color schemes in your design:

Use a Neutral Color Palette

There are so many color combinations, among which you need to choose one for the text base and another one for the website background.

But, experts suggest that you should begin working with the easiest color combination first, using a neutral color for the background and a dark color for the text.

You can use dark colored text on a white background or vice versa.

This is, in fact, one of the most popular and widely used color combination that you’ll find on most of the web designs.

For example, the search engine giant Google makes use of dark color text on a plain white background:

Using such a kind of color combination ensures excellent readability.

Needless to say, the easier the text is to read, the more users will enjoy reading your content which in turn will increase the engagement rate.

Use One Color For The Purpose of Highlighting

It’s easy to become overwhelmed with a plethora of choices available in the colour palette, especially when it comes to highlighting the most prominent parts of a website design, such as menus, headlines, links, buttons, etc.

However, increasing the number of color combinations will only complicate the design, making it difficult for you to handle all those colors.

So, to manage the design in a smooth manner, it is better to use only one single color on the top of your dark color used for the text base.

You can use any color for the highlighting purpose like blue, red or whatever you like.

The biggest advantage of using a highlighting color is that it will help you stand from the crowd.

And most importantly, it helps in bringing the attention of viewers to the most relevant section of your site and attract new leads.

For example, the H&R website uses ‘green’ color to highlight the search box, headings and many other critical areas of the site:

Related Article: Typography Quotes

Select Variations For Your Highlight Color

The next step to choosing the desired highlight color is to choose different variations of things like buttons, gradients, excerpts, borders and other key areas of your site.

But, keep in mind to choose variations of the highlight color you’ve chosen, to avoid any confusion.

Adding variations to your highlight color will help in specifying about the different statuses while making changes to any website field, and most importantly, the variations can be used to present auxiliary information in data charts or any other source.

Different variations of the highlight color are ideal to be used for adding hover effects to button, as shown in the image below:

Guidelines For Using Effective Typography

Apart from colors, another design element that creates emotional responses.

You can even consider typography as a tool that adds emotion to the printed material, making it readable and visually appealing.

It helps embed your brand’s message to your readers’ mind, and thus makes it easier for them to understand the information presented on your website.

Essentially, typography is an art that helps in arranging the text in a manner that makes it legible, easy to read and to appeal to the viewers’ eyes.

A good typographic design is one that makes the right use of the typefaces, line length, point size, tracking, color, kerning, leading and other design elements.

An ideal typographic design pattern is one that not only makes the text visually appealing but also easier for the viewers to read.

Creating an effective typography in a content heavy website plays a crucial role in helping viewers understand long lines of text — without stressing their eyes.
Below are some basic guidelines that can help you create an impactful typography.

Get your hands on the Basics

To master the art of typography, first and foremost, you must thoroughly learn the basic principles of typography that are readily implemented by the web designers.

In addition to this, you must familiarise yourself with things, like general standards, commonly used jargon, and measurements — that are followed by other designers while working with typography.

Moreover, you can even find plenty of resources online in the form of online tutorials or blogs to gain knowledge about creating effective typography.

For instance, the I Love Typography blog helps provide information about how you can create good type and typography.

Deal Cautiously with Kerning!

You might have heard of the proverb, “even little things count.” The same is true in the case of setting a type.

There are two smaller adjustments that you need to make the type to make it more visually pleasing, such as Kerning.

Many beginners often get confused and think kerning and tracking as the same typographical terms.

But that is a wrong notion.

Kerning is, basically, the process of adjusting the space in between individual characters or two letters of the same font.

Tracking is quite similar to kerning, but it is about applying uniform space to a block of text instead of individual characters or letters.

Most of the designers often tend to overlook the kerning issues, since they find them subtle.

But, keep in mind that these problems can become complicated when you need to deal with web fonts.

In order to resolve kerning issues, make sure that the space between the letter is visually consistent.

Avoid Using Too Many Typefaces and Styles

While there are truckloads of fonts to choose from, however, it is advised that you must restrict the implementation of too many different typefaces and styles.

You might come across some new font and style, it certainly might look pretty impressive, but before using it in your design just think…

“Does the selected font type fits well with your website, or it is overcomplicating the design?”

Many experts consider that any piece of design mustn’t contain (nor it requires) more than two fonts: one for your headings and the other font for the body copy.

Using many different typefaces and styles make the design look cluttered and messy, and makes reading the text difficult for the readers.

Furthermore, keeping a check on the font sizes is also considered as a good practice.

That’s because font-size is critical for setting readable text. While the most commonly used and popular font sizes for the headings range from 18 to 29 pixels, the effective font size for the body copy is between 12 and 14 pixels.

Make Proper Use of White Space

The “white space”, which is also referred to as the “negative space” epitomises the space between the elements of a web page.

The majority of designers overlooks adding white space in their designs. But, leveraging it can help keep the content in harmony, making the design look clutter-free and pleasing to the eye.

Basically, whenever someone looks at the design with well-composed space, the viewer can efficiently evaluate the design, making it easier for them to find the information and process it in discrete chunks.

However, you need to make sure that the whitespace is defined at the right place and in the right amount. For example, look at the image below for understanding how you can use negative space in a better way:

As you can see in this picture, the photo fits well with the composition; there is enough room between the portrait and the type placed on the right side.

Furthermore, the logo is placed at the bottom on the right, which gives each element of the design plenty of room.

The type quickly captures the attention compared to imagery, which is important to bring users’ attention towards your message.

Putting It All Together!

The right use of colors and typographic choices in your website design can help in creating a positive first impression on your target audience.

While using right color combinations helps entice your visitors, typography makes it easy for the viewers to read the content.

Not focusing on any one of these aspects will only help you win half the battle.

Simply put, to make your website successful, you must pay due to importance to using the right colors and typographic components (such as font sizes and typefaces).

Though this post might not cover all of the key considerations about adding color and typographic elements in your design, it will help you learn about the most important aspects to create a winning website design.

Author Bio: Lucie Kruger is an application developer working with Mobiers Ltd, which is the leading mobile application development company. She provides concrete information on latest information on mobile technologies like iOS or Android development processes.

If you wish to discuss how we can develop your brand or provide graphic design for your product or business, email us at: hello@inkbotdesign.com

Inkbot Design is a Creative Branding Agency that is passionate about effective Graphic Design, Brand Identity, Logos and Web Design.

T: @inkbotdesign F: /inkbotdesign