Typography introduction for non-designers

Did you know that Steve Jobs took college courses on calligraphy and typography, because he believed that these would play an important role in the success of Apple?

But how could a man so inspirational care so much about something so little? Well, typography is both an art and a technique. It is so much more than just the design of letters and characters. Typography focuses on the point sizes, line lengths, and spaces both on a single line and throughout the entire page of text. (Brochuremonster.com, 2019)

Typography does tend to go unnoticed - but it is everywhere.

Once your consciousness recognizes its presence, it can't go unnoticed - and then, you would start to actually recognize different typefaces or fonts and why they have been used where you see them!

But what is the difference between Typefaces and Fonts? According to Nick Sherman, they can be compared to the musical terms ‘song’ and ‘mp3’. Wherein the song art itself, and the mp3 is the file for delivery. This is a simpler way to understand the difference between them. A more realistic example of this can be that; Helvetica is a typeface whereas, Helvetica Bold and Helvetica Light Oblique are fonts.

Just like the human body, each part of an alphabet has its own special term.

An example of this can be seen below in a diagram that explains the making up of each letter and how the little elements interact with one another, and how they sit on a line.

For example, the word ‘Faulty’

‘The distance from the baseline to the top of the capital letter is called the cap height. The x-height, located in between the baseline and the cap height, is the height of the body of the lowercase letter (in this scenario, it would be letters ‘a’, ‘u’, and ‘y’). The bowl is that round shape sticking off the letter ‘a’. See that little foot sticking off the letter ‘l’? That’s a serif. Finally, the descender is the longest point on a letter that falls beyond the baseline.’ (Leaning, 2019)

While typing words that begin with the letters ‘fl’, you may notice that the ‘f’ and the ‘l’ tend to be pushed together in order to appear as a single character. This formation is referred to as the ligature. An alphabet’s base is called the stem, while the curve in the body of ’s’ is called a spine. The tall piece of the letter ‘h’ is called the ascender.

‘In the uppercase letter “B”, you’ll see something called a crossbar. This is the bar that goes across the inside of the letter and connects one side to another. The space in the middle of letters such as “B,” “O,” or “A” is called the counter. The final is the tapered end of letters such as “e” or “c.” The terminal is a type of curve that you see at the top of the letter “f” or the end of the letter “j”.’ (Leaning, 2019)

The two types:

1. Serif - Typefaces that have little bars that appear like feet are called serif. Times New Roman, Georgia, and Garamond are the most commonly used serif typefaces. In novels and newspapers, the serif typeface is used more commonly due to its readability in long and printed works. This is because, in serif typefaces, the alphabets appear distinct.

2. Sans Serif The word ‘sans’ means ‘without’ in French. In simple terms, ‘sans serif’ literally translates to ‘without serif’. In the following image, the example typeface lacks serifs, as explained above. Arial, Verdana, and Futura are the common Sans Serif typefaces. These are generally used in blog posts and documents on the web to ensure readability on the screen which generally creates a strain on the eyes. Therefore, sans serif typefaces are more commonly used on the web especially on low screen resolutions.

‘The term “type family” or “typeface family” is used to describe a range of designs that are all variations of one basic typeface. For example, you’ll see that Proxima Nova has variations such as bold, extra bold, black, regular, light, light italic, and regular italic.’ (Leaning, 2019)

Design wise, maintaining consistency throughout the design is key for most designers. Most graphic designers use fonts within a particular 'type family' to create a sense of hierarchy. Texts that are meant to be highlighted can be written in a font slightly different from the rest to be given emphasis.

Kerning The space between any two alphabets is known as kerning. This space can be modified in different areas to make the certain text more readable. An example below depicts Franklin Gothic Medium to showcase the natural space between the two T’s. Naturally, the spaces between them are too tight and can be modified by kerning - which will also complement its readability.

Tracking Tracking is very similar to kerning, but it focuses on the spaces between letters in an entire word. An example below depicts the increments created to improve readability.

Leading In simpler terms, leading is the same as spacing - which is essentially the distance between two baselines.

Double spacing is more commonly used in essays at schools and university as it allows the teachers to have enough spaces between lines to make their required corrections and add their comments.

Mentioned above are the very basics of typography. Graphic Designers, during the course of their degree, usually go through several rounds of typography courses to become professionals. The best way to learn is to experience these differences yourself. Try to play around with typefaces and fonts in your next project, and mess around with the leading and the kerning to understand them better.

After all, practice makes perfect!!

BIBLIOGRAPHY

BrochureMonster.com (2019)

Basic typography concepts and techniques.

Available at: BrochureMonster.com

Leaning, B. (2019)

An Introduction to Typography for Non-Designers. blog.hubspot.com

Available at: An Introduction to Typography for Non-Designers