Day 4: Color Theory and Typography
Color Theory
Color Theory is something that we could spend a whole year teaching. There are professional color consultants who work with brands to determine what colors they should and shouldn't use in their brand.
Making you a color expert is not our goal today. Our goal is to give you the very basics of color theory so that you can take that and start applying it to designs you make in the future. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis on each).
If you're an Arts major, you're likely already an expert in this. Bear with us as we get everyone else caught up to speed!
Warm colors
Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling in the middle (making it a secondary color), which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.
Red
Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that warning labels are often red).
Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism.
Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.
In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.
examples
Orange
Orange is a very vibrant and energetic color. In its muted forms it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general. Orange is also strongly associated with creativity.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
Yellow
Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage and in India it’s a color for merchants.
In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
Cool colors
Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.
Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple).
Because of this, green takes on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.
Green
Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.
Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable.
It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.
Blue
Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues, like navy, are excellent for corporate sites or designs where strength and reliability are important.
Purple
In ancient times, the dyes used for creating purple hues were extracted from snails and were very expensive, so only royals and the very wealthy could afford them.
Purple is a combination of red and blue and takes on some attributes of both. It’s associated with creativity and imagination, too.
In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavender) are considered more romantic.
In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.
Neutral colors
Neutral colors such as black, white, brown, beige, and grey often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.
Typography
Most people think typography is about fonts. It's more than that though, it's expressing language through type, type size, margins, spacing, scales or color. Typography is about organizing information in an objective way. It’s about information and how we transfer this information to the reader. Size, colors and fonts are just tools that help us put this information into the right shape.
Font or typeface?
A typeface is a font family. Many different sizes and weights of fonts make up a typeface. A font is a particular size and weight within a typeface. Weights are the different thicknesses of particular fonts, think bold, semibold, medium, and light.
In the example below, Gotham is the typeface and Gotham Medium Italic is a font.
Serif vs Sans Serif
Serif and Sans Serif are two different categories of typefaces. Serifs are the decorative edges and flourishes on some typefaces such as Times New Roman. Serifs were originally created because they make printed text easier to read in newspapers and books. Serif typefaces are good for print and they are traditional and sometimes even antiquated looking.
Sans Serif typefaces such as Ariel don't have the decorative edges called serifs. Sans Serif typefaces are easier to read on the web. Sans Serif typefaces are modern, friendly, and clean.
Kerning
Kerning is the space between individual letters. When the kerning is too wide it's hard to know which letters are grouped together as individual words. When kerning is too small it makes text completely illegible.
Leading
Leading is the distance between lines of text. When the leading is too small, text is unreadable. When the leading is too large, the lines of text may look unrelated to one another.
Widows
Widows are a word at the end of the paragraph by itself (the word "page" in this example). They cause a distracting shape and people often miss the word when reading. Widows can be fixed by adjusting the size of the column, size of the type, allowing for hyphenation, or changing the text itself.
Alignment
Left-aligned paragraphs are the most conventional, readable, and the alignment you should be using most often. Center-aligned paragraphs are suitable when there is a large block of text, when the text is alone on the page, or for titles. Right-aligned paragraphs are only suitable for small pieces of text and right alignment should not be used regularly. Justified text is when both sides of the paragraph are straight. Justified text is used most commonly in newspapers.
Choosing Fonts
When choosing fonts it is important to think about the purpose of the text and the message you want to get across. Serifs are readable, trustworthy, traditional, classic. They are suited for large bodies of text and print. Sans serifs are contemporary, basic, clear, modern, flexible. They are suited for large and headline text or web. Display fonts have a wide variety, are stylistic and can be difficult to read. They are best for headlines.
Typewolf is a great resource for helping designers choose fonts.
Pairing Fonts
When choosing fonts to pair together it is a good rule of thumb to match the x-heights (the height of the x character) of each font. If the x-heights are unequal as with Merriweather and Georgia, the fonts should not be paired. If the x-heights are equal as with Futura and Baskerville, the fonts can be paired.
Some fonts were made to be paired together. They have equal x-heights and a serif and sans serif version. When you are first starting out as a designer it is easier to use font pairings like these.
That's the basics of typography! We only went over a small part of what some designers dedicate their entire careers to but we hoped you learned a lot about typography and how to choose and pair fonts!
