5 Basic Facts about Typography

Let’s start off with a simple question.
Which of these would you trust more as a soap brand?


Probably not the first one unless you want to bathe in a sticky, gooey texture. And if the Dove skincare brand appeared as an ice cream bar, would you buy it?

Again, probably not. If the first picture was a real ice cream bar, there’s nothing on the box that tells us about the taste. Whereas the second picture has the brand name “Dove” written in a tantalizing chocolate syrup while the rich colors and curvatures slowly draw you in. As consumers, we are all guilty of judging a product by its packaging, and the most important part to a package design is the typography.

Typography is the art of designing letters that communicates a feeling and it determines the effectiveness of a design. From traditional print to modern digital, typography helps create an experience for the reader or user before they even open a magazine or click on a button. It goes beyond choosing a weight and size for some letters. Typography involves many components such as the selection of the point size, stroke length, and spacing.

Before you shy away from this topic, here are some 5 basic facts about typography and some extra knowledge that would impress any graphic designer.

  1. Typeface vs. Fonts 

    A typeface is a collection of fonts, and a font is a style within that family. For example, Gotham is a typeface and Gotham Book Italic is a font. 

    However, experts say that there is a growing acceptance for people to use the terms font and typeface interchangeably so don’t panic if you confuse the terms.

  2. Proper Terminology of the Anatomy

    It is not necessary to know all these terms, but these are the meaningful elements that designers have to think about when creating or using a typeface. The most commonly used are the terms serif and stroke.

  3. Sans Serif vs. SerifSerif is the small projection you see at the bottom of the “i” in the picture above. It is often referred to as the “feet” of a letter. In French, the word sans means “without” so fonts that are Sans Serif are fonts without “feet”.
  4. Hanging punctuation

    I adore people who know of and use hanging punctuation.
    Screen Shot 2014-12-02 at 11.05.49 AM
    As you can see from the first quotation mark, there is a break in the flow of the text on the left hand side. This destroys the text alignment aesthetically since our eyes constantly search for straight lines. That is why proper typography hangs punctuation such as bullet points, glyphs (special characters), numbers, and quotation marks.Correct Quotation marks

  5. Kerns & Ligatures

    When parts of the characters’ anatomy clash, you can either space it out by kerning or combine the characters to form ligatures. Don’t be alarmed if you have no idea what I’m talking about. Here is an example to help you visualize it.

    Notice how the top of the “f” flows into the dog of the “i” after the “fi” becomes a ligature. This technique is often used when designers are creating logotypes or dealing with headlines, and it shows a typographic maturity and understanding of the craft.
    Ligatures are also used for linguistic purposes. That is why there are special characters for the follow ligatures.

    Æ Æ Capital AE
    æ æ Lower-case ae
    ΠΠCapital OE
    œ œ Lower-case oe

    The tricky thing about using ligatures on the web is that basic HTML does not automatically recognize characters that can form ligatures. Even if a code scans a block of text and notices any of the five main ligatures (fi, ffi, fl, ffl, and ff), it has been up for debate whether or not ligatures improve readability on screen or not.

    Fun fact: The “&” character is actually a ligature for “et”.

Hooked? More typography related sites for the curious minded:

Animated typeface: http://vimeo.com/14386531
List of innovative usages of typography in web design: http://www.smashingmagazine.com/2013/08/06/beautiful-typography-web-design/
Typography Humor: http://www.buzzfeed.com/expresident/the-very-best-of-awful-font-and-typography-humor
Typography Trends: http://techstream.org/Web-Design/Hot-Typography-Trends


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s