Typography in Design — Part 1
and how not to suck at it
*Disclaimer — Since typography in itself is a vast subject, even covering the basics in a single article would be an overkill. Hence, i am splitting the topic into 3 parts so that the content can be consumed in easy digestible chunks. Happy reading!
Part 1 : Anatomy and types of typefaces
Part 2 : Basics of typography and important terms such as leading, tracking etc
Part 3 : Font pairing and how to improve your type game
To be honest, i sucked at typography, BIG TIME! (well, for the most part i still do.. :P). It could very well be attributed to my lackadaisical approach to the nuances of visual design and typography as a whole. I have always had a knack for problem solving, rather than just aesthetics which translated well into my role as a User Experience designer. Having graduated in Architecture, i have always been a keen follower of the adage “Form follows Function” and hence felt good typography would just augment an already well designed experience. What else could good typography mean other than making content legible for the users, right? Well, i could not have been farther from the truth. Let me tell you why!
I realised, polished typography is an integral part of good design. We often undermine the role they play in elevating emotional experiences of a product. Think of it, when a user first uses a product, they see the interface first and then experience the “experience”. Don't they?
Remember the three levels of designs : Visceral, Behavioural and Reflective mentioned by Don Norman in his seminal book “Emotional Design?”
In a world when first impression matters so much, well crafted typography along with a strong visual design language forms an indispensable part of a product as much as a robust user experience does. Typography in fact, is an integral part of user experience.
Before we proceed, let me tell you that i am not an expert neither do i promise that you will get better at it just by reading this article. However, with a bit of diligence, determination and practice i can assure that it will definitely help you get better at your craft much sooner than you realise, just like I did.
In Part 1, we will try to understand and decode the anatomy of typeface, go through the major categories of typefaces and their respective characteristics so that we can better differentiate them. This might sound boring now but i am sure you will start appreciating its importance by the end of Part 3
Anatomy of Typography
What is a typeface?
Like me, if you have also been confused between typeface and font let me get this straight for you.
“A typeface is a set of characters of the same design. These characters include letters, numbers, punctuation marks, and symbols. Some popular typefaces include Arial, Helvetica, Times, and Verdana”
So, when people say they prefer Proxima Nova font over Roboto, what they are essentially speaking about is typeface.
So what is a font then?
Fonts are what typefaces are made up of. For instance — Helvetica is a typeface. However, it is made up of a whole collection of fonts, each in a specific weight, style and size, with different levels of condensation as well as italic versions.
Different types of typefaces
Now that we know what a typeface is lets see how many major typefaces are out there. Based on their characteristics, almost every font can be categorised under a certain typeface. In total, there are five basic classifications of typefaces.
Classical Serif
A serif is a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol within a particular font or family of fonts. A typeface or “font family” making use of serifs is called a serif typeface. Serif type faces can further be divided into sub categories namely
1) Classical/ Humanist/ Old style : Perhaps one of the oldest typefaces in the history of typography. Humanist, humanistic or humanes include the first Roman typefaces created during the 15th century by Venetian printers, such as Nicolas Jenson (hence another name for these, Venetian). These typefaces sought to imitate the formal hands found in the humanistic (renaissance) manuscripts of the time
2) Garalde : Also called Aldine, this group is named in homage to Claude Garamond and Aldus Manutius. In general, the garaldes have finer proportions than the humanists, and a stronger contrast between downstroke and upstroke. The weight of the garaldes are distributed according to an oblique axis(stress).
3) Transitional : The transitional, realist, or réales are the typical typefaces of the traditional period, particularly embodying the rational spirit of the enlightenment. Contrast between main and connecting strokes is more than in the first two groups along with vertical axis(stress).
Modern Serif
1) Didone/Neo-classical : The Didones or modern typefaces draw their name from the typefounders Didot and Bodoni. These typefaces, dating from the end of the 18th and the beginning of the 19th century, make a very strong contrast between full and connecting strokes (the connecting strokes being extremely fine), the verticality of the characters and their unbracketed, hairline serifs.
2) Slab/ Mechanistic : Also called mechanical, slab serif, or mécanes, the name of this group evokes the mechanical aspect of these typefaces, which coincide with the Industrial Revolution at the beginning of the 19th century. The principal characteristics of these typefaces are a very low contrast and rectangular slab serifs.
Sans Serif
In typography and lettering, a sans-serif, sans serif, gothic, or simply sans letterform is one that does not have extending features called “serifs” at the end of strokes. Sans-serif fonts tend to have less stroke width variation than serif fonts. They are often used to convey simplicity and modernity or minimalism.
Sans-serif fonts have become the most prevalent for display of text on computer screens. On lower-resolution digital displays, fine details like serifs may disappear or appear too large. The term comes from the French word sans, meaning “without” and “serif” of uncertain origin, possibly from the Dutch word schreefmeaning “line” or pen-stroke. In printed media, they are more commonly used for display use and less for body text. Sans Serif has also has a lot of sub-categories, a few major ones being
1) Grotesque : This group features most of the early (19th century to early 20th) sans-serif designs. Influenced by Didone serif fonts of the period and sign painting traditions, these were often quite solid, bold designs suitable for headlines and advertisements. The early sans-serif typefaces often did not feature a lower case or italics, since they were not needed for such uses.
2) Neo-Grotesque : As the name implies, these modern designs consist of a direct evolution of grotesque types. They are relatively straightforward in appearance with limited width variation. Unlike earlier grotesque designs, many were issued in extremely large and versatile families from the time of release, making them easier to use for body text.
3) Humanist sans serif : Humanist sans-serifs take inspiration from traditional letterforms, such as Roman square capitals, traditional serif fonts and calligraphy. Many have true italics rather than an oblique, ligatures and even swatches in italic. Humanist designs vary more than gothic or geometric designs.Some humanist designs have stroke modulation (strokes that clearly vary in width along their line) or alternating thick and thin strokes.
4) Geometric : As their name suggests, Geometric sans-serif typefaces are based on geometric shapes, like near-perfect circles and squares. Common features are a nearly-exactly circular capital “O”, sharp and pointed uppercase “N” and a “single-story” lowercase letter “a”. The ‘M’ is often splayed and the capitals of varying width, following the classical model
Script
The scripts or scriptes include typefaces which evoke the formal penmanship of cursive writing. They seem to be written with a quill and have a strong slope. The letters can often be connected to each other. Typefaces imitating copperplate script form part of this family. Scripts are distinct from italic type. They can further be sub divided into
- Formal Scripts : Formal scripts are very fluid and graceful, and often have connecting strokes. They are appropriate when an elegant, stately look is desired.
2) Casual Scripts : Casual scripts are meant to look friendly and loose, as though quickly drawn with a pen, brush, or similar writing instrument. Their strokes can be connected or not, and the mood conveyed tends to be warm, personal and relaxed. Casual scripts are often used for ads, brochures, and anything that requires an intimate, informal look.
3) Calligraphic Scripts : Calligraphic scripts are visual art related to writing. The design and execution of lettering emulates that of a scripts written with broad-tipped instrument, brush or other writing instrument.
Modern calligraphy ranges from functional inscriptions and designs to fine-art pieces where the letters may or may not be readable.
4) Handwriting : Handwriting scripts are the ones that resembles hand written text. A handwriting style is a carefully designed, efficient way of forming letters and numbers. Each style has its own character or fits a certain need.
5) Blackletter : Blackletter (sometimes black letter), also known as Gothic script, Gothic minuscule, or Textura, was a script used throughout Western Europe from approximately 1150 until the 17th century. It continued to be commonly used for the Danish language until 1875, and for German, Estonian and Latvian until the 1940s.
Monospaced
A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. This contrasts with variable-width fonts, where the letters and spacings have different widths.
Display
A display typeface is a typeface that is intended for use at large sizes for headings, rather than for extended passages of body text. Display typefaces will often have more eccentric and variable designs than the simple, relatively restrained typefaces generally used for body text.
This brings us to the end of Part 1. In the next chapter we will learn the basics of typography such as leading, tracking etc which will help you better understand the concepts of baseline grid, vertical rhythm, font pairing and a few others.
