The Complete Guide To Typography In 21 Stunning Illustrations

Typography has become the number one feature of your work that grabs the attention of your readers or customers if chosen correctly. Whether you are a designer or a publisher, knowing the terminology of Typography will definitely come in handy. It may look boring at first sight, but if you give it a chance, you might actually end up discovering new ways to attain perfection in your works. Besides the fact that your vocabulary will astound your peers from now on, this guide is your golden ticket to the professionals’ club!

And thanks to our colleague, Doink, your learning experience will definitely prove to be an enjoyable one. So let’s plunge into these 21 spellbinding illustrations and learn the secrets of Typography.

ADVERTISMENT:
The Best Deals For Digital Design Assets - InkyDeals.com. Learn More>>

anatomy-fonts-3

1. Aperture
[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-2-by-inkydeals.png” width=”900″]

The opening at the end of an open counter.

2. Baseline

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-3-by-inkydeals.png” width=”900″]

As the legendary Les Claypool puts it – “the baseline is the line upon which most letters “sit” and below which descenders extend. The vertical distance of the baselines of consecutive lines in a paragraph is also known as line height or leading, although the latter can also refer to the baseline distance minus the font size.

North Indian scripts have a characteristic hanging baseline; the letters are aligned to the top of the writing line, marked by an overbar, with diacritics extending above the baseline. East Asian scripts have no baseline; each glyph sits in a square box, with neither ascenders nor descenders. When mixed with scripts with a low baseline, East Asian characters should be set so that the bottom of the character is between the baseline and the descender height. “

3. Ascender

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-4-by-inkydeals.png” width=”900″]

Well, the ascender, in typography, expresses the mean line of a font. It makes the font more recognizable, more “warm” if you choose to put it like that.

4. Descender

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-5-by-inkydeals.png” width=”900″]

As opposed to the ascender, the descender is that part of the letter that goes below the x-height.

5. Uppercase

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-6-by-inkydeals.png” width=”900″]

Just a fancy name for the capital letters.

6. Lowercase

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-7-by-inkydeals.png” width=”900″]

Another fancy name, but for the smaller form of letters.

7. Serif

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-8-by-inkydeals.png” width=”900″]

Serif represents the feet of the letters. Also known as a font type.

8. Shoulder

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-9-by-inkydeals.png” width=”900″]

A curved stroke originating from a stem.

9. Stem

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-10-by-inkydeals.png” width=”900″]

Nothing more than the primary vertical stroke.

10. X-height

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-11-by-inkydeals.png” width=”900″]

The height of the main body of a lowercase letter.

11. Bowl

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-12-by-inkydeals.png” width=”900″]

A curved stroke that encloses a letter’s counter.

12. Counter

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-13-by-inkydeals.png” width=”900″]

Fully or partially enclosed space within a letter. These space stirred your imagination as a kid.

13. Stroke (diagonal)

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-14-by-inkydeals.png” width=”900″]

An angled stroke.

14. Spine

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-15-by-inkydeals.png” width=”900″]

The main curved stroke for a capital and lowercase “s”.

15. Arm

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-16-by-inkydeals.png” width=”900″]

A horizontal stroke not connected on one or both ends.

16. Leg

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-17-by-inkydeals.png” width=”900″]

Short, downward stroke.

17. Cross stroke

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-18-by-inkydeals.png” width=”900″]

A stroke across a stem.

18. Ball terminal

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-19-by-inkydeals.png” width=”900″]

An end in a circular shape.

19. Hairline

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-20-by-inkydeals.png” width=”900″]

The thin strokes of a serif typeface.

20. Apex/Vertex

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-21-by-inkydeals.png” width=”900″]

The top and bottom points where strokes meet.

21. Arc of stem

[pixel77_caption type=”1″ src=”https://pixel77.com/wp-content/uploads/2015/10/font-anatomy-22-by-inkydeals.png” width=”900″]

Curved stroke, continuous with a stem.

 

This is where your journey ends! Hope this guide proved to be useful to you and now you can fully master the fascinating art of Typography. Don’t forget to leave your impressions in the comment section bellow!

Editor’s Note: This post was originally published in September 2015 and has been completely revamped and updated for accuracy and comprehensiveness.

(Visited 10,224 time, 1 visit today)

21 Comments The Complete Guide To Typography In 21 Stunning Illustrations

  1. Kim Sep 18, 2015 at 14:33

    Thanks Elena (and Doink). This was really useful information and well presented.

    Reply
  2. Enamul Hoq Oct 10, 2015 at 00:08

    Really nice Typography here and wonderful and helpful tips for illustrations

    Reply
  3. stephenie Oct 16, 2015 at 16:43

    Is the full infographic (as seen at the top) available anywhere that can be shared at a larger size? I would love to share it with my design students, it is really great!

    Reply
  4. William Oct 16, 2015 at 18:10

    I would like a high res file too. How many shims?

    Reply
  5. egiova Oct 16, 2015 at 20:35

    For the record:
    Uppercase, from upper drawer.
    Lowercase, from lower drawer.
    As they was accommodated in typograph drawers.
    Anyway, anything made for typography case is a good thing.
    Nice job.

    Reply
  6. Michael Oct 16, 2015 at 21:37

    I am with Stephenie, can i get this in a higher resolution graphic. I would love to print it and have it on my wall.

    Reply
  7. Md Razaul Karim Oct 17, 2015 at 19:22

    Your guide line is help me in my professional life. Thanks for sharing……………

    Reply
  8. Luis Felipe Oct 18, 2015 at 00:57

    Hello. Do you have this image in hi-res??? I loved it!

    Reply
  9. sandra rodriguez Oct 20, 2015 at 00:31

    would love a hi res file of this as well…:)

    Reply
  10. Claudia Oct 21, 2015 at 11:56

    Hey guys,
    My colleague managed to edit the post and provide higher resolution images. They are 900 pixels wide since they were designed for the web and not print. It should at least be enough for school presentations and such.

    Good luck with your projects!

    Reply
  11. stephenie Oct 30, 2015 at 05:17

    Thanks very much Claudia! :)

    Reply
  12. Nicholas D'Angelo Feb 3, 2016 at 18:08

    I would gladly pay for a high rez version of this poster and/or a nice poster. Please let me know.

    Nick

    Reply
  13. christina Mar 7, 2016 at 21:45

    I would really like to have the high res version of this too, where can I get it? please advice

    Reply
  14. wilson Mar 8, 2016 at 01:10

    Thanks very much !

    Reply
  15. Angelo Mar 8, 2016 at 09:32

    I was taught this at Uni. Its been a while and i had forgotten a lot of these but thank you for the post its so nostalgic

    Reply
  16. Ember Mar 8, 2016 at 10:02

    If E’s and F’s have arms, and T’s have cross strokes, what do H’s have?

    Reply
  17. Sky Mar 8, 2016 at 14:40

    OK, did everyone miss the awesome Primus reference in Baseline (2) ?

    Reply
  18. Yohannes Alemu Mar 9, 2016 at 15:16

    It is nice overview. It gives me more attention on the design of any Typography

    Reply
  19. jatzio Mar 10, 2016 at 11:40

    Typography is like Love, it is complex, it is beautiful.

    Reply
  20. Anish Shah Mar 19, 2016 at 10:12

    THANKS FOR INSPIRING POST…WHERE IS .PDF FOR DOWNLOAD? If possible pl. send pdf at my email add.

    Reply
  21. Anonymous May 22, 2018 at 03:58

    I am really so inspired by your lovely post. Thanks a lot for the helpful sharing

    Reply

Leave A Comment

Your email address will not be published.