What is Typography and Colour Theory?

Jada White
4 min readJul 25, 2019

According to Butterick’s Practical Typography guide, “Typography is the visual component of the written word.

A text is a sequence of words. A text stays the same no matter how it’s rendered. Consider the sentence “I like pizza.” I can print that text on a piece of paper, or read it aloud, or save it in a file on my laptop. It’ll be the same text, just rendered different ways — visually, audibly, digitally.

But when “I like pizza” is printed, typography gets involved. All visually displayed text involves typography — whether it’s on paper, a computer screen, or a billboard.”

What makes the idea of typography so important is that, to any person, reading it can oftentimes be incredibly stressful. So helping the reader bestow more attention on good typography and less on reading logistics can make for a satisfying reading experience overall. This isn’t to state that one should only pay attention to typography with complete disregard to writing; this is just a clear affirmation that bad typography can distract the reader — undermining a good message.

Conceded by LifeHack’s Top 20 Most Popular Fonts Of All Time, sits at a nice 9th place. Doesn’t sound too impressive, right? However, the typeface is said to have been popular almost from its inception in the early 1920s and after being chosen to be the official font for LNER’s railway system, it wasn’t too long before its usage would appear on nearly everything associated with the company. Here is a hand-crafted Gill Sans text scale:

Gill Sans typography scale.

A typeface that has recently caught my attention is Rubik. Although a more modern font; designed with the Rubik’s Cube exhibition in mind, the font design’s stout proportions and rounded corners evoke the sense of comfort, softness and femininity. According to Bar and Neta (2006), human general preference suggests that we desire visual curved objects over angular shapes, i.e, typefaces like Helvetica. Here are the text scales for both Rubik and (Neue) Helvetica, respectively:

Rubik typography scale.
Helvetica typography scale.

Here is a visual anatomical comparison of their typefaces:

Helvetica and Rubik anatomy comparisons.

Despite not being any immediate noticeable discrepancies between the two; without context, the sharp transitions in contour (Helvetica) may convey a sense of threat — therefore, triggering a negative bias.

Nonetheless, as stated before, this is only the case without context. Appropriateness is everything.

As an advocate for growth, green is definitely my favourite colour, in every shade. So learning that its connotations are new beginnings, abundance, renewal, growth, wealth, envy and stability si quite enlightening. It suggests that there is a possibility that I may have subconsciously decided my favourite colour based on what some of these connotations mean to me. At a stretch, this proposes that there’s a large body of psychology and scientific literature that examines the impact of colour on our thinking and emotions. Not only would this measure human feelings when in contact with colours, but human behaviour.

Pinterest Homepage.

Pinterest is my all time favourite website to challenge the “conventional colour norms” that factorise human behaviour. The red logo symbolises passion — the primary colour (conceivably for creativity founded through the site), the white background and astutely infused chunks of white between images, GIFs and videos suggests cleanliness and virtue; stressing the irony in arranging barriers within creativity, fixed within a minimalist frame. Finally, the splash of light grey in inactive toolbars and buttons and dark grey in semantic messages (the unusual accent colour) that are “part of the furniture” elicits the sense of formality and sophistication contained in an online pinning site that’s a force to be reckoned with.

Typography Scale and Font Weight for hypothetical money-sharing app.
Colour scale.

Above, I have created part of a design system for a hypothetical money-sharing app. Based on previous understandings for connotations of the colour green, I chose this as my primary colour based on the idea that green symbolises wealth; it also symbolises success and positivity. Immediately, when we think of the idea of owing money to someone, there are negative connotations. However, a money-sharing app is efficient and very easy to use; making the process of giving money back or even just sharing it, a positive and subsequently an enjoyable experience all around.