Typography 101: Font Basics

by Martin White

Typography, what’s to know? Anyone who uses a design or layout program whether for web or print will undoubtedly at some point be using the program’s font or type functions.

Type is type!

Well even as a novice, after a little digging around Photoshop, Illustrator, Quark, Indesign etc., you find menus and pallets full of options for generating, and formatting type.

Many of us understand enough to get by and rarely delve much deeper than changing font, size and colour.

Some of the other options available may seem daunting or even irrelevant to the novice or casual user, but once understood can provide invaluable tools in controlling how type appears in our layouts.

Below are some simple explanations of some of the standard text formatting options avaiable, supported by images from the tutorial video ‘Typographic Principles – Essentials’ available to view at the excellent lynda.com (subscription required.)

 

1. What is X-height?

The x-height is the height of a font’s main body – not including ascenders (see number 6 below) or descenders (see number 7) – i.e. the height of an ‘x’.

 

basics-01
x-height is the height of a font’s main body – excluding ascenders or descenders

2. What is Leading?

Leading is the space vertically between lines of text – the name comes from the physical piece of lead that used to be used in the mechanical printing process to separate lines of text.

 

basics-04-leading
Leading is the vertical space between the lines of text.

3. What is the Baseline? 

The baseline is the line across the bottom of a font’s x-height – discounting descenders.

The baseline is the line underneath the base of the letters (excluding descenders)

4. What is Kerning?

Kerning is the amount a character’s horizontal space encroaches into its neighbour.)

 

basics-03-kerning
Kerning is the amount a letter overlaps /encroaches on its neighbour

5. What is Point size? 

Point size or Pixel size (px size if using pixel based sizes for web) is the font size in pixels or points.

The font family Minion at the same point size. Point size (pt) is used for print. Pixel size (px) is used for the web (although relative sizes (em) are also used).

 

6. What are Ascenders?

Ascenders are the parts of a letter which ‘ascend’ above it’s x-height – i.e. the upper staff of a lower case b, d, t etc.)

basics-02-ascenders-descenders
Ascenders are the parts of a letter which ‘ascend’ above it’s x-height

7. What are Descenders? 

Descenders are parts of a letter which ‘descend’ below it’s x-height – i.e. the lower tail of p, g, or y, etc.)

 

basics-02-ascenders-descenders (1)
Descenders are parts of a letter which ‘descend’ below it’s x-height

8. Tracking

Tracking is the horizontal space between each letter / character:

basics-05-tracking
Tracking is the horizontal space between each letter

BrightLemon