Crash course in typography: know your terms!

Typography is a designer’s secret weapon. It may not be as pronounced as a graphic component, but master the art of choosing the right type — something fresh and gripping — and you’ll have a distinct edge over your less enlightened peers.

Among the designers who do know how to use type, there are two subgroups: those who can talk about typography, and those who cannot (a staggering number of people misuse the word “font” without even knowing it!). Knowing your terms and being able to articulate typographic design concepts from an analytical perspective is a major skill. Not only is this a great way to convince clients of your design’s value but peer-to-peer discussion generates new concepts and pushes the art form forward.

This article is the first part in a series exploring one of the oldest ongoing design projects in all of human history: the alphabet.

Now, on to step 1 towards being on the cutting edge: knowing your terms!

BASIC DEFINITIONS 

Character - any sign or symbol that carries meaning in a written language.


5 different characters

Glyph - the specific shape or design of a character.

 
5 different glyphs

Typeface - a set of glyphs designed according to common principles; it is the overall appearance of a complete set of characters.


(Left to right) Baskerville, Didot and Futura are three typefaces

Font - traditionally, font is defined as a set of characters of a certain typeface, that are of the same family (weightslope and width usually determine this. For example, bold and italic are both font families) and of the same size (i.e. 12 point).

However, since the introduction of digital technologies, vector graphics has made it possible to scale characters freely, so it is no longer necessary to characterize fonts according to size. As a result, the modern usage of “font” usually refers to typeface and font family only (i.e. Minion Pro Italic).


8 separate fonts according to the traditional definition; 4 separate fonts according to modern usage

TYPEFACE ANATOMY 

Proportion - in proportional typefaces, such as Times Roman, glyphs are of varying widths.

Times Roman – a proportional font

In monospaced (a.k.a. non-proportional, fixed-width) typefaces, like Courier, every glyph is the exact same width.

People generally find proportional typefaces easier to read, but monospaced typefaces align into columns nicer and are still the preferred style for manuscript submissions (this is traditionally because they made it easier for editors to determine word count, before the days of word processing software).


Courier – a monospaced font

Kerning vs. tracking - when composing words in proportional typeface, often not all letters will have an equal amount of space between them, because certain letter pairs fit together in a way that looks nicer with overlap. For example, in the letter pair VA, the rightmost point of the V is further right than the leftmost point of the A. In contrast, in the letter pair ST, the rightmost point of the S is still further left than the leftmost point in the T.

This spacing adjustment depending on letter pairs and how they fit is known as kerning. Meanwhile, tracking refers to the spacing between letters of a group (a word, s e n t e n c e ,  l  i  n  e  ,   e   t   c   .   ) and does not depend on what shape the letters are or how they might “fit.”


Tracking vs. kerning

Metrics - Imagine that the letters of a typeface sit on a straight horizontal line — the base line. Certain glyphs like g, j, p, and y have parts that dip below the base line. These parts are called descenders. The lowest point that descenders of a given typeface reach is that typeface’s descender height.

Above the baseline, imagine another horizontal line resting above the average lower case letter — for example, the line that would rest evenly above the word “egg” or “moss.” This is the midline, or x-height. Some glyphs like b, d, f, h, i, k, l and t have parts that rise above the midline. These parts are called ascenders and the highest point a given typeface’s ascenders reach is its ascender height.

Finally, the horizontal line that sits above a typeface’s CAPITAL letters is its cap height. Cap height and ascender height are often the same, but not always, as with Minion.


The metrics of typeface Minion

Serifs - in roman lettering systems, tales, knobs and other little forms added to the end of strokes for purely ornamental value are known as serifs. Serif fonts also tend to have strokes of varying widths.

Typefaces that lack serifs are known as sans serifs (without serifs) or grotesks (so named because, when first introduced in Germany, people found this style grotesquely ugly). Serifs are now most common in dense passages or bodies of text because the strokes help with readability. Sans serifs are commonly used for larger headlines, public signs and on the web.


Century Old Style, a serif (left) and Futura Book, a sans serif (right)

The list of typography-related terms is huge but this should cover the basics.

Stay tuned for part 2: the evolution of typographic technology.

Any terms you’d like to share? Teach us in the comments!

Alex Bigman is liaison to 99designs' awesome community of graphic designers. He is a recent grad of UC Berkeley, where he studied history of art and cognitive science.
Alex Bigman
View all posts by Alex Bigman
Alex's website

