Typography & Color
Today in Lambda School I learned about typography and color. Typography is the visual representation of textual content. One of the most important parts of user experience is an interface’s content. It’s so important that content is presented in a way that’s accessible to everyone and accurately reflects the content itself.
Typeface vs. Font
After a few months of studying some of the basics of UX design, I noticed that there seemed to be some confusion between the terms “typeface” and “font”. I was much more familiar with referring to the way text appears as a type of font. Today I learned that typeface actually refers to the specific design of letters, while font refers to the style and size of a typeface. So “Helvetica Neue” is a typeface, and fourteen point bold refers to the font.
Helvetica vs. Raleway
There are more ways to describe elements of typefaces. I’d like to compare and contrast some of those elements between Helvetica and the Google font, Raleway. Helvetica is a modern, clean, and easy font to read, so it’s no mystery why it’s so popular. It’s a sans serif typeface, meaning that it doesn’t have any short lines extending from the ends of each character. It has a heavier weight in comparison to Raleway. It’s worth noting that Helvetica also has horizontal terminal cuts, which are the endings of strokes.
Raleway is a much lighter typeface, but it’s also sans serif like Helvetica. Unlike Helvetica, some characters have unique characteristics, like how the two centered lines in a “w” cross over each other. Another example is how the bottom of a lowercase “l” lingers on a bit to the right. It’s not considered a descender because it does not extend below the baseline. Both typefaces have a relatively large x-height, which refers to the height of lowercase letters.
It’s interesting how much thought and research go into creating typefaces. Some are meant to be more creative, while some are just simple and stylish. When selecting a typeface, it’s important to consider what will best reflect the content being conveyed.
Color
Color plays a key role in influencing people’s emotions on how they feel about a product. Some colors can have multiple meanings. For instance, blue can be related to sadness but also peace. Culture can also affect how someone perceives a color. Red can be associated with violence and danger, but in China red represents celebration and prosperity.
Hypothetical Money-Sharing App
Let’s say that I’m creating a new money-sharing app, like Venmo. What would my primary color be? Since I’m not first to market, I have the luxury of being able to explore other money-related apps to see what types of colors they’re using. I looked up app icons for Venmo, Cash App Mint, Robinhood, Capital One, and more:
Most of their colors incorporate a blue, green, or some combination of the two. Capital One’s app is kind of the oddball with the red accent, but even their website is primarily blue. Most of them have a gradient so that the icon doesn’t appear to be so flat.
I chose the color #2fd0a0. It’s more on the green side of the spectrum but has some shades of blue in it as well. It’s most comparable to the color used on Robinhood’s app. I chose this color because green is often associated with wealth, stability, and new beginnings. Blue can relate to calmness responsibility. I think this mixture of the two colors is exciting yet shows reliability, which works great for a money-sharing app.
If you have any feedback or recommendations about this article, typography, or color, please leave a comment below! Also, feel free to contact me on social media:
