Typography by liuzedongsd


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
                                                             Claude Garamond.
                  including Bembo,
                  Garamond, Janso                            1540.                     123456
                  and Caslon                                 Big Caslon                abcdefg HIJKLMN
                                                             William Caslon.
3. Transitional   Fournier,
                  Baskerville, Bulmer
                                         Baskerville         1724.                     123456
                  and Caledonia                              Baskerville               abcdefg HIJKLMN
                                                             John Baskerville.
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
                                         Edwardian          development
9. Graphic        Drawn letters eg.                         The original font that was used in the first Gutenberg
                  comic sans
                                         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

Typography                                                                                                           2
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

aa             aaaa
                                                              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
                                                                  languages; and
                                                              • 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.

Typography                                                                                                        3
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.
                                                             a. Anti-aliasing
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.
selected letterforms.
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,
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              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
                                                             b. Hinting
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

Typography                                                                                                         4
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
                                                             common rule.
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).
abcadefghijklmonopqrstuvwxyzABCDE                            http://www.ms-studio.com/articles.html
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

Typography                                                                                                      5
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.
d. Verdana
                                                             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
                                                             "adorn" it.
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

Typography                                                                                                        6
Links of Interest
                                                           Revision Questions
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,
hy.html                                                         bowl.
‘Typography, Layout, and Graphic Design’ explains so
of the basic terms of typography.                          8.   What is meant by the following terms?
                                                                • Kerning
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.

Typography                                                                                                    7

To top