Typography could be considered the most important part of any design. It’s definitely among the most important elements of any design project. And yet it’s often the part of a design that’s left for last, or barely considered at all. Designers are often intimidated by typography, which can result in bland typographical design or a designer always using one or two “reliable” typefaces in their designs.
This series aims to change that. If you’re intimidated by typography, or even just aren’t quite sure where to start, then read on. We’ll break down typographic theory and practice, starting with the basics (so that everyone starts on the same page).
In this part, we’ll talk about the basics of typographic theory, including the different kinds of typefaces (and how typefaces and fonts differ), as well as the basic anatomy of a typeface. And each part will also offer more resources for delving deeper into typography.
Sign up for a free Jotform account to create powerful online forms in minutes — with no coding required.
Typefaces vs. Fonts: Difference?
A lot of people use the terms “typeface” and “font” interchangeably. But they’re two very distinct things. Before we get started talking about typography, let’s get our terms straight.
A typeface is a set of typographical symbols and characters. It’s the letters, numbers, and other characters that let us put words on paper (or screen). A font, on the other hand, is traditionally defined as a complete character set within a typeface, often of a particular size and style. Fonts are also specific computer files that contain all the characters and glyphs within a typeface.
Several types of fonts are;
- Old style serif
- Transitional serif
- Square sans-serif
- Geometric sans-serif
- Formal script
- Casual script
When most of us talk about “fonts”, we’re really talking about typefaces, or type families (which are groups of typefaces with related designs).
There are a number of different ways to classify typefaces and type families. The most common classifications are by technical style: serif, sans-serif, script, display, and so on. Typefaces are also classified by other technical specifications, such as proportional vs. monospaced, or by more fluid and interpretational definitions, such as the mood they create.
Technical Style of Typefaces
We will go over 6 different typefaces which are own characters. You can find a diverse range of fonts under these typefaces.
Serif typefaces are called “serifs” in reference to the small lines that are attached to the main strokes of characters within the face. Serif typefaces are most often used for body copy in print documents, as well as for both body text and headlines online. The readability of serifs online has been debated, and some designers prefer not to use serifs for large blocks of copy.
Within the serif classification, there are many sub-types. Serif typeface includes:
- Old Style Serifs like Adobe Jenson, ITC Berkeley Oldstyle, and Goudy Old Style
- Transitional Serifs like Times New Roman, Baskerville, and Americana
- Neoclassical & Didone like Didot, Marconi, and Bodoni
- Slab Serifs like American Typewriter, Rockwell, and Soho
- Clarendon Serifs like Bookman, Clarendon, and Nimrod
- Glyphic Serifs like Albertus, Cartier Book, and Friz Quadrata
Old Style serifs (also called humanist) are the oldest typefaces in this classification, dating back to the mid 1400s. The main characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones). Typefaces in this category include Adobe Jenson, Centaur, and Goudy Old Style.
Transitional serifs date back to the mid 1700s, and are generally the most common serif typefaces. Times New Roman and Baskerville are both transitional serif fonts, as are Caslon, Georgia, and Bookman. The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs, but less so than in modern serifs.
Modern serifs, which include typefaces like Didot and Bodoni, have a much more pronounced contrast between thin and thick lines, and have have a vertical stress and minimal brackets. They date back to the late 1700s.
The final main type of serif typeface is the slab serif. Slab serifs have little to no contrast between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths. The underlying characters hapes often more closely resemble sans serif fonts.
Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. The first sans-serifs were created in the late 18th century.
There are four basic classifications of sans-serif typefaces:
- Grotesque like Venus, Monotype Grotesque, and News Gothic
- Neo-Grotesque like Helvetica, San Francisco, and Roboto
- Humanist like Tahoma, Verdana, Calibri, and Trebuchet
- Geometric like Gotham, Avenir, and ITC Avant Garde
Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenz Grotesk. These typefaces often have letterforms that are very similar to serif typefaces, minus the serifs.
Neo-Grotesque typefaces include some of the most common typefaces: MS Sans Serif, Arial, Helvetica and Univers are all neo-grotesque sans serif type fonts. They have a relatively plain appearance when compared to the grotesques.
Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande. These are more calligraphic than other sans-serif typefaces, and are also the most legible (hence the popularity of some of them for website body copy). They’re more calligraphic than other sans-serifs, meaning they have a greater variation in line widths.
Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail. They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule.
Scripts are based upon handwriting, and offer very fluid letterforms. There are two basic classifications: formal and casual. Formal scripts are often reminiscent of the handwritten letterforms common in the 17th and 18th centuries. Some scripts are based directly on the handwriting of masters like George Snell and George Bickham. There are modern creations, too, including Kuenstler Script. They’re common for very elegant and elevated typographical designs, and are unsuitable for body copy.
Casual scripts more closely resemble modern handwriting, and date back to the mid-twentieth century. They’re much less formal, often with stronger strokes and a more brush-like appearance. Casual scripts include Mistral and Brush Script.
Display typefaces are probably the broadest category and include the most variation. The main characteristic is that they’re unsuitable for body copy and are best reserved for headlines or other short copy that needs attention drawn to it. Display typefaces can be formal, or informal, and evoke any kind of mood. They’re more commonly seen in print design, but are becoming more popular online with the use of web fonts.
Also included among display typefaces are blackletter typefaces, which were the original typefaces used with the first printing presses. Since that time, better, more readable fonts have been developed.
Dingbats and Specialty Typefaces
Dingbats are specialty typefaces that consist of symbols and ornaments instead of letters. Wingdings is probably the best-known dingbat font, though there are now thousands, often created around themes.
Proportional vs. Monospaced Typefaces
In proportional typefaces, the space a character takes up is dependent on the natural width of that character. An “i” takes up less space than an “m”, for example. Times New Roman is a proportional typeface. In monospace typefaces, on the other hand, each character takes up the same amount of space. Narrower characters simply get a bit more spacing around them to make up for the difference in width. Courier New is one example of a monospace typeface.
Mood of Typefaces
The mood of a typeface is an important part of how it should be used. Different typefaces have strikingly different moods. Commonly used moods include formal vs. informal, modern vs classic/traditional, and light vs dramatic. Some typefaces have very distinct moods. For example, Times New Roman is pretty much always going to be a traditional font, which is why it’s so commonly used for business correspondence. Verdana, on the other hand, has a more modern mood.
Some typefaces are more transcendent, and can convey almost any mood based on the content and the other typefaces they’re combined with. Helvetica is often considered one such font.
Weights & Styles
Within the majority of typefaces, you’ll find more than one style and/or weight. Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black”. Each of these refers to the thickness of the strokes that make up the characters:
There are three general styles you’ll find with many typefaces: italic, oblique, and small caps. Small caps are often used for headings or subheadings, to add variety to your typography if using a single typeface.
Italic and oblique are often confused or used interchangeably, but are two distinct styles. Oblique type is simply a slanted version of the regular characters. You could create this using the “distort” function in Photoshop, although sometimes a separate oblique font is included within a typeface. Italics are slanted like obliques, but are actually a separate set of characters, with their own unique letterforms.
The Anatomy of a Typeface
The different letterforms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash. Here are the most basic parts of a typeface:
The above image shows the different guidelines that are generally present in a typeface. The baseline is the invisible line that all the characters sit on. Rounded letters sometimes sit just a tiny bit under the baseline, and descenders always drop below this line. A given typeface will have a consistent baseline.
The meanline is the height of most of the lowercase characters within a typeface, and is generally based on the lowercase “x” if there are varying heights among the lowercase characters. This is also where the term “x-height” comes from. The cap height is the distance between the baseline and the top of uppercase letters like “A”.
The above illustration shows three common parts to letterforms. The stem is the main upright of any letter, including the primary diagonal. It’s could be considered the anchor of the character. The bar is any horizontal part, which are sometimes also called arms. The bowl is the curved part of a character that creates an interior empty space. The inside of a bowl is a counter.
The ascender of a lowercase character is any part that rises above the meanline, such as the uprights on the letters “d”, “h”, and “b”. Descenders are the parts of a lowercase character that drop below the baseline, such as in a “p”, “q” or “g”.
Serifs are the extra flourish at the end of a stroke on serif typefaces. Some typefaces have very pronounced serifs, while others are barely distinguishable.
The aperture of a character refers to the opening at the bottom of some characters, such as the uppercase “A” or lowercase “m”. An ear is a decorative extension on a letter, as highlighted on the “g” above. Hairlines are the thinnest part of a serif typeface.
Crossbars are horizontal strokes, as found on the uppercase “A” and “H”. Terminals are only found on serif characters, and are the end of any line that doesn’t have a serif. Loops are found on some lowercase “g” characters, and can be fully closed or partially closed.
Spurs are tiny projections from curved strokes, such as on some uppercase “G” characters. Links connect the top and bottom bowls of a double-stacked lowercase “g”. The spine is the curved stroke found on the letter “s”.
Tails are sometimes-decorative descending strokes, as seen on an uppercase “R”. Finials are the tapered endings of some strokes. Shoulders are any curved stroke that originate from a stem.
In Part 2…
Next Monday we’ll discuss paragraph composition and using special typographic characters, like ligatures and hyphens. We’ll dive right into basic typographic layouts, and how to decide on a typeface for your project. Stay tuned!
- Anatomy of a Typeface – An excellent graphical reference for the parts of a typeface’s characters.
- Type is Sexy – This site has a great section on the anatomy of a typeface.
- Which Font? Voice of Typography – This article discusses the voice (mood) of typefaces, and how they impact a design.
- Type Classificiations – A visual representation of the different typeface classifications, from the Adobe Type Library.
- ABC Typography – A Virtual Type Museum – This site offers a museum-style history of typefaces, including classification information.
the day of reckoning is coming
This is exactly what I was looking for. As a beginner like myself, this article helps to clear confusion regarding different technical terms ( geometric, Grotesque, Humanist... etc. ) used to describe a typeface.
Great example and a lot of different typography types which helps you understand better.
Great examples, but if you're going to each a lesson on typography, you should realize the AWFUL GAPING HOLES in the kerning of said examples!! Specifically, the 2nd graphic "Crimson text is a serif typeface" .. I found that via google search about typography examples and was a tad shocked.
Thanks for your clear explanation on the topic!
Is part 2 actually published? Couldn't find it anywhere
Wow, this is probably the best typography explanation for a design beginner like myself. You made it super easy to understand. Thank you!
Thank you very much for this! It really came in handy because am doing graphic design first year student.
To all those whom have disgraced my article "A Crash Course in Typography", I have seen all of your crude comments such as "penis", or "bottom text", as well as the spam comments. I am looking into creating a character limit on these comments, as well as a requirement to confirm that your email is in fact yours. I find all of this very childish, and I am really bothered by it. I'd appreciate you all resisting the urge to do these things to other peoples possessions.
THANK YOU FOR MAKING THIS, this website has really taught me a lot about typing
Thank you for the interesting article. For a beginning enthusiast in typesetting like me, this article is a great introduction to the field. Looking forward to going through the entire course.
Thank you very much.
very interested in the debate around the readability of serif type online.
Where does this come from? It goes against everything I ever learned after years in the graphic arts and publishing business.
Thanks for taking the time to type this up and publish it. This is a PERFECT crash course for typeface. Gives you everything you need to know if you just want the basics, and is a great jumping point for anyone who wants to know more. Well done.
very useful information!!! Thanks
Thank you for this. Just starting out on my journey into design and this was very simple and easy to follow and to understand. Thank you for writing it :)
Thank you. My wife was a graphic designer when I met her. Later a creative director in the world of print advertising. When we first started dating she said that for me to fully understand what she does and what she values I would have to learn about type.
I spend our first few dates learning and setting type. We looked at type books and she taught me how to use a Schaedlere ruler. I came to love the dedication and belief she had in the art of type and what it could do on a printed page. Type spoke as much as the language. How could you not fall in love with someone like her who would move a period a 16th of an inch to make the headline work better. I miss her.
Great article, it sure helped, me as as I am doing a destop publishing course. Thanks and keep it up!
We really enjoy what you write about here. We try and visit your site every day so keep up the good posts!
really helpful, thanks
Such a wonderful article, so informative yet interesting. Thank you for the effort and Im a fan.
wow, it's like a school of font
I wish I had this article back when I was still in school! Great stuff :D
Thank you so much for sharing this article with us!! I am eagerly waiting part II!
Great article for typography newbies! Thanks for sharing :)
Thanks, a clear and useful presentation.
Great post, thanks!
Another useful typographic resource combined with CSS usage:
Definitely waiting to see part 2 :)
Nice little refresher there. Thanks!
Such an educational article. I loved it. Specially type anatomy.
I'm new to typography but learned a lot. Thanks for great article. I have slight problem with "The Anatomy of a Typeface" because i guess it getting too much into details but some will definitely need this knowledge...
Waiting for Part II
Fantastic article. Thank you so much!
Really enjoyed reading the post which is both informative and visual. Thanks.
Excellent article! I learnt a lot from it, and is also very interesting. Thanks :)
What is the mood of Trebuchet MS
Can't wait for the second part.
Great post :)
Looking forward for the paragraph composition!
Nothing like a little refresher to remind me what an aperture was. More so, a great intro for the beginner. A very handy and concise post. Thank you!
Very simple and tidy explanation.
Very useful and a great summary, thank you for that!
Really useful tutorials, especially for beginner designers like me. Learned a lot about typography. Thanks.
Very nice info and well written
Simple and informative, Thank you!
Excellent crash course. I will definitely be back for more as I am quite keen on learning the basics of web and graphic design:) Thanks.
Excellent post - thank you! This comes at the perfect timing as I am just 2 weeks in on learning typography. Looking forward to next weeks post!
Nice and simple, but with a fair bit of information. Much appreciated! The importance of typography is often forgotten.