Understanding the Elements of Typography

Words Text Scrabble Blocks

Typography is  the art and technique of arranging to make any language readable and understandable when displayed on screen. It may appear simple… what’s the problem in choosing stylish fonts? We just have to go with the best looking one, right? Nope, it is not just about choosing the right font. There are a lot more things in typography than you think.

Typography is not just drawing and making art, but there are a bunch of terms related to typography. This article is focused on web design typography.  These frequently used typography terms will help you learn the basics.


  • Typeface

    This refers to the font family. It is a set of fonts with different patterns and characteristics. Concrete examples of typefaces are: Arial Narrow, Baskerville Old Face, Garamond, Segoe Script, Tahoma, Comic Sans, and so on.

  • Font

    Font refers to a set characters with the same style and size. Contrary to popular belief, font is not the typeface. A correct example of font is 12-point Lucida Handwriting in bold or 23-point Bookman Old Style in italic.

    Generally, it is calculated in points (pt). Points dictate the height of the lettering. There are approximately 72 (72.272) points in one inch or 2.54 cm. An example would be the font size 72 would be about one inch tall, and 36 would be about a half of an inch. This would be the size, particularly the height element of typography.

  • Weight

    In typography, weight is defined as any particular styles used to make the characters appear heavier lighter. This affects the size element of typography.

    For example, if you want the text to be extra thin, you have the option to use the weight ‘thin 100’or if you want your text to appear bolder than usual, you may opt to apply the weight ‘extra bold 800’. It depends on how thick or thin you want your text to appear.

  • Kerning

    It is simply defined as the process of adjusting the spacing between characters of in a proportional font. This does not only improve legibility or readability, this is also to make it look more appealing and pleasing to look at. However, you do need a separate editing software to use this function.

  • Tracking

    Refers to the letter-spacing. It’s the degree of increase (or sometimes decrease) of space between letters to affect visual density in a line or in a series of text. This is not to be confused with kerning because kerning refers to is used to the density issues in reading texts.

  • Leading

    If tracking is all about letter-spacing, leading is about the line-spacing. It is the distance between two baselines of lines of type. Leading is so named because conventional print shops put strips of lead between lines of type to increase vertical space.

So, these terms are elements of typography. There are a lot of typography terms you will encounter in the future, but these terms will cover the basics. It will ensure your texts to be legible, readable, and appealing to your website visitors.