Typography
The art or process of setting and arranging types and printing from them...
The style and appearance of printed material...
A specialty area of design focused on the study, use and creation of type.
Type
In 1447,
Johann Gutenberg
perfected a workable system of moveable type,
developing an ingenious process employing a separate matrix, or mold, for each alphabet
character (including letters, punctuation marks, spaces, symbols, etc.), from which metal
types could be hand-cast in great quantities. These types could then be assembled into a
page of text, and imprinted to paper via special inks and a printing press of his own
design. For the first time, a technical system of mass production was applied to publishing.
The assemblage of type was a slow process, and once the printing was complete, all the
characters had to be returned to their boxes in preparation for the next printing job!
The image on the left shows A Specimen of typesetting by William Caslon, letter founder;
from the 1728 edition of Cyclopaedia.
In 1886 Ottmar Mergenthaler invented the
Linotype machine
which used a 90-character keyboard to create an entire line of metal type at
once using a hot lead or lead alloy leading to its nickname; hot type. This again
revolutionized the printing process because once the type was cast, it could be quickly
assembled for printing and then melted down for use again when printing was complete.
Typeface
A typeface is a particular design of
type
.
Typefaces are often named after their
designer
;
Caslon, Goudy, Bodoni, Baskerville, etc.
Check out these
apostrophes and quotes
to see how different typefaces can be!
Are typefaces fonts?
No. Fonts are a specific size and/or style of type within
a typeface.
Fonts
consist of a set of letters, numbers and symbols with unique appearance. For example, the
Garamond font family might include Garamond, Garamond Bold, Garamond Italic, and
Garamond Bold Italic. Fonts also belong to collections which describe their
appearance.
NOTE: examples shown below may or may not appear, depending on which fonts are installed on your system.
Generic Collections
- Serif
the little details on the ends of the characters are known as serifs. Look closely at these serif examples: TIMES, PALATINO and GARAMOND. - Sans-serif
sans means without in French. Sans-serif fonts do not have the details. Check these examples: ARIAL, HELVETICA, BODONI, VERDANA and OPTIMA. Sans-serif fonts are recommended for the web because they are easier to read at low resolutions. - Monospace
Monospace fonts give equal spacing to each letter. Typewriters used monospace fonts such as COURIER and COURIER NEW. - Fantasy
These fonts are used decoratively, perhaps for titles or headings. Fantasy fonts vary from browser to browser and are not an "official" collection except in CSS. Examples include IMPACT and PAPYRUS. Picture fonts such as WEBDINGS ( SYMBOL and ZAPF DINGBATS ), are not included in the fantasy collection. - Cursive
Cursive fonts resemble handwriting. Examples include COMIC SANS MS, ZAPF CHANCERY, PARK AVENUE, LUCIDA HANDWRITING, LUCIDA CALLIGRAPHY
Aren't Fonts and Text the same thing?
No! Text is a just a block of type. No! Text is a just a block of type. No! Text is a just a block of type. No! Text is a just a block of type. No! Text is a just a block of type. No! Text is a just a block of type. No! Text is a just a block of type. No! Text is a just a block of type.
Conventions of Typefaces
Type form describes aspects of the typeface appearance including:
- Width, which refers to the width of the letters. The CSS property for font widths is not supported in browsers at this time.
- Posture, which refers to the angle or slant of the typeface.
The most common is italic. Other variants
are oblique and incline.
p.italic {font-style: italic;}
- Weight refers to how heavy or light the typeface is. Bold is
the most common but black and heavy are also variants. CSS also allows one to
specify a shade of boldness... from 100 to 900. In my experience, browsers at
this point in time do not support this very well and I would fall-back to using the
values of "bold" or "normal".
p.bold {font-weight: bold;}
Normal and bold are the options suggested for use on the web. This paragraph is written in a normal weight. This paragraph is written in a normal weight. This paragraph is written in a normal weight. This paragraph is written in a normal weight. This paragraph is written in a normal weight. This paragraph is written in a normal weight.
This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight. This paragraph is written in a bold weight.