Posted by Leon Tong on 31 Aug, 2013

Anyone who uses a design or layout program whether for web or print will undoubtedly at some point be using the program's font / type functions.

What's to know?

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 explainations 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 (subscription required.)

1. X-height (the height of a font's main body - not including ascenders or descenders)


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


3. Baseline (the line accross the bottom of a font's x-height - discounting descenders.)

4. Kerning (the amount a character's horizontal space encroaches into it's neighbour.)

basics-01 (1)


5. Point size (or px size if using pixel based sizes for web.) - (The font size in pixels or points)

6. Ascenders (parts of a character which 'ascend' above it's x-height - upper staff of a lower case b,d,t etc )


7. Descenders (parts of a character which 'descend' below it's x-height - lower tail of a g or y etc.)

basics-02-ascenders-descenders (1)

8. Tracking (the horizontal space between each character)


<img title="typography-01" alt="typography-01" data-cke-saved-src="=" src="=" sites="" default="" files="" basics-01.gif"="">

Here is also a brief depiction of the many versions of a font (in this case 'Minion') which can go to make an entire 'font-family'. * Note the difference between 'italic' and 'oblique'. Italic is a specifically designed version of a font used for italics, Oblique is more like taking the normal 'regular' -(some times called 'book' or 'Roman') member of the family and simply skewing it so that the existing characters lean in a 'faux italic' manner. (This can be useful for instances where a flush baseline is desired but the forward leaning of an italic is necessary, such as logo work.)

basics-01 (2)

Tags: Typography, Lerning, Design, Designer, Online Communities