FIT3084: Typography


In the previous lecture:

In this lecture:




Typography

printing press

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

Printing: the production 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 typography remains a vital aspect of communication using text.

Printing Press.
Engraving by Jost Amman, 1568.
 
illumonated manuscript

The printing press revolutionised the world by allowing writers to increase the distribution of their texts (especially religious texts). However, it was hard to beat the beauty and complexity of hand-drawn illuminated manuscripts with this early technology.

These illuminated panels from the Koran (left) and an early Celtic manuscript integrate typography and image seemlessly. This is difficult to do with moveable type...

Movable type refers to metal or wooden blocks, on which are mounted individual characters. Appropriate characters are selected from a set and arranged into words, lines of text and pages.

These sets of characters are inked and paper is pressed on top of them so that the ink leaves its mark.

Some imprints from a few random characters. The manual type-setting process was largely superceded by digital / desktop publishing and printing. A composing stick of movable type and (in the background) a type case of other characters.


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:

Serif S Sans Serif S

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...

Times Palatino
Courier NewYork

Serif fonts are frequently

Serif fonts have a formal quality about them.


Serif Typeface Subsets


Some Sans Serif typefaces...
Helvetica Chicago
Charcoal Arial

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.

script font works poorly in body text but, like decorative
fonts, may work well in short sections,
headers or on dance party & birthday invitations!

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!

Code in Courier Code in Helvetica

You can specify a monospaced font using a <tt> tag that will give you this effect </tt>.

You can specify a monospaced font using a tag that will give you this effect.

A better way to specify typefaces is to use Cascading Style Sheets (CSS).


Type Form

...the shape and direction of a typeface.

Type Weight

Roman text - standard / medium weight font.

font roman / medium


Bold text - provides emphasis, adds weight to a page by thickening the character strokes.

font bold


Light text - subtle and gentle characters produced with slender strokes.

font light

Type Width

Condensed text - (compressed) less character width than Roman text of this style.

font condensed


Expanded text - (extended) more character width than Roman text of this style.

font extended

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



Type Posture

Italic text - slants fluidly to the right in the manner of handwriting.

font italic

Oblique text - slants rigidly to the right not in the manner of handwriting.

font oblique

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


Font Size

Is measured in points

There are 72 points to an inch (that's 2.54 cm)

Size of text should indicate its importance relative to other page elements.


Headings should be large.

Footnotes should be small.

And body text should be just so! (Usually around 12pt)


Be consistent with all your font decisions, including size!



Directional Text

may

be used for effect


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



Coloured Text

Small highlights of coloured text can be used to great effect.

 

 

But avoid making your pages difficult to read by inappropriate use of colour.



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.


Courseware | Lecture notes

©Copyright Alan Dorin 2009