COLOR &
TYPOGRAPH
Y
Valentine Ibekwe
Color
Color Theory
Color theory is a framework used in art and design to
understand how colors interact, the visual effects of
specific color combinations, and the emotional or
psychological impacts colors can have.
It draws on science, psychology, and aesthetics to guide
how colors are used effectively in visual compositions.
Primary Colors Secondary Colors
Tertiary colors
Created by mixing a primary and a secondary
Color wheel
Hue, Value, and
Saturation
Every color consists of three components:
Hue is the specific color that makes it
different from other colors on the color
wheel.
Value represents a color's relative lightness
or darkness in grayscale. Value is essential to
establish contrast and depth in visual art.
Saturation, also called chroma or intensity,
describes the purity and vividness of a color.
Saturation can vary from fully saturated
(vibrant) to desaturated (grayed).
Color Harmony
Color harmony in design refers to the
balanced and aesthetically pleasing
interaction of colors.
Designers use color harmony to influence
user experiences, create brand identity, and
enhance accessibility.
Color harmony is not only about attractive
colors but their impact on the overall design.
Color Temperature
Color temperature refers to the perceived
warmth or coolness of a color. Warm colors
(reds, yellows) and cool colors (blues,
greens) can dramatically affect the color
harmony in a design. Color temperature can
influence the mood and emotions of the user.
Hue, Value, and
Saturation
Every color consists of three components:
Hue is the specific color that makes it
different from other colors on the color
wheel.
Value represents a color's relative lightness
or darkness in grayscale. Value is essential to
establish contrast and depth in visual art.
Saturation, also called chroma or intensity,
describes the purity and vividness of a color.
Saturation can vary from fully saturated
(vibrant) to desaturated (grayed).
Monocromatic
Analogous
Complementary
Split
Complementary
Triadic
Triadic
How to achieve
color harmony
Find InspirationTake cues from nature, art,
architecture, or even fashion. Review successful Use a Tool or Template: Use color scheme
designs within your industry that achieve color generators or pre-made templates to create
harmony. Assemble these inspirations to spot harmonious color combinations. These can
themes and spark potential color ideas. streamline the creation process and serve as a
source of inspiration.
Select a Dominant Color: This color should align
with crucial aspects such as brand ethos, target Keep It Simple: Creating complex color schemes
user group, or the emotions you want to convey. with many different colors can be tempting. The
This color forms the foundation of your palette. more colors you add, the more complex color
harmony is to achieve. Start with a simple scheme,
Consult the Color Wheel: Use your chosen color and see if it fits your design needs before adding
as a compass to see different color harmonies on more colors.
the color wheel. If red is your selected color, an
analogous harmony will add red-orange and red- Define Color Hierarchy: With your colors
purple to your scheme, while a triadic harmony will identified, assign functional roles to each. The
add yellow and blue. dominant color takes center stage, secondary
colors support, and accent colors highlight
essential elements such as call-to-actions.
How to achieve
color harmony
Implement Contrast: Pair contrasting colors for
important functionalities and contents, ensuring
readability and visual guidance throughout the
interface.
Be Mindful of Cultural Contexts: Keep users'
cultural color-related attitudes and perceptions in
mind. Make sure your chosen palette reads as
intended to your target audience.
Color Psychology
Red: Love, Passion, Strength, Power, Danger, Excitement, Energy.
Orange: Warmth, Creativity, Adventure, Freshness, Happiness, Attraction, Success.
Yellow: Optimism, Cheer, Happiness, Warmth, Caution, Energy, Intellect.
Green: Nature, Growth, Wealth, Luck, Envy, Freshness, Quality.
Blue: Trust, Calm, Sadness, Peace, Loyalty, Depth, Authenticity.
Purple: Royalty, Nobility, Wisdom, Luxury, Imagination, Mystery, Spirituality.
White: Purity, Simplicity, Innocence, Peace, Cleanliness, Emptiness, Goodness.
Black: Sophistication, Formality, Sorrow, Boldness, Elegance, Death, Mystery.
Typography
What is Typography
Typography is the art of arranging letters and text
in a way that makes the copy legible, clear, and
visually appealing to the reader.
It involves font style, appearance, and structure,
which aims to elicit certain emotions and convey
specific messages. In short, typography is what
brings the text to life.
Good typography will establish a strong visual
hierarchy, provide a graphic balance to the
website, and set the product’s overall tone
Typography should guide and inform your users,
optimize readability and accessibility, and ensure
an excellent user experience.
Fonts & Typefaces
A typeface is a design style that
comprises a myriad of characters of
varying sizes and weight, whereas a
font is a graphical representation of
a text character.
Put simply, a typeface is a family of
related fonts, while fonts refer to
the weights, widths, and styles that
constitute a typeface.
Types of Typography
Serif
A serif is a small shape or projection
that appears at the beginning or
end of a stroke on a letter.
Typefaces with serifs are called serif
typefaces.
San Serifs
A typeface without serifs is called a
sans serif typeface, from the French
word “sans” that means "without."
Sans serifs can be classified as one
of the following:
Grotesque: Low contrast between
thick and thin strokes, vertical or no
observable stress
Humanist: Medium contrast
between thick and thin strokes,
slanted stress
Geometric: Low contrast between
thick and thin strokes, with vertical
stress, and circular round forms
Monospace
Monospace typefaces display all
characters with the same width.
Handwriting
Handwriting typefaces are
unconventional with a
natural, handwritten feel.
These typically are used as
H1 - H6 in your type scale.
They come in the following
forms:
Black letter: High contrast,
narrow, with straight lines
and angular curves
Script: Replication of
1. UnifrakturMaguntia, black
calligraphic styles of writing
letter
(more formal) 2. Dancing Script, script
3. Indie Flower, handwriting
Handwriting: Replication of
handwriting (less formal)
Display
A miscellaneous category for
all classification types that
are only suitable for use at
large point sizes.
1. UnifrakturMaguntia, black
letter
2. Dancing Script, script
3. Indie Flower, handwriting
