Typography
In a survey among citizens in Britain in 1999, a British
national newspaper concluded that the person who had
made single most significant contribution to modern
civilisation was the inventor Johann Gutenberg (14001468). Gutenberg invented the printing press in 1454
in order to mechanise the process of creating copies of
the Bible.
In Gutenberg’s original copy, he created a font that
matched that of the written form. His printing process
left a space in the lettering of the first letter of each
sentence so it could be coloured in red by hand, in the
same way as the written copies were decorated.
Printing and typography have come a long way from
these humbler beginnings. In this topic, we will
explore the science of typography and the associated
activities.
1. Font Classifications
There have been a number of attempts made to create a
form of classifying the myriad of fonts that are
available today. Jury (2004) suggests the classification
should be based on the classes of font, blackletter, oldstyle, transitional, modern and sans serif).
Classification
Fonts
Sample
1. Humanist
Janson, Centaur,
Italian old style
Centaur
2. Garalde
The old style fonts
including Bembo,
Garamond, Janso
and Caslon
Garamond
3. Transitional
Fournier,
Baskerville, Bulmer
and Caledonia
Baskerville
4. Didone
Bodoni
Bodoni
5. Slab serif
Antique and
Egyptian
Egyptian
6. Lineal
Sans serif fonts eg.
Univerrs, Futura,
Humanist, Gill
Sans
Gill Sans
7. Glyphic
eg. Albertus
Albertus
8. SCript
eg. Zapf Chancery
Edwardian
SCript
9. Graphic
Drawn letters eg.
comic sans
Comic Sans
Fig 1 Font Classification
A classification of the various font types introduced by
Maxililen Vox.
Topic 6: Typography
Maximilien Vox in 1954 introduced a classification of
nine groups which acts quite well to provide a basis for
studying different font types.
2 A brief history of typography.
The development of fonts through the ages has
followed an interesting history and font development
has typically gone hand in hand with the development
of the various technologies.
The invention of movable and re-usable type,
popularized by Johann Gutenberg in 1450, changed the
world. This innovation brought about the invention of
printing and marked the end of the Middle Ages and
the beginning of the Renaissance. The earliest
typefaces were designed in Mainz, Germany to look as
if they were handwritten. These faces are referred to as
Gothic.
In the first printing presses, the type was typically
metal or wood and the ink a blank chemical and the
paper very porous and crude. As paper process have
developed and inks improved and types moved from
soft to stronger metals, so too have the designs of the
fonts that could be used. The original fonts all copied
handwriting character formations and as the
technologies provided new opportunities, the
handwritten and stone carved forms of characters gave
way to more rational and readable forms.
Garamond
Claude Garamond.
1540.
Big Caslon
William Caslon.
1724.
Baskerville
John Baskerville.
1756.
Didot
Francois Ambroise
Didot. 1784.
Bodoni
Giambattista
Bodoni. 1791.
abcdefg HIJKLMN
123456
abcdefg HIJKLMN
123456
abcdefg HIJKLMN
123456
abcdefg HIJKLMN
123456
abcdefg HIJKLMN
123456
Fig 2 Early Font forms
A collection of early font forms and their year of
development
The original font that was used in the first Gutenberg
presses is of a type that is commonly called blackletter.
This font was used exclusively in the early period in
the manuscripts that were produced by the early
printing processes. As the craft of printing progressed,
the art of calligraphy diminished leaving the printers
1
free to design and derive their own font faces and
types.
It is interesting to note that in the early fonts, the lines
used were of variable thickness and mimicked the lines
created by pens which hold thick lines when drawn
down the page and left thin lines when drawn across.
The impact of the written character stayed for along
time in fonts even after the art of calligraphy had
become less prominent.
In the 18th century John Baskerville, a prominent
English printer, helped to develop some new look fonts
for the British press that moved away from the hand
written forms. His font Baskerville is considered a
transitional font developed in the period ahead of the
move to more modern faces.
baskerville
Fig 3 The Baskerville Font
A transitional font from the period as fonts moved away
from handwriting forms
As the world moved to more modern fonts towards the
end of the 19th century, characters became bolder and
there were often big differences between vertical and
horizontal elements in the character formations.
As printers became more common and printing became
cheaper, many uses other than books were found for
the printing presses. As well as books, printers started
printing advertisements, journals and newspapers. And
advertising discovered the printing press resulting in
demands for printing that was visually appealing and
graphic.
This period saw the proliferation of many very
different and bizarre typefaces. As the 20th century
drew near, sans serif typefaces began to appear. In its
early use, this type of font was used for headlines and
catchy text rather than continuous text.
With the advent of the modern computer, and starting
with the first Macintosh computer, most computer
users now have access to a range of fonts from among
which they can choose. It is possible on the Web to
find a large variety of fonts for any purpose and today
there are literally thousands of fonts to choose from
when using a word processing package and an Internet
connection.
3 Font Families
A font family describes a complete set of characters for
the font. Surprisingly, there can be up to 250 characters
in a fully developed font family, which will include
upper and lower case letters, numbers, punctuation and
Typography
special characters plus italics and bold forms. In
typography, we use the term Roman to describe the
upright form of the font, as distinct from italics etc.
Most fonts we see in use today have versions or forms
taken from other fonts.
a. Roman Characters
Within any font family, the characters are designed
with a special purpose. The Roman style (upright) has
several forms including upper and lowercase. In the
uppercase form, the characters are meant to stand alone
and to be read separately. Each of the uppercase
characters tends to stand as a distinct entity with no
connection to adjoining characters. In contrast,
lowercase characters are meant to connect and let the
eye flow so that a word written in lowercase characters
is seen as a complete entity rather than a series of
discrete letters. This is one of the reasons why
uppercase writing is so difficult to read.
WHEN TEXT IS WRITTEN IN UPPERCASE
CHARACTERS ALONE, IT IS VERY HARD TO
READ. THE EYE NEEDS TO FOCUS ON EACH
SEPARATE CHARACTER TO FORM THE
WORDS AND LONG SECTIONS OF
UPPERCASE TEXT ARE QUITE ILLEGIBLE
AND CAN BE VERY TIRING TO READ.
When text is written in uppercase characters
alone, it is very hard to read. The eye needs to
focus on each separate character to form the
words and long sections of uppercase text are
quite illegible and can be very tiring to read.
Fig 4 Uppercase Text
A passage demonstrating the difficulty uppercase text
poses for continuous rae4ding.
b. italics
Italics are used commonly in most font families today
to provide a means for showing alternative text. For
example, footnotes and quotations within text. Italics
characters are not simply slanting version of their
Roman counterparts, instead they are actually a
different character and usually take up less line space
so that the slope does not take more horizontal space.
To aid readability, italics tend to have a smaller
character width than their Roman counterparts.
In many computer programs when characters are
italicised, the Roma form is slanted and less weight
given to the vertical and angled strokes. Often this can
limit the legibility of the character so it is usually
advisable to use italics with font families where the
italics has been provided, rather than requiring this
computer fix.
2
Some recent sans serif font families have been
designed to facilitate a slanted (italicised form). In such
families the line thicknesses have been designed in a
consistent fashion so there is less distinction between
the Roman and the italic form.
In terms of readability, uppercase characters retain
their individual nature when italicised and as such
remain difficult to read in anything but their single
characters. Italics in lower case form retain the fluidity
and connection of the Roman counterpart and as such
are quite readable.
aa
aaaa
Fig 5 Italics
In italics the Roman characters are slanted and spaced
to provide a flowing text.
c. Punctuation
All font families include a range of punctuation
characters, and these are designed to match their
Roman counterparts in design and form. In typical font
families there are a minimum of 20 punctuation marks
which include:
• Period or full stop .
• Comma , ;
• Colon :
• Semi colon ;
• Virgule forward slash /
• Apostrophe ‘
• Quotation marks
• Exclamation mark !
• Question mark ?
• Hyphen • Parentheses ()
• Em and en dashes - --
.,!?&()-::[]/<>
.,!?&()-::[]/<>
.,!?&()-::[]/<>
.,!?&()-::[]/<>
.,!?&()-::[]/<>
Fig 6 Punctuation
Punctuation marks shown in a range of serif and sans
serif font families
d. weight
The weight of a font face describes among other thing
the line thickness and consequently the heaviness of
the font. Typically there are a range of font weights
that can be used eg. light, medium, bold and extra bold.
Typography
Weight is used in page design to emphasis parts of the
text, usually headings or titles but weight is also used
within text to highlight words and passages. Often
when a word needs to be emphasised within text, an
italic is used rather than weight so as to retain the
continuity of the passage while providing the highlight.
As with uppercase, the over use of weight can reduce
the readability of a page. When it is important to
accentuate text yet to retain readability, printers will
often produce the text reversed in a black background.
In such cases a lighter weight can still provide the same
sense of weight due to the impression of the face
within the background.
a light weight font face
a medium weight font face
a bold font face
extra bold font
Fig 7 Font Weight
Gill sans font showing a range of font weights
e. Extra Fonts
There are often a range of extra font options that are
included in some font families for special effects.
These include:
• Small capitals, uppercase characters designed wit
the same weight as others in the family but
designed to be the same size as the lowercase
characters;
• Ligatures, specially designed character pairs linked
together;
• Fractions, characters representing these
mathematical symbols;
• Diacritics, special characters designed for other
languages; and
• Symbols, other characters in common use such as
copyright symbols, currency symbols and
mathematical symbols etc.
@ # $ ¢ ∞ § ¶ •… æ
@ # $ ¢ ∞ § ¶ •… æ
@ # $ ¢ ∞ § ¶ •… æ
@ # $ ¢ ∞ § ¶ •… æ
@ # $ ¢ ∞ § ¶ •… æ
Fig 8 Extra Font Characters
Serif and sans serif extra font characters
3
3 Type Terminology
Within any discussion of type and type faces, there are
a number of terms that are commonly used which need
to be understood and remembered by any student.
baseline: the imaginary horizontal line upon which
each character sits.
waistline: the imaginary line indicating the top of
those lowercase letters that do not have ascenders. Also
referred to as the mean line.
x-height: the distance between the baseline and the
waistline. The height of a lowercase x.
ascender: the part of a lowercase letter that extends
above the waistline.
descender: the part of a lowercase letter that falls
below the base line.
condensed: a typeface that occupies less horizontal
space than the regular version of the face.
expanded: a typeface that occupies more horizontal
space than the regular version of the face.
italic: font styles that slant rather than stand upright.
Italics is usually used for emphasis.
loop: the part of a lowercase g that falls below the
baseline.
bowl: the enclosed curved and circular shapes of
letterforms such as o, b, g, and P.
ear: the part of a lowercase g that is attached to the top
of the bowl.
kerning: the elimination of white space between
selected letterforms.
justify: lines of type letterspaced to one uniform
length. Most newspapers use columns of justified type.
letterspacing: the spacing, that can be adjusted,
between each letterform.
wordspacing: the spaces, that can be adjusted,
between words.
leading: The amount of space between lines of type
expressed in points.
widow: a short line of type, usually one word or a few
letters after a hyphen, at the end of a paragraph.
orphan: a short line of type at the end of a paragraph
that has been carried to the top of a column.
a. Leading
The term leading, used to describe the space between
lines comes from the days when line spacing was
created by the addition of lead between lines of type.
Leading aids readability in a number of ways. It is
usually expressed in relation to the font size being
used. In this document, the font size of 10 points with
2 points of space between the lines. This is written as
10/12.Times New Roman Type set without leading is
referred to as being set solid, i.e. 10/10 Times New
Roman There is also minus leading: 24/20 Times New
Roman.
Typography
This passage of text has been set so that there is
a different leading between each of the lines. As
the leading increases, so does the white space.
Interestingly a large leading gives the impression
of a smaller type face due to the extra space.
Fig 9 Leading
Leading describes the space set between the lines.
4 Displaying Screen Fonts
Because computer screens have such low resolutions,
fonts in their original forms always appeared chunky
and uneven. Computers today use a number of
strategies to smooth fonts when they are displayed to
make them appear more as they should.
a. Anti-aliasing
When fonts with their round edges are displayed on
computer screens, the edges become ragged. The
problem of translating curves to pixels can be
overcome on computer screens by a technique called
anti-aliasing. Anti-aliasing is the process of helping the
eye to see smooth curves instead of jagged pixels by
using colored pixels around the edges of letterforms.
Because the pixels are intermediate in tone and color
between the type color and background color, they
have the effect of smoothing out the curves.
There are two problems with anti-aliased text,
however. The text can appear fuzzy and indistinct.
And the strategy only works with larger font sizes.
With small font sizes, the edges appear fuzzy.
Fig 10 Anti aliasing
While the first character appears to have jagged edges,
the use of anti-aliasing in the second reduces this
appearance.
b. Hinting
Another strategy for improving the appearance of
screen-based characters is called hinting. Hinting is a
method of defining exactly which pixels are turned on
in order to create the best possible character bitmap
shape at small sizes and low resolutions for a character.
Since it is a character's outline that determines which
4
pixels will constitute the bitmap at a given size, it is
often necessary to modify the outline to create a good
bitmap image; in effect modifying the outline until the
desired combination of pixels is turned on.
A hint is a mathematical instruction added to the font
to distort a character's outline at particular sizes.
Modifying an outline in this manner results in what is
known as a grid-fit. On the basis of the instructions
contained in the individual font file, the TrueType
rasterizer adjusts the glyph outlines to fit the bitmap
grid appropriate for whichever size the text is to be
displayed at.
downstrokes all have a consistent thickness. Only a, e
and g have considerably thinner strokes at the openings
of the small eyes. These aberrations from an otherwise
consistent stroke thickness are the trademark
characteristics of the "Gill" typeface; this can be seen
even more clearly in the bold weights.
http://www.linotype.com/7-31-716899/outsiders.html
b. Helvetica
abcadefghijklmonopqrstuvwxyzABC
DEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Throughout the latter half of the twentieth century, one
of the most popular typefaces in the western world was
Helvetica. It was developed by the Haas Foundry of
Switzerland in the 1950s. Later, Haas merged with
Linotype and Helvetica was heavily promoted. More
weights were added and it really began to catch on.
Fig 11 Hinting
Hinting is a process used when characters are
displayed at small sizes to create the best image of the
original. The process fits the pixels to grid shapes.
5 Fonts and their Origins
There are so many fonts to choose from today, it is
hard t know which ones to use. Most computer
manufacturers assist their users by providing a set of
standard fonts with most installations, but it is very
easy to add to these. The following sections describe
some common fonts, their uses and origins.
a. Gill Sans
abcadefghijklmonopqrstuvwxyzABCDE
FGHIJKLMNOPQRSTUVWXYZ12345
67890
One of the most unique sans serif styles is the font
known as Gill Sans (1928). Eric Gill undoubtedly drew
inspiration from the signage typeface developed by
Edward Johnston in 1918 for the London Underground.
The distinctive characteristics of the Gill Sans font are
the classic forms of the a and g, the wide t, but also the
old-fashioned roman capitals. The rounded c, e and s
are the first examples of vertical stroke ends which
create an optical effect of the stroke thinning towards
the ending, alluding to roman type.
On the whole, Gill Sans exudes a profound medieval
spirit – which makes it all the more surprising it is
essentially the only sans serif typeface without a
modular use of strokes. The O is a perfect circle.
Oblique and vertical strokes as well as upstrokes and
Typography
An icon of the Swiss school of typography, Helvetica
swept through the design world in the '60s and became
synonymous with modern, progressive, cosmopolitan
attitudes. With its friendly, cheerful appearance and
clean lines, it was universally embraced for a time by
both the corporate and design worlds as a nearly
perfect typeface to be used for anything and
everything. "When in doubt, use Helvetica" was a
common rule.
As it spread into the mainstream in the '70s, many
designers tired of it and moved on to other typographic
fashions, but by then it had become a staple of
everyday design and printing. So in the early '80s when
Adobe developed the PostScript page description
language, it was no surprise that they chose Helvetica
as one of the basic four fonts to be included with every
PostScript interpreter they licensed (along with Times,
Courier, and Symbol).
http://www.ms-studio.com/articles.html
c. Arial
abcadefghijklmonopqrstuvwxyzABC
DEFGHIJKLMNOPQRSTUVWXYZ
1234567890
In the early days of electronic imaging, the key players
in font development and usage for computers were
companies like Adobe, Linotype and Monotype. These
companies charged royalties for use of their fonts, and
these costs caused companies like Microsoft and Apple
some concern. Apple and Microsoft signed a crosslicensing agreement to create an alternative to Adobe's
technology. Through this development work, the font
Arial emerged. Arial is considered to e a copy of
Helvetica. At a glance, it looks like Helvetica, but up
close it's different in dozens of seemingly arbitrary
5
ways. Because it matched Helvetica's proportions, it
was possible to automatically substitute Arial when
Helvetica was specified in a document printed on a
PostScript clone output device.
When Microsoft made TrueType the standard font
format for Windows 3.1, they opted to go with Arial
rather than Helvetica, probably because it was cheaper
and they knew most people wouldn't know (or even
care about) the difference. Apple also standardized on
TrueType at the same time, but went with Helvetica,
not Arial, and paid Linotype's license fee. Of course,
Windows 3.1 was a big hit. Thus, Arial is now
everywhere, a side effect of Windows' success, born
out of the desire to avoid paying license fees.
The situation today is that Arial has displaced
Helvetica as the standard font in practically everything
done by nonprofessionals in print, on television, and on
the Web, where it's become a standard font, mostly
because of Microsoft bundling it with everything—
even for Macs, which already come with Helvetica.
This is not such a big deal since at the low resolution of
a computer screen, it might as well be Helvetica
d. Verdana
abcadefghijklmonopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVW
XYZ1234567890
Microsoft’s new Verdana typeface family consists of
four TrueType fonts created specifically to address the
challenges of on-screen display. Designed by world
renowned type designer Matthew Carter, and handhinted by leading hinting expert, Monotype’s Tom
Rickner, these sans serif fonts are unique examples of
type design for the computer screen.
In its proportions and stroke weight, the Verdana
family resembles sans serifs such as Frutiger, and
Johnston’s typeface for the London Underground. But
to label Verdana a humanist face is to ignore the
successful fusion of form and function Carter has
achieved. This isn’t merely a revival of classical
elegance and savoir faire; this is type designed for the
medium of screen.
The Verdana fonts are stripped of features redundant
when applied to the screen. They exhibit new
characteristics, derived from the pixel rather than the
pen, the brush or the chisel. The balance between
straight, curve and diagonal has been meticulously
tuned to ensure that the pixel patterns at small sizes are
pleasing, clear and legible. Commonly confused
characters, such as the lowercase i j l, the uppercase I J
L and the number 1, have been carefully drawn for
maximum individuality – an important characteristic of
fonts designed for on-screen use. And the various
weights have been designed to create sufficient
contrast from one another ensuring, for example, that
Typography
the bold font is heavy enough even at sizes as small as
8 ppem.
Another reason for the legibility of these fonts on the
screen is their generous width and spacing. At low
resolutions, because of the limited number of pixels,
letters cannot differ very much. But often the smallest
differences can often change the whole look of a page,
or a screenful of type; a fact demonstrated in the
illustration below.
http://www.microsoft.com/typography/css/gallery/s
pec1.htm
e. Futura
abcadefghijklmonopqrstuvwxyzAB
CDEFGHIJKLMNOPQRSTUVWXY
Z1234567890
Futura was the first popular sans-serif font to be
developed. Although it looks like a relatively modern
font, it was in fact designed in 1928. It wasn't an
absolutely new idea at that time, since first sans serif
faces had appeared in the beginning of 19th century.
The simple idea of dropping serifs at the ends of
strokes hadn’t ever previously occurred to the great
many typographers who experimented with their
shapes and sizes so much. The retention of serifs was
due to the inertia of scribes' tradition who, with their
quills, simply could not produce a reasonably clean cut
of a stroke. But also it was known that serifs help the
eye to stick to the line and thus facilitate reading.
But the biggest part of the serif persistence was, of
course, due to plain habit. When the first examples of
sans serif fonts finally appeared, they seemed so
controversial that the first name given to them was
"grotesque," and they were very rarely used except in
advertising. And so it remained until the newest trends
in art and industrial design, most notably the German
Bauhaus movement of 1920s (influenced by earlier
Russian constructivism), required adequate means of
typographic expression. These movements stressed
utilitarian aspects in design, claiming that a thing
becomes beautiful only when---and because---it serves
a practical purpose, denying any attempts to artificially
"adorn" it.
Futura was the most influential type design of that
epoch. Its strictly geometric outline, lacking any
embellishments and just barely conforming to the
historical shapes of letters resulted in a blend of
geometric consistency and aesthetic awkwardness. But
it was at least something quite new, and therefore
impressive, at that time. Now we're much more
accustomed to the look of Futura (and its many
derivatives), but the inborn radicalism of the font still
shows through.
http://www.webreference.com/dlab/9802/sansserif.h
tml
6
Links of Interest
http://www.identifont.com
A page where you can find and discover fonts for every
purpose
Revision Questions
1.
Discuss and describe the different forms of font
that exist.
http://www.myfonts.com
Discover new fonts for your computer.
2.
Discus and describe some early font types and
forms giving examples to illustrate your response.
http://movielibrary.lynda.com/html/modPage.asp?I
D=17
A Typographic Principles workshop containing
instructional movies that will help you understand the
principles of typographic design.
3.
What is meant by the term Roman characters?
4.
Why is uppercase text not usually used for
display purposes?
5.
Which is the more readable style, italics or bold?
Explain your answer.
6.
http://www.wpdfd.com/wpdtypo5.htm
What makes a typeface good or bad for on screen
reading?
What are some of the other character types apart
from letters and numbers that make up the
characters inn a font family?
7.
http://condor.depaul.edu/~dsimpson/pers/typograp
hy.html
‘Typography, Layout, and Graphic Design’ explains so
of the basic terms of typography.
Draw several lowercase characters and on your
diagram show the following elements:
the baseline, descender, ascender, x height, loop,
bowl.
8.
What is meant by the following terms?
• Kerning
• Anti-aliasing
• leading
• hinting
9.
Discuss why screen fonts are different in places to
fonts designed for printing.
http://www.typography-1st.com/typo/txt-lay.htm
A comprehensive website explaining how to use
typography and layout together effectively.
http://www.typography-1st.com/typo/txt-lay.htm
Incorrect choice of Fonts and poor Page Layout can
ruin an otherwise good advertising campaign or
product promotion. Subconsciously the readers'
attention can be directed to other topics or store-shelf
products — it's a science! This website talks about
how to combat these issues.
http://abc.planet-typography.com/about.html
A virtual museum of typography.
10. What is your favourite font? What can you tell us
about this font?
http://www.webstyleguide.com/type/legible.html
Looking at how to make type legible on the Internet.
http://www.jaddesignsolutions.com/thesisweb.html
A dissertation on a critical view of the state of
typography.
http://www.fonts.com/
A website dedicated to fonts.
http://www.metatoggle.com/design_crs/words.html
A breakdown of the hierarchy of typography.
http://www.graphic-design.com/Type/
See what experts have to say on typography.
Typography
7