Typography Calendar

typographic elements
anatomy of design
2006
monospaced typefaces
same spacing no matter the letter
i
m
these flowers fit in
the same amount of
space (the picture
box), however one is
reasonably larger
than the other
in monospaced typewriter typefaces, every letter occupies the
same letter space no matter if it’s “i” or “m.”
uppercase vs. mixed cases
allowing readability
DAHLIA
dahlia
the outline of the flower
on the left is boring, but
gives you the basic idea,
when light is added: the
details jump out to make
it more interesting and
legible (copperplate gothic
and helvetica)
your eye is naturally drawn to the box surrounding the shape of a word,
just as your eye sees the outline of this flower.
bitmapped fonts
pixelated type
ABCDEF
abcdef
both pictures display the
same rose. the picture
on the right displays the
pixelated version of the
rose that compares to
the pixelated type. (arial)
“bitmap” means an 8 point letter is actually made up of 8 pixels in a grid.
this causes fonts to look pixelated like a picture with low resolution, stretched.
type style variations & expert sets
differences in similar fonts
daisy
american typewriter condensed
daisy
american typewriter light
both of these flowers
are daisies but they
have slight variations in
them...color. just as some
font families have slight
variations
in
their
characteristics
like,
weight.
daisy
american typewriter condensed light
daisy
american typewriter
type style is a more daring way to add contrast and adventure to a typographic page.
the idea is to bring in outside fonts which do things your basic family can’t,
usually more heavy weights, or more contrast.
type ergonomics
letter spacing and improving readability
bouquet
bouquet
the flowers on the left are
in a naturally spaced
arrangement, while the
bouquet on the left forces
the flowers together
matching
the
type.
(helvetica)
although typefaces are designed with the correct spacing between characters for general use,
special situations can result in the type looking crowded or too loose.
ligatures and kerning pairs
morphing two into one
fi
ligature
the two flowers on
the
left
morph
together to make the
flower on the right.
this combination is
similar to that of the
morphing of ligatures
and kerning in the “fi”
diagram (bodoni vs.
didot
fi
no ligature
ligatures: two or more letters combined into a single letterform. in some typefaces, character combinations
such as “fi” and “fl” overlap, resulting in an unsightly shape.
kerning: the adjustment of horizontal space between individual characters in a line of text. without kerning
adjustments, many letter combinations can look awkward. the objective of kerning is to create
visually equal spaces between all letters so the eye can move smoothly along the text.
typeface classifications
straight edges
no edges
sans serif: a typeface that does not have serifs. (gill sans light)
script:: fonts that appear to have been hand lettered with a calligraphy pen or brush,
or sometimes with a pencil or technical pen. (snell roundhand)
not typical shape
stands out
serif:: a small decorative stroke at the end of a letter’s main strokes. serifs improve
readability by leading the eye along the line of type. (times new roman)
curly lines
the 5 categories
display:: another category of fonts with characteristics similar to decorative
fonts. in some typeface families, a font is designed for larger sizes (usually over
24 points) with thinner strokes and more delicate serifs. (didot)
(symbols) (symbols): a category of type in which the characters are special
symbols rather than alphanumeric characters. (wingdings)
size variation for same point size fonts
understanding the difference
rose
rose
while they’re both roses,
these flowers don’t look
like the same. just as
these fonts are the
same size but one looks
smaller (graphite mm)
in some type families you may have the same typeface and same size, but it
looks larger or smaller depending on the specifications (heavy, thin, italic, bold, etc).
grids
not just for math anymore
the flowers of spring
by: emily nichols
“on the first day of
spring every year there
is a new hope that life
will once again arise
with the blooming
flowers of the english
gardens. the children
who live near the
garden enjoy picking
flowers for their mothers to place on the kitchen
table.”
these flowers bloom in grids in the gardens , as
this page follows a grid. there are pictures placed
within this miniature page and the text is wrapping
around the photos. the photos are placed randomly
throughout the page so as to demonstrate my
point. you can now follow the grid.
this garden is set up on a grid, the flowers are organized in sections graphically
certain books are set up like gardens: you can browse or look up
things of particular interest.
choosing the right typeface
changing the emotion conveyed by a word
rose
this type is
fun just like
the flowers
(comic sans)
aster tataricus
this type is
fancy just like
the flower (snell
roundhand)
we associate particular typeface looks with certain products. fresh produce always seems to want an improvised,
handwritten sort of message, while high-tech applications demand a cool technocratic look.
letterform anatomy
anatomy of a font
this diagram shows the way a font is measured and the terms
used to describe it...
...just as this diagram labels the parts of a
flower
scientists had to measure proportions of nose to jaw, forehead to chin, etc. to establish why some
faces are more appealing than others, the same is true for fonts.
typographic mistakes
spelling errors
“flowers are the sweetest things god ever made,
and forgot to put a sole in too.”
it’s amazing how a
spelling mistake will leap
right off the page at you
like it’s completely out of
place.
being a professional is double and triple checking your work then giving it to someone else to check it
to make sure there are no spelling mistakes. a spelling mistake can ruin c project completely.
credits
stop stealing sheep & find out how type works: erik spiekermann & e.m. ginger
typography primer: adobe pdf file from www.adobe.com/type
the quote garden: http://www.quotegarden.com
the visual garden: http://www.phy.duke.edu/~fortney/vg/vg.html
the pet professor: http://www.thepetprofessor.com/secfreephotos/browsefreephoto
diagram of flower (on february): pam hunter 2000
fonts used (all months): didot for headings , graphite MM for body text