.. Your Daily Design Dosis

Anatomy in Typography

| 15 Comments

Typography is a subtle craft, in which the smallest mistake can appear as a glaring error even to the untrained eye. Unlike the spoken word, which quickly passes and is forgotten, printed type has the potential to survive for hundreds of years.

The adoption of good habits and a healthy respect for type characters and fonts is a good starting point for anyone wishing to practice graphic design.

Definition ty·po·graph·y (noun)

“The selection and arrangement of typefaces, sizes, and spacing on a printed publication or web page. Typography has a major impact on the overall look and image of your page and its overall quality.”

Anatomy of letter forms

In order to discuss typography, it helps to understand the anatomy of letter forms.

Anatomy of letter forms

  1. The ascender line is the imaginary line which determines the height of ascenders.
  2. The base line is the imaginary line on which all characters rest. Descenders hang below the base line.
  3. The ascender height is the x-height plus the height of the ascending stroke. It the distance between the base line and the ascender line.
  4. The cap height is the height of capital letters. It is the distance bewteen the base line and the cap line.
  5. The descender is the stroke of a letter which dips below the base line, as in the letters g and j.
  6. The ascender is the stroke of a letter which rises above the mean line, as in the letters d, f and k.
  7. The x-height is the distance between the flat top and bottom of a lower case letter which has no ascender or descender, such as x. It is the distance between the base line and the mean line. The curved tops and bottoms of the p, o, and g extend beyond these lines so that they appear visually to fit the x-height.
  8. The cap line is the imaginary line which determines the height of capital letters.
  9. The mean line is the imaginary line which determines the height of lowercase letters. Ascenders rise above the mean line.
  10. The descender line is the imaginary line which defines the bottom reach of descenders.

Glossary of Typographic Terms

In typography, a typeface is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. For example:  8-point Caslon Italic is one font, and 10-point Caslon Italic is another. Historically, fonts came in specific sizes determining the size of characters, and in quantities of sorts or number of each letter provided.

A typeface usually comprises an alphabet of letters, numerals, and punctuation marks; it may also include ideograms and symbols, or consist entirely of them, for example, mathematical or map-making symbols.

The term typeface is frequently conflated with font; the two terms had more clearly differentiated meanings before the advent of desktop publishing.

The distinction between font and typeface is that a font designates a specific member of a type family such as roman, boldface, or italic type, while typeface designates a consistent visual appearance or style which can be a “family” or related set of fonts. For example, a given typeface such as Arial may include roman, bold, and italic fonts.

  • Font
    A collection of glyphs, generally with at least one glyph associated with each character in the font’s character set, often with an encoding. A font contains much of the information needed to turn a sequence of bytes into a set of pictures representing the characters specified by those bytes. In traditional typesetting a font was a collection of little blocks of metal each with a graven image of a letter on it. Traditionally there was a different font for each point-size.
  • Glyph
    A glyph is an image, often associated with one or several characters. So the glyph used to draw “f” is associated with the character f, while the glyph for the “fi” ligature is associated with both f and i. In simple latin fonts the association is often one to one (there is exactly one glyph for each character), while in more complex fonts or scripts there may be several glyphs per character (In renaissance printing the letter “s” had two glyphs associated with it, one, the long-s, was used initially and medially, the other, the short-s, was used only at the end of words). And in the ligatures one glyph is associated with two or more characters.
  • Kerning
    When the default spacing between two glyphs is inappropriate the font may include extra information to indicate that when a given glyph (say “T”) is followed by another glyph (say “o”) then the advance width of the “T” should be adjusted by a certain amount to make for a more pleasing display.
    In the days of metal type, metal actually had to be shaved off the slug of type to provide a snugger fit.
  • Ligature
    A single glyph which is composed of two adjacent glyphs. A common example in the latin script is the “fi” ligature which has a nicer feel to it than the sequence.
  • Style
    There are various conventional variants of a font. In probably any writing system the thickness of the stems of the glyphs may be varied, this is called the weight of a font. Common weights are normal and bold. In LGC alphabets an italic (or oblique) style has arisen and is used for emphasis. Fonts are often compressed into a condensed style, or expanded out into an extended style. Various other styles are in occasional use: underline, overstrike, outline, shadow.

Types of typefaces

Typographers have developed a comprehensive vocabulary for describing the many aspects of typefaces and typography. Some vocabulary applies only to a subset of all scripts. Serifs, for example, are a purely decorative characteristic of typefaces used for European scripts, whereas the glyphs used in Arabic or East Asian scripts have characteristics (such as stroke width) that may be similar in some respects but cannot reasonably be called serifs and may not be purely decorative.

  • Sans-Serif
    A typeface that is straight with no serifs or small extensions on letters; generally used for headers.
    e.g. Helvetica, Futura, Calibri, Corbel
  • Serif
    1. The fine line that extends from the top and bottom of letters making them easier to read, used for the body text of a book.
    2. A style of typeface which has serifs.
    e.g. Bodoni, Georgia, Cambria, Garamond, Minion
  • Antique
    Antique typefaces have a long history and can be used to evoke a period feel.
  • Decorative
    Decorative typefaces include highly decorated and really eccentric fonts, often with very specific uses and rarely appropriate for more than three words at a time.
  • Script
    Script typefaces, which resemble handwriting, can be subdivided into traditional scripts that look as though they were produced by a quill pen and those that mimic modern styles of handwriting.
  • Symbol
    Symbol typefaces are composed of graphic icons to provide embellishments to text. These are sometimes created to complement a specific font.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

15 comments

on this article: “Anatomy in Typography”
  1. Hi Ted,

    thanks man, appreciate it! Cheers & Ciao ..

  2. Lots of interesting information. Looks like the author did a good job.

  3. Hi clawlaler,

    Hope to see you a second time? Cheers & Ciao ..

    Hi Ray,

    You’re welcome, thanks for the compliment! Cheers & Ciao ..

    P.S.: the Twitter ID field is for your twitter-accont name, not your web-URL

  4. very good information you write it very clean. I’m very lucky to get

    this info from you.

  5. Hey Wotinski,

    Thanks for your visit and comment, very appreciated! Cheers & Ciao …

  6. Very great website.
    The info here is genuinely useful.

    I will give it to my friends.

    Cheers

  7. Hi gogslitty,

    I’m glad to see you’re becomming a frequent reader of the gonzoblog.nl, cheers!

    About the topic of ‘How Frequently to Update your Blog’ I will be writing in the near future, so thanks for reminding me ;-P

    Cheer & Ciao,…

    BTW: like your blog, good intersting topics.

  8. Hi forex-strategy,

    Be my guest and bookmark me, hihi! You can also subscribe to our RSS, you’ll be the first to know when there will be a new post.

    Cheers & Ciao …

  9. Hi Leandra,

    thanks for your awesome remark, very appreciated! Please do come back for (hopefully) more interesting articles?

    Cheers & Ciao …

  10. Awesome info. Will definitely come back again!

  11. Hi PLT,

    sorry for my late reply, but I seem to have missed your comment on the gonzoblog.nl?

    Never the less, your comment is highly appreciated, cheers & gracias!

    See ya next time, ciao ….

  12. I should say that http://www.gonzoblog.nl has lots of interesting information. Looks like the author did a good job. I will be coming back to the gonzoblog.nl for new information. Thank you.

top