FIT5900 : Typography

In the previous lecture:

{Previous lecture summary or topics}

In this lecture:


...the art of printing, particularly those branches of it concerned with the design, setting, and arrangement of type.


...the making of impressed copies from the inked surface either of an engraved block or metal plate, of a lithograph, or of movable type...

Technology has changed, but the need to master type remains!


  1. Typography is a vital aspect of communication using text.

  2. The Web conveys information using text.

  3. Typography is a vital aspect of communication using the Web!


Definitions, definitions...

Face / typeface / font: a set of characters
(letters, punctuation marks, numbers and assorted textual symbols such as @#$%)

Family: a group of typefaces sharing common features.

The two most common families of type:

The serifs are the little marks at the ends of the sweep of the lefthand S.
'Sans' is French for without, so it's no surprise that a Sans Serif font is a font without serifs!

Some Serif typefaces...

Serif fonts are frequently

Serif fonts have a formal quality about them.

Serif Typeface Subsets

Some Sans Serif typefaces...

Serif fonts are:

Besides Serif and Sans Serif fonts...

Decorative typefaces like these

lovely fonts with style

may be used to convey a mood or set a look and feel...

but should be used sparingly as they are hard to read in large quantities!

block of decorative text

block of serif text

Script fonts emulate hand writing. The characters follow into one another.

Monospaced faces such as Courier allow the same amount of horizontal space for each letter.

For example, count the x's below (Courier on the left, Helvetica on the right)

monospaced font

Monospaced characters line up in columns which is vital in many circumstances!

Type Form, the shape and direction of a typeface.

Type Weight

Type Width

(It is actually the letterforms which are altered in these types, not the spacing between letters.)

Type Posture

(The character's inclination might be the same, but the Sans Serif font looks regimental whilst the Serif font flows like handwriting)

Font Size

Directional Text may

be used for effect

Be aware that horizontal text appears more stable and is more easily read.

Leading - distance between text lines.

Kerning - space adjustment between particular letters of a font which otherwise appear too distant or too close to one another.

(E.g. Note the strange gaps between uppercase 'T' and lowercase 'o', uppercase 'Y' and lower case 'o', uppercase 'I' and lowercase 'n'. Also note the irregular gaps between the lowercase 'w' and the 'o' and 'a' on either side...)

Yorkshire Pudding, Towards Infinity

Can you find other examples on this page of character pairs which require kerning?

Spacing - horizontal space between all letters of a font.

Spaced Text

Ie. amount of space before next letter (whatever it is) begins.

Anti-aliasing is of benefit to smooth the jaggies around large characters...

anti-aliased A

...but it can make small characters blurry and illegible...

like this (blurry text)

So, how do you do this in a web page?

This lecture's key point(s):

Fonts contribute a message.

This will depend on the family from which they spring, their orientation, position, relative size and weight and a host of other characteristics, all of which need to be understood to enable the message contributed by the fonts to meet the goals of the production within which they appear.

FIT5900 courseware | FIT5900 lecture notes

©Copyright Alan Dorin & Jon McCormack 1999,2000