An introduction to typography

Words are important—not just what they say, but how they look. To quote Ellen Lupton,
from her book Thinking with Type, “Typography is what language looks like.” Language has
always been symbolic, although the origins of such symbols (of certain letterforms relating
to, for example, animals) has largely been lost in written English; instead, we now have
rather more abstract symbols designed for repetition on the page or screen.
However, from the early calligraphy that was created by hand, through the movable type
(invented in Germany by Johannes Gutenberg during the 15th century) that enabled massproduction
printing via molded letterform casts, to the most advanced desktop-publishing
software available today, the ultimate aim of type has been one of record and information
provision. In other words, type itself is important from a design standpoint because it
needs to record whatever information is being written about, and that information needs
to be easily retrievable by anyone who wants to understand it.
Like all aspects of design, typography has massively evolved over the years, particularly
over the past couple of decades, where computers have enabled designers to more rapidly
experiment with lettering. Despite this, many conventions formed much earlier still have a
part to play:
Myriad fonts exist, and each one has a different look, and therefore a different
“feel;” you need to choose the most appropriate one for your purpose. (This is further
complicated by there being only a certain number of web-safe fonts, as you’ll
see later.)
Headings, strap-lines/stand-firsts (the introductory line that introduces a piece of
text, commonly used in editorial articles), and crossheads (short subheadings that
break up areas of body copy) should stand out, and the prominence of each piece
of text should be related to its level of importance (in other words, a crosshead
shouldn’t be more prominent than a main heading).
Footnotes often use text smaller than the main body copy text to signify their
lesser significance to the main text, but nonetheless provide useful supplementary
information.Decorative elements can be used to draw the reader’s attention to
specific parts of the text. Drop caps and initials—large initial letters,
flamboyant in classical typography, but typically more
restrained in modern work (see right)—enable a reader to rapidly
navigate to the beginning of a piece of text. Pull quotes—quotes
from the main body of the text, displayed in large lettering outside
of context—are often used in magazine articles to draw a reader’s
attention to a particular article, highlighting particularly interesting
quotes or information.
Spacing is just as important as content. Kerning—the spacing between letter
pairs—can be increased to add prominence to a heading. Leading—the amount of
added vertical spacing between lines of text—can also be adjusted. Increasing leading
from its default can make text more legible. In books, a baseline grid is often
employed, ensuring that text always appears in the same place on each page. This
means that the text on the opposite side of the paper doesn’t appear in the gaps
between the lines on the page you’re reading. Baseline grids often make for
extremely pleasing vertical rhythm, and are regularly used in print publications;
they’re infrequently used online, but can nonetheless be of use, making a page of
text easier to read and navigate.
Columns can be used to make a page easier to read. This is common in newspapers
and magazines; online, the low resolution of monitors, and the (current) lack of
being able to auto-flow columns of text makes de facto text columns impractical,
but the reasoning behind columns is still handy to bear in mind. Generally, it’s considered
easier to read text that has fairly narrow columns (although not too
narrow—if there are too few characters, reading and comprehension slow down)—
text that, for example, spans the entire width of a 23-inch monitor rapidly becomes
tiring to read. There are no hard-and-fast rules when it comes to line length,
although some go by the “alphabet-and-a-half” rule (39 characters per line), some
advocate the “points-times-two” rule (double the point size and use the number
for the number of characters), and others recommend a dozen or so words, or
about 60 characters.
A few highly useful online resources for web typography can be found at the following
locations:
The Elements of Typographic Style Applied to the Web: www.webtypography.net/
Five Simple Steps to Better Typography: www.markboulton.co.uk/articles/detail/
five_simple_steps_to_better_typography/
Five Simple Steps to Designing Grid Systems: www.markboulton.co.uk/articles/
detail/five_simple_steps_to_designing_grid_systems/
When it comes to web design, some conventions are used, and others are ignored. In fact,
while web designers take the utmost care to get layouts right, scant few give the same
thought to text, merely choosing a font and arbitrarily setting other values, if they set
them at all. Once, this could be excused, but CSS has enabled web type to come a long
way, and although the same degree of control as print-based type isn’t possible, you can
do a lot more than just choose your preferred font for headings and body copy.