View all articles

Kern and Burn: Typography Terms to Get You Started

This is Part 1 of a 3-part series on building your typography skills:

  • Part 1 - [You Are Here] - 16 Vital Typography Terms To Learn To Start Enhancing Your Designs "Invisibly"
  • Part 2 - How To Choose The Right Font For Your Design
  • Part 3 - 4 Fast Ways To Level Up Your Typography Game

Did you know nearly 95% of all information on the internet is type? 

We’re not saying that 95% of designs are pure typography but it's a high leverage aspect to design that can create positive perception for your designs OR degrade your designs. 

The Pareto Principle states that 20% of our efforts produce 80% of our results. This principle can also be 5% effort producing 95% of our results or 10% effort producing 90% of our results, you get the picture. 

This is true in design as in any field. 20% of our design effort can produce 80% of what makes our design “good.”

Typography is the 20% that can make or break your design.

The wrong font, the wrong spacing, or the wrong alignment throws off a whole creation

Taking the time to improve your typography skills is vital for aspiring designers and veteran designers and a good place to start is by understanding and speaking the 16 typography terms.

Every profession has its terms and definitions – special words or expressions that are used by a particular profession or group that can be difficult for outsiders to grasp.  That is - until they start learning.

Here are some terms to start with to build your design vocabulary:

  • Font: A digital file of a typeface. These are files you download and put into your computer’s or website’s font book to display the downloaded font.

  • Typeface: A typeface is also called a font family. Typefaces are the design of the fonts we actually use, it is a collection of a specific type of font for all letters and punctuation.
     

     
  • Serif: An extra stroke that is added to the end of the main vertical and horizontal strokes of a letterform. Serif typeface when used in print form is "argued" to be the most legible choice. Two common serif choices are Times New Roman and Georgia. Impressions conveyed by Serif are traditional, professional, and established.
     

     

  • Sans-Serif: When serifs are absent from a typeface. Sans give the impression of strong, contemporary, clean, and simplified. Common sans serif are Arial and Helvetica.

     

  • Italic: A typeface where letters lean to the right.  It is used especially for emphasis or distinction.

     

  • Baseline: The imaginary line where all characters sit or rest.

     

  • Mean Line or Midline: Line where non-ascending lowercase letters stop.
     

     

  • X-Height: The space between the baseline and the midline.

     

  • Cap Height: The height of a capital letter measured from the baseline up.

     

  • Ascender: The parts of lowercase characters that lie above the midline.

  • Descender: The stroke of a letter that extends beyond the baseline.

     

  • Body Height: The length between the top of the tallest letterform to the bottom of the lowest one.

     

  • Bowl: The closed, curved part of letters, including d, b, o, D, and B.

     

  • Ligature: In a typeface, this occurs when two or more letters combined into one character, for example AE represented as æ
    .

     

  • Leading: The vertical space between baselines.  The term originates from early days of printing, when lead was used to increase the vertical spacing between lines of type.
     

     

  • Kerning: The spacing in between characters.
     

To start implementing these 16 typography terms into your vocabulary, re-read the words again, and look at the image below it. 

Next, to truly grasp what each word means, leave a comment below explaining in your own words what each means. 

In the next article, we’re going to cover tools and methods you can use to help you compare and contrast different fonts to select the right font for your projects and designs. 

Using these typography terms in context will quickly allow you to grasp each word. Leave us a comment below with an explanation in your own words to 3 of the terms.

 

Improve Your Designs Invisibly Though Typography

Learn step-by-step how and when to use typography to enhance your design along side a mentor. You'll build 7 projects you can proudly display in your portfolio.

Click here to learn more about our NEW Typography course

Image Credit, Image Credit, Image Credit, Image Credit, Image Credit, Image Credit

About Designlab

Designlab teaches you UI/UX design skills through online courses with 1-on-1 mentorship from expert designers.

Get Updates

Be the first to read our new articles on UI/UX design education, career development, and more!

Got it! We'll keep you in the loop.

Get the syllabus & take a tour