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