Typography Basics — A Beginner’s Guide To Typography

Typography is a founding pillar for creating compelling designs. Be it creative logos or beautiful website designs typography gives a distinct identity to the design. For instance check out Jeroen Homan’s portfolio website. This minimalist design stands out owing to creative use of various types and font-styles. It is in fact quite revealing design, the one which makes implicit impression with various fonts, typefaces, styles, contrast, strokes, tracking, kerning and so on. Are you wondering what all these terms are? Welcome to the strange world of typography, where you will learn about all terms and more. But before getting to the typographic terminology, let’s have look at a quick overview of typography.

Overview: What is typography?

Typography is the art and technique of arranging types in order to make the text visually appealing while maintaining the qualities like readability and legibility. The arrangement of type with the aim of creating harmonized design involves selection of typefaces, font-size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning). It involves a lot of knowledge about various typographic terms to begin with typography. So, let’s get to it — learn the typographic basics and the most common typographic terms to select the typeface, style the font and render a beautiful graphic design on the whole.

Terminology: Basic Typographic Terms

Here are some of the most common terms and concepts of typography:

Fonts, Typeface and Typeface Classification

Font: Font represents a particular type of a specific typeface and size. For instance, 9 pt. Century Gothic represents a font whereas 10 pt Century Gothic would be another separate font, but part of the same font family.

Typeface: A typeface refers to the family of fonts. For example, Helvetica is a font family with the following variants: Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black. A typeface thus is a family of fonts having consistent visual appearance or style across “family” or related set of fonts. However, typefaces have their own classifications and sub-classifications.

Typeface classification: Typefaces are classified into various types. They are commonly categorized according to their appearance. In context of latin-script fonts, at the highest level one can differentiate between Roman, Blackletter, and Gaelic types. Pick up one of the most common type say Roman type for instance. This type is further classified as serif, sans-serif, monospaced, ornamental and so on. The most common ones being the Serifs and Sans-serifs. Serifs & Sans-serifs are the traditional typefaces and the main difference between the two is that while the Serifs have a finishing stroke towards the edges of a character like Times Roman or Garamond, sans-serifs lack these strokes. Similarly, we have monospaced typefaces, script typefaces, blackletter typefaces and the list goes on. Here are some of the common typefaces:

  • Serif: Serif is the semi-structural details on the ends of some of the strokes that make up letters and symbols. In Serif fonts you will find that the text has a finishing stroke at the end of vertical and horizontal corners of a character. Serif fonts are further classified into 4 subgroups: Old style, Transitional, Modern, and Slab Serif.
  • Sans-serif: Sans-serif fonts are the fonts without any Serifs. The word sans is a French word which means without. So a font without Serif is known as Sans-serif. Arial and Helvetica are well-known and popular san serif fonts used in print media as well as over the web.
  • Monospaced: Monospaced fonts render like the type-writer fonts. They take up the same amount of space regardless of the actual letter. So when you write any character using monospaced font the letter moves the same space / distance forward irrespective of the size of character; i.e., either you type w or i, both will occupy the same amount of space.
  • Text: Text fonts are generally used on certificates, diplomas, and invitations. They provide the look and feel of old-world as they are based on the religious books of monks.
  • Display: Display fonts are designed to be used as attention-getting headline fonts. They are mostly used in print design, headlines, or any other sort of text that needs attention.
  • Script: Script typefaces are based on handwriting or calligraphy, therefore the letters are designed to touch one another. They are typically used for logos or invitations. It is recommended not to use script typefaces in all-caps.
  • Dingbats: Dingbats consists of small pieces of art, symbols, and ornaments instead of letters. They are used to enhance the design of page or text. For instance, Wingdings is the widely used dingbats.

Other Typographic Terms

While font, typefaces and the various classifications of typefaces, form the very basis of typography, there are scores of other terms which help in crafting the letters. Here is a basic overview of the typographic terms used for specifying line-height, letter form, word-spacing, etc.

Kerning: Originally Kerning referred to the process of adjusting the space between individual characters in a letter, so as to have a uniform space between each character. In digital world however, the space between two characters can be referred to as kerning.

Tracking: Tracking refers to the amount of space between a group of letters to affect density in a line or block of text. It should not be confused with Kerning. While kerning is the space between two characters (to bring the letters closer together), tracking adjusts the letters further apart.

Leading or Line Spacing: The vertical line spacing of text is known as Leading. In CSS leading is set by specifying the line-height.

Measure: Measure refers to the width of a block or column of text from the left margin to the right margin. It simply refers to the length of a legible line.

Alignment: Alignment refers to setting of text flow or image placement relative to a page or column. Text alignment can be set to left, right, center or justified; just like the way word-editors align the text.

Hyphens, En-dashes and Em-dashes: Hyphens, En-dash, Em-dash — all of them are there for some different objective or purpose. It is necessary to understand the difference between them.

  • Hyphen (-): Hyphen is a punctuation used to join complex words. It is shorter in length as compared to en-dash and em-dash.
  • En-dash(–): En-dash is half the width of em-dash. It is generally used to indicate a close range of numeric values,  span of time (10AM – 5PM) or age (18 – 21 years) for instance.
  • Em-dash(—): Among the three Em-dash is the longest. It is used to indicate a break in thought or to separate a thought within a sentence. It can also be used to replace comma, colon or parenthesis.

Typeface Anatomy: Each typeface is made up of different elements which together give a unique identity to a particular typeface. Here are the common ones:

  • Cap Height: Cap height is the height of an uppercase letter and is measured from the baseline to the top.
  • X-height: X-height is the height of a lowercase letter and it does not include ascenders and descenders.
  • Ascender: Ascender is the upper part of a lowercase character that extends above the x-height. Ascender is present in characters like b, d, f, h, etc.
  • Descender: Descender is the bottom part of a lowercase character that descends below the baseline. Descender is found in characters like g, j, p, q, etc.

These are some of the common elements of typographic anatomy, you can learn more about anatomy of types here.

Additional Resources

Learning about the most common typographic terms is the first step towards the bigger screen called the Typography. Typography is nothing more than the amalgamation and pixel-perfect implementation of its various elements, which obviously requires you to pay a lot of attention to the details. So, here are some articles, which help create a sound base for extending your typographic knowledge.

  1. Design Instruct: The Basics Of Typography
  2. PSD Tuts: A 20 Minute Intro To Typography Basics
  3. Noupe: A Crash Course In Typography
  4. I Love Typography: A Guide To Web Typography
  5. Web Design Fan: The Basics Of Typography

 

Join 37,807 others and get free tutorials & tips on design & development using Wordpress on Thesis & Genesis!

Need help with Wordpress, Thesis or Genesis?

Are you a designer or a developer looking for a hand with Wordpress, Thesis or Genesis? Or perhaps want to save time with a project? Get in touch and let's get the ball rolling! Check out our Thesis development, PSD to Thesis & other services.

Comment on Typography Basics — A Beginner’s Guide To Typography

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>