🍃 Leaf

Typography

The task before us is simple: to make beautiful letters and to arrange them well. (Edward Johnston, the father of modern calligraphy)

Typography is the communication made visual, if done right, it can even boost the message by making it more visible and providing mood and context for the reader.

Foundations of writing go back to the 5th and the 1st century BCE with the Greek and Roman carved letters on stone respectively. In 800 AD one of the first standardized letterforms came in as the Emperor Charlemagne decreed that the Carolingian letters should be universally used, these are the basis of the lowercase letters we recognize today. Johannes Gutenberg made one of the finest art typography ever created for his Gutenberg Bible in 1455, where movable type and printing press were already the state of the art in writing.

Typographic Differentiation

Types can be classified by functionality, graphic style, by Serif or Sans Serif, by the historical period of creation, etc. There are many characteristics and many ways to sort them. The main differentiation we can do among them is as follows.

Differentiation by Functionality, Text vs. Display

There are two main roles typographies may have: one is Text type, this is a type that’s designed to be read at small sizes and large quantities of text. The idea for them is to make it easy and effortless to read, they should be “invisible” for the reader; the other is the Display type, which is to be used at big sizes but in a small amount of text, most of them are emotional and expressive. They are specially designed to get noticed and draw attention.

Common styles used as display types include: Scripts, types based on handwritten letters, often attached to one another with connecting strokes, some have a formal style, others a more informal style; and Blackletter or Fraktur, a type that is made of individual strokes, it use to looks fractured or broken into multiple parts.

Differentiation by Classification, Serif vs. Sans Serif

We can discriminate types by two mayor classes: Serif, any type that have little extenders or feets at the end of each trace; and Sans Serif, the types that don’t have Serifs (sans translates to “without”), they were introduced in the late 1800s.

Serif Subclasses

Serif types can be divided into subclasses by their style as follows:

More Serif subclasses are based on their historical period of creation:

Sans Serif Subclasses

Sans Serif subclasses include:

Type Family

It’s a group of related typefaces which share similar characteristics, designed to work together fulfilling different roles at the same text body. There are three common variations for a type family, the weight, the width, and the slope. The complete name for each member starts by the name of the typeface family, followed by its weight, width, and slope variation names. There isn’t a single way to call these variations, we can do it as follows. Each of these variations is often called a Font.

Weight terms in ascending order (from thinner to thicker):

Width terms in ascending order (from narrowest to widest):

Slope types:

A Superfamily is the one that uses the same base design for both their Serif and Sans Serif versions. They are the biggest families and usually share the same name for all of their versions, some also include, for example, a monospaced design among other stylized ones. Other common families are only composed by different weights, widths, or slopes.

Anatomy, Parts & Shapes

Boundaries:

Common body parts:

Letter specific body parts:

Formatting & Styling

Alignment

There are five kinds of alignment:

Size & Measurement

In design, type is measured in Points, which are a 1/12 part of a Pica, and Picas is 1/6 of an Inch. Back in time, Point was the term used for the height of the movable type block for printing. Another term is the set-width, which is the width of a character for a specific typeface, the amount of characters that can fit in a line vary depending on this measure. A line is also measured in Picas, the width of a line of type is called the Measure of the Line.

Relation between measurement units:

Spacing

Tonal Weight

It’s the typographic level of darkness or lightness of a text body based on four variables, the actual typeface, the size of the type, the leading, and the tracking of the type.

Kerning

Kerning is the manual spacing between two specific letters, the required amount of space is a designer decision, there are no strict or mathematical rules to define it. The idea is to create the appearance of even spacing between letters, to make that space look consistent among characters to improve readability, it’s all about visual adjustments. For a given typeface, there are thousands of Kerning Pairs made by its designer.

Some specific cases in which manual Kerning might be required are:

Tracking

Tracking is the overall space between letters, applied equally for each case, a word, a line, or a large body of text. Notice it is the same amount applied for every pair of characters, there are no distinctions between specific pairs, that’s the job of manual Kerning. We can also use Tracking to avoid widows and orphans. A widow is a word hanging out at the end of a paragraph, while an orphan is a word at the top of a body text column.

Leading

Leading is a much simpler concept, it is the space between lines measured from baseline to baseline. In case the Tracking is too large or the type has strong vertical strokes, we will need to increase the Leading to compensate, this way the eye can distinguish the horizontal flow of the line more easily, because rows (lines) will be noticeable enough in comparison with columns (letters and spaces). The term Leading comes from the early days of metal typing, where the space between lines was adjusted with thin strips of lead.

Legibility vs. Readability

Legibility measures the ability to decipher something. In typography, legibility measures how easy it is to distinguish one letter from another. Some features a legible typeface has can be individual character shapes, a large counter space, a large x-height, or Serifs, as they provide extra information in comparison with Sans Serifs.

Readability measures how much a reader wants to read the text, i.e.: it’s how appealing the text is for the reader. We can enhance it with places where the eye can focus or even rest. These appealing features are often called Entry Points, places where the reader can choose to enter the text and start reading, like white space between text blocks, noticeable headings on Caps or Bold letters, or different colors for specific blocks.

Factors that can affect readability in general:

Combining Types

Often, it’s fine not to combine more than one typeface, we could keep only one and use its different variations (like italics and weights). In case we really want to use more than one we need to make them live harmoniously with one another (when trying to differentiate between body text and headlines, for instance). Most projects don’t need more than two well-chosen types to create an effective typographic hierarchy.

To ensure a good matching, we need to find some anatomical similarities by looking at their basic characteristics, those can be the historical period in which they were created; typefaces created by the same designer or group of designers; types that are stylistically opposite to build up a nice contrast; types with similar x-height but with different styles, etc.

What we should not do is to combine types with a strong stylistic identity each, that would make them conflict and fight for attention instead of being complementary to one another. One of the only reasons for us to not make an harmonious match is because of the nature of the project. Maybe we are looking for some chaos, disruption, or excitement to be reflected by the types, in such a case it is fine to break things, even the harmony.

Writing with Cases

Cases help us define and control mood and voice volume for the message.

Uppercase, writing with Capital letters (originally called Majuscules) conveys a louder voice, something powerful, often authority, sometimes even formality. When designing with them, we should leave a bit of extra space around them to let the word breath, because its uncomfortable to read on Caps when the letters are too close to one another.

Lowercase (or Minuscules) provides a lower voice, a more friendly mood. They seem to be closer to the reader as if they were more personal, they work well for informal contexts. Opposite to its counterpart, lowercase (letters and words) works just fine in closer contact.

Reference: