A Beginners Guide to Typography: What You Need to Know

    August 05 2020  |  Inspiration , Design

    PLANOLY - Blog Post - Typography 101 - Banner Image

    One of the fundamental building blocks of design is typography. So what is typography? Some say it’s the most important element of design. One definition describes typography as “the art and technique of arranging type to make written language legible, readable, and appealing when displayed.” At face value, you might think this is just picking a font and going from there—but typography is so much more! It’s everything from the typeface you choose to the style of that typeface to the space between the letterforms and how they interact with one another. Typography can make something more readable or more intriguing. It can evoke emotion and make what your reading seem approachable, trustworthy, or fun. Here are a few basic terms to provide a “baseline” for your typography journey—pun intended.

    Typefaces vs. Font

    The first distinction to make is between typefaces and fonts. A lot of people use these terms interchangeably, but they aren’t actually the same thing. Typefaces are a family of related fonts, while fonts refer to the weights, widths, and styles that make up a typeface. For example, Helvetica Light, Helvetica Condensed,  are all fonts that exist in the Helvetica typeface.

    PLANOLY - Blog Post - Typography 101 - Image 1

    Baseline, Median, and Cap Height

    The baseline, median, and cap height are all invisible guidelines that help determine the visual placement and height of typefaces. The baseline defines the visible base of the letterforms of a typeface, or where the letterforms start. 

    The median defines the height x-height of letterforms. The x-height refers to the height of all lowercase letters and is defined by the distance between the baseline and the top of a lowercase ‘x,’ hence the name. 

    The cap height defines the height of capital letterforms above the baseline.

    PLANOLY - Blog Post - Typography 101 - Image 2

    Ascenders vs. Descenders

    Ascenders are the part of a letterform that projects above the median or x-height. Letters like h, b, d, and t, all have ascenders in their lowercase forms. Ascender height is the imaginary line that all ascenders fall under.

    Descenders are the longest part of a letterform that descend below the baseline. Letters like y, g, q, and p, all have descenders in their lowercase form. Descender height is measured by the distance from the baseline to the descender. 

    PLANOLY - Blog Post - Typography 101 - Image 3-1

    Serif vs. Sans-Serif

    ‘Serif’ and ‘Sans-serif’ are two common variations of typefaces. Serif typefaces, also called Roman typefaces, include “serifs.” A serif is an extension at the end of a  letter stroke. Serifs are meant to mimic pen marks, help to lead the eye from letter to letter, and are thus believed to improve readability. For this reason, Serif typefaces are commonly used for body text and printed materials—books, newspapers, magazines, etc. Sans-serif refers to typefaces without serifs at the end of letter strokes. Serif typefaces also tend to look more ornamental and communicate trustworthiness or professionalism.

    San-serif typefaces do not include serifs and instead are recognizable by the simple, often even-width lines they are composed of.  In French, “sans” means “without,” so just think,  “without serifs,” to remember this! Sans-serif typefaces tend to be perceived as modern, approachable, and clean. It is also believed that they render more clearly in digital formats, making them more legible. For this reason, Sans-serif typefaces are commonly used by tech companies and on the web. Keep in mind; there are always exceptions to any rule—these are just some helpful guidelines.

    Tracking

    Tracking refers to the horizontal spacing between text. When adjusting tracking, the spacing is adjusted for all characters and done uniformly—so all of the characters have an even and exact space between them. Tracking is sometimes adjusted to help text better fit a space (tightened) or help legibility (loosened).

    PLANOLY - Blog Post - Typography 101 - Image 4 (1)

    Kerning

    Kerning is the process of adjusting the space between two characters. Unlike tracking, which is uniform and applied to the text as a whole, kerning adjusts the space between just two characters to make their pairing more balanced and compatible.  All character pairings are not alike, and sometimes kerning is required to make a pair work better together and become more legible.

    PLANOLY - Blog Post - Typography 101 - Image 5

    Leading

    Leading refers to the vertical spacing between lines of text.  In the early days of manual typesetting using metal forms, strips of lead were placed between lines to separate them—hence the name “leading”! Leading is important because it helps with the legibility of large bodies of text. The smaller the space between lines, the more “narrow” leading is; the greater the space between lines, the more “wide” the leading is.

     

    So there you have it! These terms are by no means an exhaustive list but should put you in a great place to understand the very basics of typography.

     
    Related:
    Talk the Talk: 10 Graphic Design Terms Explained
    The 10 Essential Graphic Design File Types and How to Use Them