10 Typography Terms Every Designer Should Know

By on May 24, 2016 in Tutorials
10 Typography Terms Every Designer Should Know

So you’ve got a passion for design, but you can’t tell your x-height from your ascender and you think a Bézier Curve is a new chair from IKEA. Don’t worry, here’s a quick guide to some essential terminology to get your feet wet in the typography ocean. Since design is a visual art, I’ve provided some examples from Creative Market shops to illustrate the different terms.

For starters, every font exists along four imaginary parallel lines: ascent, median, base and descent.

Ascent

This is the top most line that the upstroke from lowercase letters such as l, h, and d should reach. Not to be confused with the cap height which is the apex of your capital letters. You can see a good variance in cap height versus ascent in Roadstar Font Script. In some fonts these two heights are the same, or the cap height is actually taller than the ascender, such as Blake.

TypeTerms-1Save

Median (aka: mean line, x-height)

The median is where most of your lower case letters should reach their maximum height. This is also called the x-height, because it is set from the height of the x in your font. Cabrito Sans is a elegant font that keeps a strict median, which gives it a very calm and controlled feel.

TypeTerms-1Save

Base Line

All your characters sit on the base line. It is the lowest point of all capital letters and most lowercase letters. Notice how even in a messy font like Ship Painter’s Rough all the characters sit on the same line.

TypeTerms-4Save

Descent

For characters that have strokes that go below the baseline like j, g, and q, the descent marks the lowest point that their lines meet. They don’t just have to be straight lines either; check out the creative descents of Daisy Font.

TypeTerms-4Save

Ascender/Descender

The ascender is the upward stroke above the x-height in a lowercase letter like d, b, or h. It should touch the ascent. Dawnora Headline has short ascenders that make the letters appear much wider. The descender is the opposite: it reaches from the baseline to the descent in letters like q, p, and j.

TypeTerms-4Save

Serifs

These are small finishing strokes on ends of characters. They fall in line or perpendicular to the four lines mentioned above to guide the reader’s eye across the page. Always Here is a great example of an outside-the-box serifed font. While it has the extra strokes, they don’t match up with the cap and base lines. This creates a handwritten feel while keeping the classical fancy of serifs. Fonts that lack a serif are known as sans serif or simply sans. They tend to feel more modern such as Uni Sans.

TypeTerms-9Save

Counter

This is a description for the negative space inside a letter. It can be completely enclosed by a letter like an O or an A, but letters like S and H also have counters. Check out how the narrow black counters in CA Royal Spy make the font appear taller than it is. Playing with the space inside can dramatically affect the overall look of a font. Tattoo Deco really plays with where you can use counters in a character.

TypeTerms-10Save

Bézier Curves

These are mathematical curves that can be scaled to any size. They are one of the essentials for computer typography, especially when making fancy serifs and tails on your characters. Melany Lane has some great curves. Notice how on the L in Lane the loops have the same curls just in different sizes.

TypeTerms-10Save

Kerning

In my humble opinion, kerning is one of the most important aspects of typefaces. To put it simply, it’s the amount of space between characters in a font. As a designer, you’ll want to learn how to manually kern. Not all characters are formed equally so some need more space from another character. Bringin is a font with a great use of the space between letters: some are almost touching, while in others you could fit an entire character between them.

TypeTerms-12Save


Header image created using Typography by Suez Lycett Photography.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

13 Comments

  1. mintdesignnz

    As we all know that typography is the art and technique of composing type and using it for printing. Using it creatively can accurately express and illustrate emotion. For the beginners, these 10 terms will definitely help them to use typography creatively. The type of typography that one has used on the website can effect the user experience. Take a look at our blog post about does your typography affect your UX ? - http://mintdesign.co.nz/blog/does-typography-affect-your-ux/

  2. tomtomwrap

    I agree that Leading should be covered here, but @Derek - Creativenauts It's not the same as base line ... Leading is the space between lines of text whereas Base Line is the lowest point of most of your characters. Very different. But you're sort of right, your leading does 'physically' fall 'under' your baseline! :)

  3. orachel

    Wow... this is handy! I'm just staring out in the world of design. Self taught, so I have vast gaps in my knowledge base. I know very little about typography and that's something I'm trying to focus on in the future. Sadly, I'm still in the "Play with different fonts until something looks great" stage, with respect to my typography on a project. Thanks so very much for your useful primer, as its the perfect combination of helpful and simple. Most things I come across are entirely too complex or too simple; much more detailed than I have time to focus on at this stage of my work, or so basic that they don't share any new knowledge with me. If anyone happens to have any resources online that they particularly recommend, I'm all ears. ;)

  4. JonathanBlycker

    Under "Base Line", the word capitol should be spelled capital. We're not talking about capitol buildings after all.

  5. orachel

    rofl... Jonathan, I'm an editor, and cracked me up severely that another person noticed that! One of those silly little issues that 99 people out of 100 would never see. ;) Thanks for the smile, today!

  6. NatalieKinnear

    I love all things font but am seriously lacking in knowledge about it This was a great read to cover the basics. I was messing about with kerning long before I knew it was actually called kerning lol. I've even finally learnt the keyboard shortcut to alter kerning rather than using the options palette - a real time saver. Thanks for this Doreen. PS I also noticed capitol :)

  7. orachel

    lol Natalie, I didn't know there was a keyboard shortcut to alter kerning! Thanks so much for the tip, as I'm doing it completely bass ackwards and moving letters manually, after rasterizing.

  8. NatalieKinnear

    orachel - yeah, this is in Photoshop, if you put the cursor within the text and hold down alt (this is on a pc not a mac) and use the right or left arrow keys, you can move the letters in tiny increments left or right. Also if you click on the 'character' option palette, mine is on the right hand side, it's a capital A with a vertical line to the right of the letter A. That options menu is where you can do all sorts to any letters that you highlight. You can make the letters wider, taller, move them up or down, change fonts size and colour - well all sorts, it's great fun to play with. :)

  9. orachel

    Oh wow... bless you for saving me the time hunting that down. So appreciated! Can't wait to try this out. Been doing some work as a Cover Artist for books, and sometimes the perfect font just does not have the perfect spacing (or kerning... as I learned with this lovely article). Thanks, again!

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →