• ARTICLES
SEARCH

How-To Geek

How to Understand Typography Like a Professional Designer

glyphs

Typography is so overwhelmingly ever-present we hardly notice it there anymore. As elemental as it is to our culture, it’s actually bizarre to think it has a history at all. This article will serve as a condensed education on the basics of typography, including typographic terms, proper usage of fonts, unusual characters, and history.

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 agonizing design decisions that were a part of their creation. Practically any major typeface has a long history and richness important to how the font communicates about the content it bears. At least, any font that wasn’t created by somebody named “Pizzadude.”

A Brief History of Type

sshot-228

The tradition of Western-style 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, although most scribes throughout the Western world had their own stylistic hallmarks.

When German printer Johannes Gutenberg invented the first western 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 honest-to-goodness “font” in the reusable form we understand them in today.

Even more so than the history of literature, the history of typography is synonymous with the history of literacy. Type designers of the Renaissance and Baroque periods took inspiration from Gutenberg and the other first movable type printers, but also looked to Classical (Roman) typography. Combining the Roman Majuscules with the naturalistic Minuscules found in ancient texts that inspired the Blackletter fonts, these typographers eventually crafted fonts and alphabets like the ones we use today. Handcarving the individual and lovingly designed pieces of type, the early typographers were effectively creating a critical piece of the language in which we all communicate.

A screenshot of a Jannon Garamond font from StormType Fontclub.

For years, “fonts” were these simple, movable pieces of wood (or metal, in later, more industrialized years), 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.

These fonts were agonizingly designed around the core principle of legibility. The designer had the challenge to create each letter unique enough to be distinguished from the rest of the alphabet, while keeping a marked style throughout the set. Legibility is a separate concept entirely from the concept of readability, which is the ability to be read when copy is set in large blocks. The design decisions in a font as common today as Helvetica or Garamond reflect a long tradition completely unknown to most modern computer users, and likely many designers.

In one of the most important modern books on type, The Elements of Typographic Style, Robert Bringhurst briefly discusses on the life of Jean Jannon, the so-called “greatest type designer of the French Baroque.” He describes Jannon as a Protestant that was Religiously persecuted for the majority of his life, and that his experiences caused him to create typefaces that were “elegant but nonconformist.” Jannon’s fonts are often lumped together with Garamond, even to this day. This is the sort of history to be found behind every major typeface and Bringhurst lets us know it. It is with this sort of understanding a great designer can marry subtle, invisible style to simple body copy.

From the Elements of Typographic Style by Robert Bringhurst

“Typography exists to honor content.” Bringhurst says. And all art is, in part, about the artist. The art of typography says something about the typographer’s personal style. Jannon was a nonconformist Frenchman who designed immaculate typefaces. When you set your body copy in Jannon faces, what are you saying about the content of those words? Are you speaking of the French flair of the author? Of his iconoclasm? Of his suffering and persecution? It is this level of richness, history and craftsmanship knowledgeable designers like Bringhurst use when approaching a design problem. Every face says something, even if it is not obvious.

sshot-236

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. While digital fonts have had a huge impact on making design more accessible to the world, there has been a reaction to this treatment of beloved handcrafted fonts. Many designers have decided to incorporate these “obsolete” methods into their designs, intentionally ignoring the sleekness of design for tools and machines even Gutenberg might recognize.

Not to say that this is the quote-unquote “proper” way to design. Many fields of design, including web page design, are ill suited to printing with blocks of wood. But it is with this understanding of typographic history that a good designer must start with before he decides to take that carefully crafted Futura, Gill Sans, or Jean Jannon-designed font and do unspeakable, downright rude things to it that a design may call for.

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 realizing 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 easer 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 computerized type is done automatically by the software, but may need personalized 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 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

sshot-243

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.

sshot-242

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.

sshot-240

Slab Serif: A Serif font popularized 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.

sshot-248

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 caligraphic tradition and were first used by Gutenberg to print the famous Gutenberg Bible. A common Blackletter is Fraktur.

sshot-241

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

sshot-244

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

sshot-245

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

sshot-246

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.

sshot-247

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

  • Whenever applicable, respect the history of your typeface.
  • 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 Funstuff 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.
  • Blackletter fonts are another example. There is an aesthetic associated with all-caps Blackletter fonts, but they aren’t necessarily designed for reading that way.
  • 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.
  • If you ignore any of the so called “rules of design,” have a good reason, and do it extremely well.

