Professional Documents
Culture Documents
5. SPACE 18-21
History of type
Type is a fundamental part of any design it appears in. It can be used as text to read, as a
shape and as a visual element where the choice of typeface conveys an emotion or mood.
Type, when used well doesnt need a photograph or illustration to back it up.
2
2. TYPE TERMINOLOGY (ANATOMY OF TYPE)
Type measurement
A standard system of measurement within typography came about in the late 19th
century. Prior to that, different type foundries had different ways of measuring their own
type. Accustomed to measuring things in inches, yards, or miles, or, heaven the metric
system. Type on the other hand, has its own system of measurement of which most of us have
a vague understanding. For example, most of us understand that normal body is set between
10 and 12 points, and 72 points is too large for everyday use.
Type is generally measured in points and picas. These measurements can easily be converted to inches.
A point is a unit of measurement held over from the olden days of manual typesetting.
Points are used to measure the size of a font and the space between lines. Another
measurement, the pica, is used to measure the length of a line of type. You probably wont
use picas unless you are using a page layout application like Adobe in Design.
The following table describes the relationship between points, picas, and inches.
12 points 1 pica
6 picas 1 inch
72 points 1 inch
3
Type purists would tell you that there are actually 72.27 points per inch. The
difference, however, is nearly imperceptible, and most software programs use the 72 points
per inch measurement unless you change the default settings. Type measurements in a variety
of ways can be done such as 18-point type could be represented as 1p6 or 0p18 in pica-speak.
Measuring in inches is fine for our example of 18-point type (or 1p6). 18 points is easily
converted to 0.25 inch. If your type is set to 16 points (or 1p4), however, the conversion to
inches is not so simple: 0.2222 inch.
Section of a pica ruler the normal inch measurement on one side and the numbers on
the opposing side are picas. Then, the smallest tick marks represent 2 points each. There are
12 points in each pica, and 6 picas per inch. Picas and points are used for measuring all things
type, plus more. The next image down shows that points are also used to measure the weight
of lines, or rules.
Font size can best be described as the measurement from the bottom of the descenders
to the top of the ascenders, but, technically, theres a little space below the descenders and
above the ascenders that gets counted in the font size of computerized type. For example, if
the measure from the bottom of the descenders to the top of the ascenders of Times New
Roman set at 72 points, it might only measure 66 points. Back in the day, the font size was
measured by the actual block the metal type was mounted on. The metal type was not
mounted to the edge of the block, so that little space below the descenders and above the
ascenders is another holdover from the days of manual typesetting.
The size of a font is measured from just above the ascender height to just below the descender line.
4
There are additional terms that are used when measuring spaces or indents, but spaces
are a topic for another day. Metal type is cast letter by letter on individual blocks. All the
blocks of a specific size typeface are all the same height. The blocks have to be tall enough to
contain the caps, the ascenders, and the descenders as shown on the lines above and below
the peatah.org lettering below. These represent the top and bottom of the type blocks. Each
block has to be uniform in height so that the font has a consistent baseline.
Point size is a measurement that would include room for all the caps, ascenders and descenders.
Most typefaces can be classified into one of four basic groups with serifs, without
serifs, scripts and decorative styles. Over the years, typographers and scholars of typography
have devised various systems to more definitively categorize typefaces some of these systems
have scores of sub-categories. A classification system can be helpful in identifying, choosing
and combining typefaces. While four categories are clearly inadequate for design
professionals, dozens become self-defeating. We have put together a somewhat hybrid
system of 15 styles, based on the historical and descriptive nomenclature first published in
1954 as the Vox system and still widely accepted as a standard today.
Old style
This category includes the first Roman types, originally created between the
late 15th and mid-18th centuries, as well as typefaces patterned after those
designed in this earlier period. The axis of curved strokes is normally inclined
to the left in these designs, weight stress is at approximately 8:00 and 2:00
oclock. The contrast in character stroke weight is not dramatic, and hairlines tend
to be on the heavy side. Serifs are almost always bracketed in old style designs
5
and head serifs are often angled. Some versions, like the earlier Venetian old
style designs, are distinguished by the diagonal cross stroke of the lowercase e.
6
Transitional Serif
English printer and typographer John Baskerville established this style in the
mid-18th century. These typefaces represent the transition between old style and
neoclassical designs, and incorporate some characteristics of each. Baskervilles work
with calendered paper and improved printing methods (both developed by him)
allowed much finer character strokes to be reproduced and subtler character shapes
to be maintained. While the axis of curve strokes can be inclined in transitional
designs, the strokes normally have a vertical stress. Weight contrast is more
pronounced than in old style designs. Serifs are still bracketed and head serifs are
oblique.
These are typefaces created within the late 18th century, or their direct
descendants. The work of Giambattista Bodoni epitomizes this style of
type. When first released, these typefaces were called classical designs.
Early on, however, it became apparent to printers that these were not
7
updated versions of classic type styles, but altogether new designs. As a
result their classification name was changed to modern. Since the mid-
20th century, they have also been classified as neoclassical or didone.
Contrast between thick and thin strokes is abrupt and dramatic. The axis of
curved strokes is vertical, with little or no bracketing. In many cases, stroke
terminals are ball shapes rather than an evocation of a broad pen effect.
These tend to be highly mannered designs, with clearly constructed letters.
Slab Serifs
Slab serif typefaces became popular in the 19th century for advertising
display. It also have very little contrast between the thick and thin strokes.
They have a bold, rectangular appearance and all characters occupy the
same width. They are best suited for use in titles due to their low contrast.
These typefaces have very heavy serifs with minimal or no bracketing.
Generally, changes in stroke weight are imperceptible. To many readers,
slab serif type styles look like sans serif designs with the simple addition
of heavy (stroke weight) serifs. Although slab serif is a typographic
classification for fonts, it is also a broad generalisation as there are many sub
groups of slab serif fonts e.g. Clarendon, neo-grotesque and italienne.
8
Clarendon Serif
This category includes the typefaces patterned after the Clarendon type styles
first released in the mid-19th century. Clarendons were designed as bold faces
to accompany text composition. Their stroke contrast is slight, and serifs
tend to be short to medium length. Later, many of these designs were
released at larger point sizes as display types. Character stroke weight that
is more obvious, and serifs that tend to be longer than earlier designs, mark
more current interpretations of this style.
Glyphic Serif
10
These designs are generally based on grotesque character traits and
proportions, but have a definite and, in some instances, dramatic squaring of
normally curved strokes. They usually have more latitude in character spacing
than their sans serif cousins, and tend to be limited to display designs.
11
Script Type Styles
Formal Scripts
Formal scripts are very fluid and graceful, and often have connecting
strokes. They are appropriate when an elegant, stately look is desired. These
typefaces are derived from 17th century formal writing styles. Many
characters have strokes that join them to other letters.
12
Calligraphic Scripts
These scripts mimic calligraphic writing. They can be connecting or non-
connecting in design. Many appear to have been written with a flat-tipped
writing instrument.
13
Casual Scripts
Casual scripts look like more regular handwriting and are less formal. They
can still have strokes that vary in width but are not as sophisticated looking as
the formal scripts. These typefaces are designed to suggest informality, as
if they were written quickly. Many times they appear to have been drawn with
a brush. Normally, character strokes connect one letter to the next.
Decorative Styles
This is the largest category and also the most diverse. Rarely used for
lengthy blocks of text, decorative typefaces are popular for signage,
headlines and similar situations were a strong typographic statement is
desired. They frequently reflect an aspect of culture such as tattoos or
graffiti or evoke a particular state of mind, time period or theme. Many
such as psychedelic or grunge designs are time-sensitive and fall out of
fashion. Some decorative typefaces use unorthodox letter shapes and
proportions to achieve distinctive and dramatic results. Some even appear
three-dimensional.
14
3. ELEMENTS IN TYPOGRAPHY
Dot
15
Line
When dots are so close to one another that they cannot be individually recognized the
sensation of direction is increased and the chain of dots become a distinctive Line. Paul
Klee, the Swiss Expressionist painter, described a line as a dot out for walk. A line is
the history of a dot's movement, since, when we make a continuous mark or a line, we
make it by placing a marker point on a surface and moving it.
Shape
Line describes shape. Line articulates the complexity of shape. There are geometric
shapes, the square, circle, and equilateral triangle. Each of the basic shapes has its own
unique character. The square has associated to it dullness, honesty, straightness, and
workmanlike meaning the triangle, action, conflict, tension; the circle, endlessness,
warmth, protection.
16
4. READABILITY AND LEGIBILITY
I. Readability
Readability is about arranging words and groups of words in a way that allows the
readers eye to access the content easily and in a way that makes sense. Its really an
art form that is honed over time as successful combinations are found. In my
experience this tends to be one of the hardest concepts to grasp for beginning
developers and designers alike. Even seasoned designers sometimes struggle with
how to best arrange typography in a layout. Now that those two designations are
starting to merge when it comes to web design, its important to begin to grasp the
concept of readability.
II. Legibility
A measure of how easy it is to distinguish one letter from another in a particular
typeface. In this post well focus on readability and next week, in part 2 well look at
legibility. As more fonts become available for use on the web, its important that you
choose one that doesnt wear your readers out. Its important to understand what
makes one typeface more legible than another. When choosing a typeface, it all
depends on how you plan to use it. Ask yourself some basic questions: What size will
the text be used at? Will it appear as body copy or a headline? Does it need to be a
17
workhorse or will it be used more as eye candy? Will it be paired with another font?
Does the appearance of the typeface complement the subject matter? Its also
important to keep in mind that different typefaces were designed for different uses.
18
5. SPACE
Letter space
The amount of space between letters (read more about tracking and kerning here) and
word spacing, as the name implies the amount of space between words. Both are major
factors in how readable body copy is. Lower case letters dont ordinarily need letter
spacing. Nor do capital letters when they appear at the beginning of a word or
sentence, because theyre designed to fit correctly next to lower case letters. But when
you use capital letters together, that spacing looks too tight. Thats why you always
add 512% extra letter spacing to text in all caps or small caps, particularly at small
sizes.
Word Spacing
The word space has exactly one purpose is to create horizontal clearance between two
words. Likewise, the space bar exactly also has one purpose to insert a single word
space. Dont use the space bar as a general purpose white space dispenser by holding it
down and watching the cursor glide across the screen. Though it may be a calming
19
sight, it leads to anguish when formatting the document. Use exactly one word space at
a time.
Line spacing
Line spacing is the vertical distance between lines of text. Most writers use either
double spaced lines or single spaced line nothing in between because those are the
options presented by word processors. The traditional term for line spacing is leading
(rhymes with bedding). Sometimes you see this term in type setting software. Leading
is so named because traditional print shops put strips of lead between lines of type to
increase vertical space.
20
Counter space
In typography, the enclosed or partially enclosed circular or curved negative space
(white space) of some letters such as d, o, and s is the counter. The term counter may
sometimes be used to refer only to closed space, while partially enclosed spaces in m,
n, or h are the aperture. The shape and size of the counter and bowl (curved stroke
enclosing the counter) can affect readability and is also an identifying factor for some
typefaces and also Known As: aperture, inner space, enclosed space.
SCALE
The typographic scale has been used for centuries as a means of creating balanced and
harmonious font sizing. It is the bedrock of modern typography. This is the classic
typographic scale, as recorded by Mr. Bringhust in The Elements of Typographic Style:
a a a a a a a a a a a a a a a a
6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72
The classic typographic scale is a harmonious progression of font sizes, like the notes of a
musical scale. Because the classic typographic scale is a scale, it must obey the scaling
property: if x is a size in the scale, then r * x must also be a size in the scale, where is
the ratio of the scale. This ratio is a defining property of the scale. We can use this property
to continue the classic typographic scale to much larger font sizes.
21
Classic typographic scale (continued).
6
a a aa
aaa
2
aaa
2
4
aaaaaaa aa
48 55 63 73 84
aaa
96
aaa
110 127 146 167 192
The sizes 6 pt, 12 pt, 24 pt, and 48 pt are all present in the typographic scale. Consequently,
the ratio of the classic typographic scale is two. The classic musical scales also have a ratio
of two. Each C note on a piano, for example, vibrates twice as quickly as the previous C
note. The classic typographic scale is very much like a musical scale. The second defining
property of a scale is the number of notes, n, in the scale. There are five sizes in each
interval of the classic typographic scale. As a result, the classic typographic scale is
a pentatonic scalelike Jazz and much of the worlds traditional music. The third, and
final, property of a scale is its fundamental frequency, f_0. On a piano, this is the
frequency of the middle C note. In the classic typographic scale, the fundamental
frequency is the pica. This value, 1 pica = 12 pt, is the baseline font size used in print
typography. The general formula for the frequency f_i of the ith note of any scale is:
Using this formula, we can go back and recalculate the font sizes for the classic typographic
scale, and compare them to the rule of thumb values guessed by the original human
typographers:
22
a a a a a a a a a aaa aaaa aa
6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 84 96
The intuition of the human typographers was extremely close! However, there are a few
discrepancies: First, there are four lost notes: the 28 pt, 32 pt, 42 pt, and 55 pt font sizes.
These lost notes were not listed in the original typographic charts, despite being
perfectly in tune with the rest of the scale. These notes are necessary to complete other
notes that were listed in the original typographic charts. For example, the 16 pt font size
is completed by the 32 pt font size which is one of the lost notes. The second issue is that
two of the notes are flat. The 60 pt and 72 pt sizes are off by a total of 4 pt. These two
font sizes were rounded down to the nearest multiple of the pica, so this may have
been a practical concession for early printing processes, rather than a true error.
However, the result is that modern typographers have inherited two notes that are not
quite in tune. The final discrepancy is that there is an extra note: Every interval of the
classic typographic scale has five notes, but the original typographic charts
have six notes in the first interval. The 11 pt font size doesnt belong in the scale. It
would sound sharp or flat if played by a musical instrument.
WEIGHT
The weight on the one hand determines how bold the typeface looks, how heavy the
strokes making up the characters are. The first related bold weights for text faces are even
more recent than the first related italic faces. They date from the second half of the
nineteenth century, and you can read all about them in this great article by Mitja Miklavi,
the designer of the award winning FF Tisa. Just like italics bold weights of text faces are
used for emphasis within the text. The traditional weights are Regular and Bold, with Light
and Black being the outward extensions on the weight scale, and sometimes a Semibold in
between. Yet currently there are families that feature up to a staggering 15 weights!
23
PROPORTION
Many people generally find proportional typefaces nicer-looking and easier to read, and
thus they appear more commonly in professionally published printed material. For the
same reason, GUI computer applications (such as word processors and web browsers)
typically use proportional fonts. However, many proportional fonts contain fixed-width
(tabular) figures so that columns of numbers stay aligned.
Monospaced typefaces function better for some purposes because their glyphs line up in neat,
regular columns. No glyph is given any more weight than another. Most manually
operated typewriters use monospaced fonts. So do text-only computer displays and third- and
fourth-generation game console graphics processors, which treat the screen as a uniform
grid of character cells. Most computer programs which have a text-based interface (terminal
emulators, for example) use only monospaced fonts (or add additional spacing to
proportional fonts to fit them in monospaced cells) in their configuration. Monospaced fonts
are commonly used by computer programmers for displaying and editing source code so
that certain characters (for example parentheses used to group arithmetic expressions) are
easy to see.[7] Monospaced fonts may also make it easier to perform optical character
24
recognition. Any two lines of text with the same number of characters in each line in a
monospaced typeface should display as equal in width, while the same two lines in a
proportional typeface may have radically different widths. This occurs because in a
proportional font, glyph widths vary, such that wider glyphs (typically those for characters
such as W, Q, Z, M, D, O, H, and U) use more space, and narrower glyphs (such as those
for the characters i, t, l, and 1) use less space than the average.
In the publishing industry, it was once the case that editors read manuscripts in
monospaced fonts (typically Courier) for ease of editing and word count estimates, and it was
considered discourteous to submit a manuscript in a proportional font. This has become
less universal in recent years, such that authors need to check with editors as to their
preference, though monospaced fonts are still the norm.
Type is typically one-color. Of course, after its set, a user can manipulate letters with a
texture or a gradient; but out of the box, a font is usually capable of a single colour. This is
where layer fonts change the game. With glyphs that are designed to be overlaid on top
of each other, layer fonts make it easy to apply multiple colours and other effects without
extra steps or leaving the comfort of your typesetting or layout app.
The most obvious use of type layers is to add decorative elements in multiple hues. A
variety of Fonts take advantage of layers to enhance their display qualities, from playful to
grungy. Here are a few:
25
7. THE GRID: SYSTEM AND CONSISTENCY
Grid is an instrument for ordering graphical elements of text and images. The grid
is a child of Constructivist art and came into being through the same thought processes that
gave rise to that art movement. Clear links can also be drawn between the Concrete
Geometrical art of the Zurich school in the 1930's and several notable artists of this
movement made important contributions to typography through their fine art. It was around
this period that the grid system moved from the domain of art and into one of typography and
commercial design.
To design a successful grid system you have to become familiar with these ratios and
proportions, from rational, wholenumber ratios such as 1:2, 2:3, 3:4 and those irrational
proportions based on the construction of circles, such as the Golden Section 1:1.618 or
the standard DIN sizes 1:1.4146. These ratios are ubiquitous in modern society, from the
buildings around us to patterns in nature. Using these ratios successfully in a grid
system can be the deciding factor in whether or not a design, not only functions, but has
aesthetic appeal too.
The canvas for a grid system is determined by the media size; a book, magazine, signage,
or a website. The benefit for designing in more traditional media forms is that your canvas
will remain constant. It will not change its shape. Of course on the web, the user can not
only view your site in many different browsers, on multiple platforms, but can also resize
their browser window to the resolution of their screen. Designing to such variables is a
challenge. To successfully design a grid system for the modern web, we have to look at a
bestcase scenario, and graceful degradation.
26
8. ALLIGNMENT AND ARRANGEMENT
How you align your text has a huge impact on how people will read and perceive it. The
decision of alignment should be made with your design theme in mind, and of course,
readability and legibility.
Text is aligned to the left. This alignment complements the natural way we read
text in western culture. When done correctly, it is one of the biggest factors in
improved readability.
Be sure to pay attention to the right-hand side (or the rag). It is important to make
sure there is a good balance with line length; make sure that they are not too similar,
but also not too far apart.
Text is aligned to the right. If we read from left to right, flush right can hamper the
natural flow of the text. Use it as a contrast to the main body of text to highlight
complimentary copy. Watch out for punctuation marks on the right-hand side as
they can disrupt the alignment.
c) Justified
The start and end of text lines are both aligned to the left and right. While justified
alignment looks clean because it fits neatly into a box, it can also be hard to read
because there is less visual cue between the termination of a text line. Variances in
spacing can appear between words in order to keep the lines even. Be vigilant on
over- hyphenation, as some programs hyphenate words at the end of text lines to
keep the text justified. In addition, some lines might have too much word-spacing,
so you might need to adjust line breaks as needed.
d) Centred
Text is aligned to the centre of the text area, rather than the edges. Exercise caution
when using centred alignment there is nothing worse than poorly set cantered
text. There is no shared point where the line begins and ends, so it can be very hard
to read. Cantered text looks best when there are only a few lines of text (2-3 lines).
27
Done well, centred alignment can look classy and elegant. Be sure that your text
area is wide enough to break the text into logical lines and that there is enough
contrast between the line length to make the text inviting.
The difference between effectiveness and efficiency can be summed up shortly, sweetly and
succinctly Being effective is about doing the right things, while being efficient is about
doing things right.
28
Some basic rules to follow for creating efficiency and effective typography:
When designing, make sure that the type is communicating to our audience.
Not only just by making sure that your copy is well written and spelled correctly, but
there are so many fonts to choose from these days, make sure the font you choose for
your design fits your audience. For example, you wouldnt make a brochure for an
Accounting company filled with rainbow cartoon lettering that would be better served
for a kindergarten booklet.
29
The typeface used on the GNosh site works so well because it has the chalkboard feel
employed by many small restaurants to showcase daily specials. The typeface is fun, readable
at the large size and fits the theme of the site.
30
31