Intro to Typography and Color Theory
Both Typography and Color Theory have a huge impact on a user. Most designers focus on these two aspects more than the illustrations. So why is it that these two things have a bigger effect on a user, when they would assume it’s the illustrations that stick out to them the most?
Typography
Typography is the style and appearance of printed matter. Although it seems pretty simple, it has many elements that go into it. The following are the terminology used when talking about Typography:
- Typeface: refers to the specific design of the letters, like Times New Roman or Helvetica.
- Font: font refers to a particular style or size of a typeface. For example, 10 point regular or 24 point bold.
- Character: an individual symbol of the full character set that makes up a typeface. It may take the form of a letter, number, punctuation mark, etc.
- Serif: a short line or stroke attached to or extending from the open ends of a letterform. It also refers to the general category of typefaces that have been designed with this feature.
- Sans Serif: the general category of typefaces, or an individual typeface, designed without serifs.
- Italic: refers to a slanted version of a typeface (slants from left to right). A true italic is uniquely designed, more than a tilted version of the upright (a.k.a. “roman”) typeface.
- Font-Weight: the thinness or thickness of a font.
- Baseline: the imaginary line where most letters and other characters sit.
- Cap Line: the imaginary line that marks the upper boundary of capital letters and some lowercase letters’ ascenders.
- X-Height: refers to the height of a typeface’s lowercase letters. It’s also what we use to distinguish between ascenders and descenders.
- Descender: a piece of a letter that extends below the baseline.
- Ascender: a part of a lowercase letter that rises above the main body of the letter, or above the x-height.
- Tracking: refers to the uniform amount of spacing between characters in a complete section of text (sentence, line, paragraph, page, etc.).
- Kerning: refers to the horizontal spacing between two consecutive characters. Adjusting the kerning creates the appearance of uniformity and reduces gaps of white space between certain letter combinations.
- Leading: the vertical spacing between lines of text from baseline to baseline.
There are many others, but those are the main ones used. At first glance, it is a lot to absorb. So, let’s break it down with two different typefaces to get a better understanding of it. I will use Arial and Josefin Slab.
By seeing the two text scales of each typeface, you can recognize that they are different. But you may not be able to pinpoint what features make them so different. The main ones that I notice are the differences in x-heights, serif/sans serif, and weight.
Below are the examples of each:
The x-heights are different. The left, Arial, has a taller x-height than the right, Josefin Slab. Try to avoid using typefaces with shorter x-heights as your main UI text, so it is easier for the user to read.
The left, Arial, is sans serif because it does not have the stroke extending from the letterform. The right, Josefin Slab, has the strokes which make it serif.
The left, Arial, has a bigger font-weight to the typeface because the lines creating it are thicker. The right, Josefin Slab, has a smaller font-weight because it is thinner. The smaller the text weight, the less important the text typically is.
Color Theory
When a color is being picked for a product, there is a lot put into it. When choosing a color, there are two important questions to ask:
“What is the purpose of the product I’m creating?”
“What do I want to make the user feel when they use the product?”
Understanding what each color’s effects on a user are, can greatly affect a product. Let’s say, I’m making a new money-sharing app, and I want to find a color to use for the app logo. I would ask myself those two important questions. The purpose of the product I’m creating is to be a platform where users can send money to and from each other. I’d choose the color green since it’s associated with money, stability and wealth.
Now that I have my standard green color ( HSL 120,100%, 25%), I also want to take how I want the user to feel into consideration. Money usually can be a stressful topic for most people, so I want my app to make them feel warmer, happier, and have hope when using it. That led me to change the Hue (H) lower to get it towards a yellow-green (HSL 88, 100%, 25% ). I wanted it to be a bit brighter too to enhance the warmness and happiness of the color, so I changed the Lightness (L) from 25% to 30%. I kept the Saturation (S) the same at 100% because I wanted it to still be intense in color. In the end, the color below is what I created.
My green color is only slightly different than the first standard green color, but the subtle changes affect the user and their subconscious feelings.
Conclusion
Both Typography and Color Theory have a huge impact on the user. They may seem like small details on a UI, but they have big impacts. Typography can affect the user’s ability to read the UI. Depending on the typeface, it can also portray a fun or serious tone to the design. Color Theory impacts the user by giving them an idea of what the product represents/stands for. And, whether they are aware of it or not, gives them certain emotions.