14 Comments

  1. AJ4iQ

    Informative article, I really like it and I did learn all that & more in college, but this one is really refreshing my mind even more.

    I have a great website for you & other fellows about typography.
    which is:

    http://www.thinkingwithtype.com/

    it is really really helpful and professional website regarding your topic and
    the author has a series of books regarding typography.

    Thanks again,

    cheerz

    Reply May 8, 2012 at 3:06 pm
    • Allison Stuart

      Thanks for the link! We have the 2nd edition of “Thinking with type” in the office library. :)

      Reply May 8, 2012 at 5:09 pm
    • Alexander99

      Hear hear! Fantastic book.

      Reply May 8, 2012 at 5:32 pm
  2. athenabelle

    hi guys, wanna test yourselves and play? :D
    http://shape.method.ac/
    http://type.method.ac/
    hihi, please write your scores :P

    Reply May 8, 2012 at 8:07 pm
    • Allison Stuart

      Sweet, thanks so much for the links anthenabelle! What were your scores? ;)

      Reply May 9, 2012 at 9:44 am
  3. lu_24

    Hi there! A really informative and interesting article, expecially for those who didn’t study at a design course! Also, it’s really well made and easy to understand. Only one thing: did the definitions and images for gliph and character get inverted? I’m quite sure that the gliph is a symbol carrying a meaning, while a character is the different shape of a gliph…

    As for “Thinking with type”, it’s one of the most useful typography manuals out there, I grab my copy anytime I’m in trouble, but I would also recommend Robert Bringhurst’s “The Elements of Typographic Style”, that, even if it’s heavier to read, is one of the best sources of wisdom for any typographic doubt.

    I’ll follow Athenabelle’s example and post a little fun game I discovered last week, this is about serif and sans-serif: http://www.tothepoint.co.uk/more/fun/shoot_the_serif/index.html Have fun! :)

    Cheers!

    Reply May 9, 2012 at 2:05 am
    • Alexander99

      Thanks for the link, lu_24! And when you’re done pulverizing the serifs, I see this design studio has some great resources to check out in their “news” section, too.

      As for characters and glyphs, my definitions are not inverted. It’s a bit confusing, as the two terms can be used interchangeably in many circumstances. As far as typography is concerned, though, it is generally understood that character refers to the unit of meaning and glyph refers to the shape. See here: http://www.fonts.com/AboutFonts/Articles/SituationalTypography/ConfusingTypeTerms.htm

      Cheers!
      Alex

      Reply May 9, 2012 at 10:02 am
      • lu_24

        Yes, they have a lot of interesting and useful stuff!

        Thanks for your link, too, I see what you mean now! I probably got a bit confused by the terms, as I discovered the word for “character” is almost a “false friend” in my language… So, I’m sorry for pointing that out, at least now I know those english terms better! :)

        Thanks!
        Luisa

        Reply May 9, 2012 at 10:32 am
  4. Richard Sheppard

    Leading – aka the CSS line-height property. The space between to lines of text.

    Reply May 15, 2012 at 10:35 pm
    • Allison Stuart

      Thanks, leading is an important one to know.

      Reply May 16, 2012 at 12:15 pm
  5. Barry Stamp

    Nice article, Alex. Takes me back to my typography lessons at college, before the creation of DTP and computers. Back in those days we had to hand construct all text. One thing I will question, though, your claim that the humble serif was purely decorative – not so. The serif played a hugely important role. It comes into its own when carving text in stone. Stonemasons found that if you carve a sans serif font in stone the stone can split along the line of the verticals in the font. To stop this they ‘capped’ these lines with perpendicular strokes – the serif. They also work well in books to define the line of the text and give the eye an natural path to follow.

    I had hoped, in the terms section, to visit old friends ems, ens, picas and points – maybe I missed that bit or maybe you’re saving it for a later blog?

    Reply May 19, 2012 at 1:54 am
    • Alexander99

      Barry, that is truly fascinating about serifs in stone! I had no idea — thanks for sharing!

      With regard to serifs giving your eye an easy path to follow in books, I have heard that as well, but I have also heard of studies proving that the benefit is negligible. People seem to do just as well reading sans serifs in book passages (and this is how many textbooks in Europe are printed these days).

      I wasn’t going to get as detailed as ems, picas, and other typographic units of measurement (if I listed every typographic term, this post would be massive!), but if you care to give a quick lesson here in the comments I absolutely encourage you to do so!

      Reply May 21, 2012 at 2:35 pm
  6. Bojan Živković

    InDesign Type: Professional Typography with Adobe InDesign (2nd Edition) is a book I want to recommend, I am currently reading Thinking with type, there is no difference in quality between these two books, in fact I found first more useful because is directly related to software I am using.

    Reply May 31, 2012 at 12:59 am
    • Allison Stuart

      Thanks for the recommendation. We’ll be sure to send it as a resource to designers.

      Reply June 1, 2012 at 11:16 am

Leave a comment