Special thanks and credit to the WikiProject Typography. Your articles have helped me brush up on my atrophied type knowledge. Image captured from the Elements of Typographic Style by Robert Bringhurst assumed fair use. All other typography is assumed to be public domain under the Threshold of Originality. And for the record, I have much love for Pizzadude.

Eric Z Goodnight is an Illustrator and Graphics Geek who hopes to make Photoshop more accessible to How-To Geek readers. When he’s not headbanging to heavy metal or geeking out over manga, he’s often off screen printing T-Shirts.

  • Published 10/4/10

Comments (17)

  1. Mike

    For lawyers (and non-lawyers)

    http://www.typographyforlawyers.com/

  2. Chris

    Nice article, but rife with typos: Majiscules –> Majuscules, Miniscules –> Minuscules, Acender –> Ascender, Decender –> Descender, and Gutenburg –> Gutenberg.

  3. Eric Z Goodnight

    Curses! This will teach me to type with broken fingers.

  4. twjolson

    Awesome article. It is these non-standard computer articles that make how-to geek such a great site.

  5. Brian Ainscough

    As an ex-printer, heavily involved with “moveable” type up to the early 60′s I found this article a joy to read.
    Modern computer users have no conception of the sheer amount of work, mainly by hand, that was required to produce a book in the old “hot-metal” days.
    I still have a couple of hundred of fonts, mostly never used, on my PC. There for the sheer joy of having and looking at the wonderful diversity of fonts availabe.

  6. Eric Z Goodnight

    I am a printer as well, and I really love the history of typography exactly because it is also the history of print technology and of design. You are right, though, we are sort of spoiled by just how easy design is nowadays. I think there’s a lot to be said for handcrafted appeal of movable type. Glad to hear this struck a chord with you.

  7. Camilo Martin

    As a complete outsider to typography and mostly a programming nerd, I just don’t understand why there are so few fonts as soft as Calibri. The Typography For Lawyers link above led me to Hermes FB font (just look at it! http://www.fontbureau.com/media/images/specimen/splash/hermesfb.gif ) which is kind of as good as calibri to my eyes, too bad it’s unaccessible to me.

    Are there any other sans-serif (“neo-grotesque”?) fonts that have evenly-thick lines and curves, and semi-rounded (as in Calibri) endings (“finials”?)?

    Maybe that’s a bit too specific, but I find it such a pleasant, easy on the eyes combination.

  8. bill tidwell

    two typos in these paragraphs: Minsscules and leters fwiw

    # Descender: Also in the Minsscules, 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 realizing why. Typographers artfully combine leters 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.

  9. Eric Z Goodnight

    @bill: Fixed.

    @Camilo: Can’t think of any offhand, but you can try tools like Identifont http://www.identifont.com/

    or WhatTheFont! http://new.myfonts.com/WhatTheFont/

    Both show pay fonts only, but are excellent tools. Have them identify Calibri and they’ll suggest similar style fonts.

  10. Camilo Martin

    @Eric that’s very neat, thanks! These tools seem to identify shapes very well, even if some important details are subtle (such as rounded endings) so they get ignored. Oh well, at least Calibri is almost ubiquitous.

  11. jls

    Camilo, you could try Type Navigator at fontshop.com.
    It’s a tool for professionals that may help you to narrow it down exactly.

  12. Ahmed

    Hi
    i want an app for making font is there any one how can help me ???

  13. Joe

    Thank you for your article.
    I’m ashamed to say this but I was an Offset Press printer and did not know this info, wish I new this when I started on my first job in a printing company in NY, they had Letter presses and Offset presses so they had all the cases for all the different type faces, I watched the man use the stick to add the letters and spacers and then put them in the frame with the wooden spacers of different thickness and tighten them to make a proof on a proof press.
    Anyway thank again
    Joe

  14. aaron

    i have several TTF on my laptop but i always end up using only 4 fonts – arial, verdana, trebuchet and tahoma.

  15. RocketTurtle

    Wow I didn’t realise typography and fonts were this detailed and complicated. Thanks for bringing this to my attention :)

  16. D null Patterson

    This was just what I’ve been looking for! Great Job! Thanks

  17. Bill Glass

    In the “Terms You Should Know” graphic, wouldn’t it be more accurate for the LEADING to be baseline-to-baseline? Great article, by the way … and as you know, it barely scratches the surface.

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!