Introduction to Color Theory and Typography

Introduction to Color Theory and Typography

Color theory

Color theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. Color theory encompasses a multitude of definitions, concepts, and design applications – enough to fill several encyclopedias.

Color Wheel

The color wheel is a circle with different colored sectors used to show the relationship between color. It helps in choosing colors while designing anything.Color Wheel Showing ALl the Primary, Secondary and Tertiary Colors

Color Wheel starts off with 3 primary colors. They are:

  1. Red
  2. Blue
  3. Yellow

By mixing the primary colors we get secondary colors. They are:

  1. Purple ( Red + Blue)
  2. Green (Blue + Yellow)
  3. Orange (Yellow + Red)

Finally, by mixing primary and secondary colors, we get the tertiary colors. They are:

  1. Red-Orange
  2. Red-Purple
  3. Blue-Purple
  4. Blue-Green
  5. Yellow-Green
  6. Yellow-Orange

Basic Color Theory terms

  • Hue
    Hue is basically the name of the color. For example, Red, Blue, Orange etc..
  • Saturation
    Saturation is the intensity or purity of a hue. High Saturation means the color is bright and desaturation means the color looks washed out or greyed out.
  • Value
    The degree of lightness or darkness of a hue is the value of the color.
  • Shade
    Shade is a color produced by adding black to a hue.
  • Tint
    Tint is a color produced by adding white to a hue.
  • Tone
    Tone is a color produced by adding grey to a hue.
  • Color Temperatures
    Colors can have different psychological effects on a human being. There are basically two types of color in terms of psychological effects. They are regarded as temperatures. They are as follows:

    • Warm Colors
      Warm colors appear bright, cheerful and happy usually. The common warm colors in the color wheel are red, yellow, and orange.
    • Cool Colors
      Cool colors appear dark, mysterious and gloomy. The common cool colors in the color wheel are blue, green, and purple.

The psychological effect is not always effective. It depends on how you present the colors.

Common types of Color Scheme

  1. Monochromatic scheme
    In this scheme, we use one hue and add white, black or grey to create tints, tones, and shades.
  2. Complementary colors
    color wheel showing complimentary scheme

    Complimentary Scheme

    In this scheme, we choose the colors that are across from each other on the color wheel. The most common pairs are

    1. Red and Green
    2. Purple and Yellow
    3. Orange and Blue

This scheme can create a great contrast and visual interest. Colors can overpower each other, so keep it in a balance.

  1. Analogous Scheme
    In this scheme, we use 2-4 colors next to each other on the color wheel.
  2. Triadic Scheme
    In this scheme, we use 3 colors that are evenly spaced around the color wheel.
  3. Split complementary scheme
    In this scheme, we choose a base color and the two colors adjacent to its complementary color.
  4. Tetradic (rectangle) scheme
    In this scheme, we use four colors arranged into two complementary pairs.
  5. Square scheme
    In this scheme, we use four complementary colors evenly spaced around the color wheel.
     Color Wheel Scheme showing all 5 color schemes

Typography

Typography is the style or appearance of text. It is the art of working with text. We only need to know a little typography to make a big difference while typing or designing anything.

Common types of Font

  1. Serif
    Serif has small lines attached to the end of a stroke in a letter or symbol. It has a more classical look. Hence, it is a good choice for traditional projects.
    Serif written in Cambria font
  2. Sans serif
    Sans Serif doesn’t have small lines attached to the end of a stroke in a letter or symbol. It looks more clean and modern. It is easy to read on computer screens.Sans Serif written in Calibri (body) font
  3. Display fonts
    Display fonts have a decorative nature. Hence it is best for small amounts of text like title and headers and more graphic heavy designs. It comes in many different styles like script, blackletter, all caps, and plain fancy.

How to use Fonts

  • Fonts can come across as casual, neutral, exotic or graphic. So think about what you are writing and pick a font that fits.
  • Less number of fonts used is always better. It is best to limit yourself to 1 or 2 fonts per project.
  • If you need more contrast try increasing size, making the text bold, italic or underline. This is a good practice of making combinations that work.
  • Opposite Fonts attract each other. You can use font styles that are different but complementary like sans-serif and serif, short with tall, decorative with simple, bold and without bold, and so much more.

Terms of Typography

  • Hierarchy
    Hierarchy is used to guide the reader’s eye to whatever is most important. Where you want the readers to begin and where to go next by creating a certain level of emphasis. Establishing hierarchy is simple. The text you want the readers to notice first, make them stand out. You can do it by making them larger, bolder, using a different font or just different in some way. Remember to keep it simple.
  • Leading
    Leading is the space between lines of text. Basically leading refers to line spacing. If you don’t know how much to use, do not fear. The default is usually fine. Your goal should be to make the text comfortable to read as much as possible. Don’t make the line spacing too little or too much, it will make it unpleasant to the reader.
  • Tracking
    Tracking is the overall space between characters. It is basically known as character spacing. It can help to fix fonts that are poorly spaced. Tracking can also help to create artistic effects.
  • Kerning
    Kerning is the space between specific characters. It varies over the course of the words because each letter fits differently. Some fonts have bad kerning making it look like letters are improperly spaced. Don’t use such fonts. Keep it simple and basic.

References

  1. https://www.youtube.com/watch?v=26pSU2UHznU&t=4078s
  2. https://www.youtube.com/watch?v=L1CK9bE3H_s&t=229s
  3. https://www.youtube.com/watch?v=sByzHoiYFX0
  4. http://www.creativebloq.com/typography/what-is-typography-123652

 

Leave a Reply

Your email address will not be published. Required fields are marked *