How to Understand Typography Like a Professional Designer

Typography is so overwhelmingly ever-present we hardly notice it there anymore. It’s actually bizarre to think that typography has a history at all.
We’ve become so accustomed to communicating with type that most of us do not notice what it is doing, let alone any of the agonising design decisions that were a part of their creation.

A Brief History of Type

 

The tradition of type began with scribes and hand-written copies of books. All written material was done by hand, tediously and slowly, often taking years to produce a single copy of a book. The idea of a “typeface” or “font” was unknown.
When German printer Johannes Gutenberg invented the first movable type printing press, he and his apprentices hand-carved wooden type in the style of the handwritten Blackletter fonts. By doing this, Gutenberg not only created the engine behind a massive explosion of literacy, but also the first “font” in the reusable form we understand them in today.

For years, “fonts” were these simple, movable pieces of wood, placed backwards, inked and run over a substrate, e.g., paper. Because this kind of relief-style printing leaves a mirror image, typesetters had to learn to read characters backwards and place them backwards on their presses. Learning to place Glyphs by reading them backwards, typesetters were often warned to “Mind their p’s and q’s” as the lowercase p and lowercase q look nearly identical.

Digital fonts were, more or less, an inevitable consequence of this history as design steps into the computer age. In order to appeal to designers and typographers, companies like Apple and Adobe researched the fonts printed years ago by master type craftsmen, bringing the painstaking work of a lifetime of design down to a file size of a few miniscule KB.

Typographic Terms You Should Know

• • Body Copy: Large blocks of type set to be read with the greatest of possible ease. Body copy should all be set in the same font, with shared point sizes for the face and leading.

• • Majuscule: Otherwise known as Uppercase letters. Most of our alphabet borrows its Majuscules from the Latin, or Classical letterforms.

• • Minuscule: Counterpart to Majuscule, Minuscules are our lower-case, copied and modified throughout the years to better fit their Classical letterform counterparts.

• • X-Height: In a miniscule set of a font, the so called “height” is the space between the baseline and the mid-point, which is often the height of the lowercase letter x.

• • Baseline: The invisible line where the fonts “rest.” Descenders can dip below this line, but have a resting point that sits on it.

• • Ascender: In the set of Minuscules, the Ascender is the part of the font that goes beyond the X-height, approaching the Capital letter height. Letters with ascenders are those like l, b, f, or k.

• • Descender: Also in the Minscules, the Descender is the part that dips below the Baseline. Letters that have descenders are p, q, y and, in some faces, f.

• • Ligatures: Sometimes lowercase letters collide within words and create tangent points and bizarre shapes that can cause a reader to stumble without realising why. Typographers artfully combine letters like “fi”, “ti”, “ffi” in ways that are easy on the eye and are often undetectable as separate characters. Many quality fonts include these Ligatures among their Glyphs.

• • Bowl: Enclosed round space within letters like the “o” and “p” or “B”.

• • Counter or Counterform: Open rounded space within letters like the “c”, “G” or “U.” The lowercase “e” has a bowl and a counterform.

• • Letterspace: The most literal typographic term, Letterspacing is adding blank space between individual letters. It is only adding space and is not to be confused with Kerning. Some fonts are easier to read Letterspaced, while some are harder.

• • Kerning: Letters are Kerned when the spaces between letters are closed up, bringing them closer together. Some letter combinations like “AV” often need Kerning to not look awkward and filled with excess space. Most kerning in modern computerised type is done automatically by the software but may need personalised attention depending on the font or the situation.

• • Lead or Leading: Lead is the space between baselines of text in body copy. For instance, “double-spacing” your research paper in Word is increasing the Leading. Leading is set in points and is normally set at the same point as the font or slightly higher. This is pronounced “Lead” as in the heavy metal substance in the case of “Lead” and “Leading.”

• • Serif: Serifs are traditional flourishes, points, and shapes on the ends of the strokes of letters. These are hallmarks of older style fonts with roots in Roman, Italian, and German scripts. These were originally part of naturalistic pen strokes and became part of the first sets of fonts. It took longer than you might think for the first fonts without Serifs to be created and widely used.

• • Type Nerd: Exactly what it sounds like, Type Nerds relish pointing out when somebody uses Faux Bold or a Double Prime instead of true quotes. Typography is an art form created by sticklers, and so creates a lot of Type Nerds.

Basic Types of Fonts

Serif: What has become the standard of standards, Serif fonts have those flourishes, points, and shapes on the ends of their strokes. Serif fonts are often considered “Traditional,” and are often used for more to say something about this tradition in more conservative, old-fashioned designs. Body copy set in Serif fonts is often very readable. Common Serifs are Times, Georgia, Garamond, Minion, and Baskerville.

Sans Serif: When the first Sans Serif fonts were created, people called them “Grotesque.” This name still exists today as one of the first generation of Sans Serif fonts. Sans are the more modern hipster cousins to Serif fonts. Much of typographic design today uses Sans fonts. Common Sans are Helvetica, Impact, Futura, Frutiger, Myriad, or Tahoma.

Slab Serif: A Serif font popularised in the 19th century when the Western world was developing a keen interest in the history of Egypt. Slab Serifs have blocky slabs of serifs as opposed to the pointed or flourished ones that hallmark the Serif fonts based on humanistic, handwritten letterforms. Common Slab serifs are Rockwell and Courier, the typewriter font.

Blackletter: Unfortunately, these are often called “Old English” fonts. Blackletters were the first fonts to be printed by movable type, and were, therefore, the first font in the repeatable, modern sense. They are based on a calligraphic tradition and were first used by Gutenberg to print the famous Gutenberg Bible. A common Blackletter is Fraktur.

Dingbat: Decorative, non letterform Glyphs used for various decorative purposes. Common Dingbat fonts are Zapf Dingbats and Wingdings.

Display font: Fonts designed specifically for short, eye-catching text. Posters, advertisements, and web design headers are best done in Display fonts.

Body Font: Fonts designed to set large sections of body copy. Books, newspapers, and the content of blog posts should all be set inappropriate body fonts.

Calligraphic or Script Font: Fonts designed based on a person’s handwriting or designed to look like handwriting. These can be as elaborate as Edwardian Script or as simple as the humble yet loathed Comic Sans MS.

Novelty Font: Digital typography has allowed designers to create all manner of bizarre, but oddly good-looking fonts. These can range from useful to useless, from copying a movie title font to borrowing the style of Graffiti artists. Novelty is sort of my own umbrella term. I use it to illustrate the difference between the modern trend of font design versus the long, established history and undisputed types of fonts.

Tips for Better Typography

• • Understand it might not have been designed to stretch, bend, or be distorted.

• • Design for readability and legibility. Type is supposed to be read.

• • Consider what your font was designed for when choosing it. Don’t write your memos in Impact. Sending emails sent in Fun stuff makes you look goofy.

• • Many fonts are designed to be set in Upper and Lower case. Script fonts are an example of this and are nigh-illegible in all caps.

• • When your primary purpose is communicating the content, simpler is often better.

• • Use as few fonts and point sizes in those fonts as possible on a single design.

• • If you use a different font or point size in that font in a design, make sure you have a reason.

• • Make sure they are different enough that the difference is noticed.