You are on page 1of 31

CONTENT

1. HISTORY OF TYPE AND PRINT (PAST AND PRESENT) 2

2. TYPE TERMINOLOGY (ANATOMY OF TYPE) 3

a) TYPE MEASUREMENT 3-5


b) TYPE STYLE, FAMILY, AND CLASSIFICATION 5-15

3. ELEMENTS IN TYPOGRAPHY 15-16

4. READABILITY AND LEGIBILITY 17-18

5. SPACE 18-21

6. SCALE & WEIGHT/ PROPORTION/ DEPTH AND LAYERS 21-25

7. THE GRID: SYSTEM AND CONSISTENCY

8. ALLIGNMENT AND ARRANGEMENT

9. EFFICIENCY AND EFFECTIVENESS


1. HISTORY OF TYPE AND PRINT (PAST AND PRESENT)

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.

History of print (The spread of printing: 1457-1500)


An invention as useful as printing, in a Europe of increasing prosperity, readily finds
new customers. The first Italian press is founded in 1464, at the Benedictine town of Subiaco
in the Papal States. Switzerland has a press in the following year. Printing begins in Venice,
Paris and Utrecht in 1470, in Spain and Hungary in 1473, in Bruges in 1474 (on a press
owned by Caxton, who moves it to London in 1476), in Sweden in 1483. By the end of the
century the craft is well established in every European kingdom except Russia. During the
early decades, German printing predominates. More books are published in Germany than
anywhere else (by 1500 there are printers in some sixty German towns); German printers
carry the craft secrets abroad; and foreign printers come to Germany to study as apprentices.
The earliest typography is therefore in the Black-letter style of contemporary German
manuscripts. But by the end of the century the most fashionable and influential printing is
being done in Italy, with a corresponding change in appearance. From the 1470s, when
Nicolas Jenson establishes a press there, Venice becomes a city known for the quality of its
printing. Its pre-eminence in the field is firmly established by the end of the century through
the publications of Aldus Manutius. These Venetian printers develop type faces more open
and elegant than the German black-letter tradition, deriving them from the scripts of the
Italian humanists. In doing so, they provide the book trade with two of its most lasting
typographical conventions - Roman and italic.

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

1 inch = 6 picas = 72 points

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.

From top to bottom 1, 2, 3, and 4-point 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.

Type style, family and classification

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.

Serif type style

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.

Neoclassical & Didone Serifs

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

Typefaces in this category tend to emulate lapidary inscriptions rather than


pen-drawn text. Contrast in stroke weight is usually at a minimum, and the
axis of curved strokes tends to be vertical. The distinguishing feature of
9
these typefaces is the triangular-shaped serif design, or a flaring of the
character strokes where they terminate. In some type classification systems
this category is sub-divided into two groups: glyphic and latin. Latins
are faces with strictly triangular-shaped serifs.

Sans Serif typestyle

Grotesque Sans Serif


These are the first commercially popular sans serif typefaces. Contrast in
stroke weight is most apparent in these styles, there is a slight squared
quality to many of the curves, and several designs have the bowl and loop
lowercase g common to Roman types. In some cases the R has a curled leg,
and the G usually has a spur. This category also includes more modern, sans
serif designs patterned after the first grotesques. Stroke contrast is less
pronounced than earlier designs, and much of the squareness in curved
strokes has been rounded. Normally the most obvious distinguishing
characteristic of these faces is their single bowl g and more monotone
weight stress.

Square Sans 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.

Geometric Sans Serif

Simple geometric shapes influence the construction of these typefaces.


Strokes have the appearance of being strict monoclines and character
shapes are made up of geometric forms. Geometric sans tend to be less
readable than grotesques.

Humanistic Sans Serif

These are based on the proportions of Roman inscriptional letters. Frequently,


contrast in stroke weight is readily apparent. Typographic experts claim that these
are the most legible and most easily read of the sans serif typefaces.
Humanistic sans serif typefaces also closely match the design characteristics and
proportions of serif types, often with a strong calligraphic influence.

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.

Blackletter & Lombardic Scripts


These typefaces are patterned on manuscript lettering prior to the
invention of movable type. The Blackletter typeface (also sometimes
referred to as Gothic, Fraktur or Old English) was used in the Guthenburg
Bible, one of the first books printed in Europe. This style of typeface is
recognizable by its dramatic thin and thick strokes, and in some fonts,
the elaborate swirls on the serifs. Blackletter typefaces are based on early
manuscript lettering. They evolved in Western Europe from the mid twelfth
century. Over time a wide variety of different blackletters appeared but four
major families can be identified: Textura, Rotunda, Schwabacher and
Fraktur. Its beyond the scope of this article to go into each one, but if
you look at the letter o in the chart below you will see the difference.

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

The dot is the simplest irreducible minimum unit of visual communication. In


nature, roundness is the most common formulation, the straight or square in the
natural state is a rarity. Any point has strong visual power to attract the eye
wherever it exists naturally or is placed by artists in response to a purpose.

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.

6. SCALE & WEIGHT/ PROPORTION/ DEPTH AND LAYERS

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:

Classic typographic scale.

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

A proportional typeface contains glyphs of varying widths, while a monospaced (non-


proportional or fixed-width) typeface uses a single standard width for all glyphs in the font.

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.

DEPTH AND LAYER


A dimension taken through an object or body of material, usually downward from an upper
surface, horizontally inward from an outer surface, or from top to bottom of something
regarded as one of several layers.

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.

Constructing a Grid System

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.

a) Flush Left (or Ragged Right)

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.

b) Flush Right (or Ragged Left)

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.

9. EFFICIENCY AND EFFECTIVENESS

1) Effective Adequate to accomplish a purpose; producing the intended or expected


result.
2) Efficient Performing or functioning in the best possible manner with the least waste
of time and effort.

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:

Beware of Font Communication

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.

Alignment makes or breaks your design


Alignment is very important to pay attention to when designing. A lot of non
designers have a tendency to either center align everything or justify text leaving
paragraphs looking poorly designed and hard to read. There are four major alignment
options. Left Aligned (Flush Left), Center Aligned, Right Aligned (Flush Right), or
Justified. Left alignment is most common in almost everything because we read left to
right and its easy on the eyes for everything to start perfectly aligned on the left side
of a page. Aligning right for the same purpose of having it look nice with everything
aligned on one side can look nice but it needs to be done correctly. With both Left
aligning and right aligning, you need to watch for ragged lines. Ragged lines are when
there is a lot of difference between the lengths of the lines of text. As you can see
below, Example A has ragged lines and Example B as a smoother transition between
the lengths. The lengths of the lines still differ but its not as bumpy.

Choose a good secondary font when font pairing


Font pairing is essential to the legibility of your design. When you have a
heading with a subhead, having two different fonts that compliment each other is a
great way to differentiate the hierarchy. The difficulty with font pairing is that you
dont want to have two conflicting fonts or two fonts that are so similar, you can
barely see a difference between the two. You want to make it as delightful on the
viewers eye as possible. Just My Type is a great website to go to for reference with
font paring.

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.

Bold, sharp color choices


Color can really bring typography to life. Bright, sharp color choices create contrast and can
focus the attention of website visitors. Colors also evoke emotional associations and help a
word have additional meanings or feelings when paired with different hues.
Plan color, word and font choices carefully and with awareness of any hidden associations
the combinations might infer. Also look for color with pop. Beige is all over the Internet, go
bolder for more impact.

30
31

You might also like