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.
Typeface vs. Fonts
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.
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.
- 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”.
I adore people who know of and use hanging punctuation.
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.
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.
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