Upload
ckoloff
View
1.524
Download
6
Embed Size (px)
DESCRIPTION
Basics of typography and relevant considerations for print and web designers
Citation preview
design 101design 101
Presentation SynopsisPresentation Synopsis
• Historical development
• Technical information
• Guidelines and hints
• Ideas
• Historical development
• Technical information
• Guidelines and hints
• Ideas
Historical Development of the
Art & Craftof
TYPOGRAPHY
Historical Development of the
Art & Craftof
TYPOGRAPHY
From inscriptions in stone
to printed pages and digital
images on the web ...
From inscriptions in stone
to printed pages and digital
images on the web ...
...typography is still all about
the effective transfer of
information.
...typography is still all about
the effective transfer of
information.
Two important guysTwo important guys
• Gutenberg’s
invention of
movable type
allowed the first
mass production
of books in
history.
• Gutenberg’s
invention of
movable type
allowed the first
mass production
of books in
history.
• Mergenthaler’s
invention of the
Linotype machine
industrialized the
setting of type for
newspapers and
book publishing.
• Mergenthaler’s
invention of the
Linotype machine
industrialized the
setting of type for
newspapers and
book publishing.
Letterforms have evolved through
history as the available technologies
have evolved.
Stone-chiseled inscriptions and
calligraphy on parchment gave way to
the automated transfer of ink to paper
as the related technologies of
typesetting and printing matured.
Letterforms have evolved through
history as the available technologies
have evolved.
Stone-chiseled inscriptions and
calligraphy on parchment gave way to
the automated transfer of ink to paper
as the related technologies of
typesetting and printing matured.
• SERIF -- short cross-strokes on the
tips of letters, thick and thin strokes,
cursive italics
– Old Style: oblique angled stress,
ascenders taller than capitals
– Transitional: vertical stress, stronger thick and
thin contrast, wider counters
– Modern: severe horizontal stress, severe
thick and thin, precise cut
• SERIF -- short cross-strokes on the
tips of letters, thick and thin strokes,
cursive italics
– Old Style: oblique angled stress,
ascenders taller than capitals
– Transitional: vertical stress, stronger thick and
thin contrast, wider counters
– Modern: severe horizontal stress, severe
thick and thin, precise cut
• SANS SERIF -- “sans” is the
French word for “without”
– Letters have no projecting serifs
– Italic faces are simply oblique versions of roman faces -most slanted at 12 degrees
– Little variation of stroke weight
– lncreased use with advent of photo-typesetting and offset printing
• SANS SERIF -- “sans” is the
French word for “without”
– Letters have no projecting serifs
– Italic faces are simply oblique versions of roman faces -most slanted at 12 degrees
– Little variation of stroke weight
– lncreased use with advent of photo-typesetting and offset printing
• DECORATIVE -- typefaces
designed for decorative or
attention-getting use.
– Script faces add a touch of elegance
– Bold, brassy fonts grab the reader’s
attention
– Faces designed to evoke a certain atmosphere
• DECORATIVE -- typefaces
designed for decorative or
attention-getting use.
– Script faces add a touch of elegance
– Bold, brassy fonts grab the reader’s
attention
– Faces designed to evoke a certain atmosphere
A Short Review of
Typographic Terminology
A Short Review of
Typographic Terminology
Elements of Letter FormsElements of Letter Forms
• Stroke - actual drawn lines of the letters
• Counter - white space inside and between
letters
• X-height - the height of lowercase letters that
don’t extend up or down. A measure of the
relationship between capital and lowercase
letters within a font.
• Ascender - the part of a lowercase letter that
extends above the x-height.
• Descender - the part of a lowercase letter that
extends below the base line.
Basic Type SpecsBasic Type Specs
• Point size - the size of a font measured in
points (12 points per pica/6 picas per inch)
which includes an amount of line space above
and below the font.
• Leading - the addition of any space between
lines of type. Term originated in use of lead
strips inserted between lines of hand-set type.
• Column Width - the measure of horizontal
space the type is set within. A page may be
set up for single column or multiple column
layout. Column width correlates to font size.
Fine-tuningFine-tuning
• Tracking - the ability of the eye to track
along a line and easily recognize letter
forms in sequence. Track values are
adjusted to optimize legibility.
• Kerning - the increase or decrease of
space between individual characters to
enhance legibility
• Justification - the setting of type columns
flush left (right-ragged), flush right (left-
ragged), centered, or justified (both sides
flush), depending on appropriateness.
Stylistic Considerations,
Guidelines and Hints
Stylistic Considerations,
Guidelines and Hints
Or… how to set type so Koloff won’t
proofread while reading...
Or… how to set type so Koloff won’t
proofread while reading...
HyphensHyphens
• Avoid if at all possible, use sparingly and
with great discernment otherwise. Never
more than one hyphen per 5 lines of type,
and never less than 3 characters before or
after the hyphen.
• Never (ever) hyphenate the first or last line
of a column. Absolutely no hyphenated
left-overs on lines by themselves.
Rag ControlRag Control
• Watch the way your line endings flow.
Make the line lengths even up as best you
can on short column widths and no more
than 4-5 picas difference on longer line
widths. Sometimes this requires bouncing
a word down to the next line to cause
re-wrapping of text lines that follow.
• Watch for “rivers” or “holes” in your columns
of justified text. Some track adjustment,
kerning, even a well-placed hyphen can
usually fix these unsightly spots.
White SpaceWhite Space
• Remember, white space is your friend.
• Get to know where that point of balance
is between the strokes and counters,
between the columns and the gutters,
and between the page and the image area.
• When setting up a folded piece, remember
to double the margins for the gutter space
so that the columns center between folds.
• Leave the printer enough margin for the
gripper to pull the sheet through the press.
LegibilityLegibility
• Headlines are road maps for your pages.
Make them clear, crisp and easy to read.
• Subheads guide the reader through text
blocks, giving them structure and definition.
Use more leading before a subhead than
after so that it flows naturally into the text
block that it pertains to.
• Body text is the main communication
within the document. Make sure it is highly
legible and doesn’t stress the reader. Limit
the use of all-caps and italics.
Font CompatibilityFont Compatibility
• Avoid the “ransom note” look, unless that’s
what you want your piece to look like! For
most purposes, two type families are plenty
per document.
• Use complementary fonts that harmonize.
A delicate script and a big bold headline
font won’t usually work well together.
• Avoid all-caps settings when possible,
especially on script and italic faces.
• Serif type usually works better for body text
in long documents as it is more legible.
ProofreadProofread
• Spell check your document, then proofread
a hard copy, because spell checkers don’t
catch everything.
• Have someone else read your hard copy
proof as well because they may see
something you’ve overlooked.
• Check the legibility of your text in relation
to the colors used in your document. Make
sure you have good contrast and definition.
Special ConsiderationsSpecial Considerations
• If your document is targeted to senior adults
or children, be sure to use larger font sizes
and typefaces with well-defined letter forms.
• Type set for large displays or billboards
should be tracked and kerned (TNT).
• Type set for television should have the
tracking loosened up to allow a bit more
space between letters.
• Type set for signage should be large
enough to be read from a distance and
kerned carefully but not too tightly.
Be Creative!
Drop caps are fun!
L arge capital letters set within the length
of the column width serve to set off a
new paragraph. They are specified as an initial
cap (one line) or as a 2-line drop cap (like this
example), or however many lines you wish to
drop it into. The use of decorative ornamental
caps and complementing colors is highly
appropriate for this type of treatment.
Use leading creatively!
Sometimes
you want to draw attention
to a specific block of text,
such as a pullout quote,
or a scholar’s column.
Exaggerated leading can
help achieve this effect.
Adjust indent values for effect!
Most programs have an automatic half-inch
indent pre-programmed as the default value.
Don’t accept defaults so easily, though.
Narrow column widths need narrow indents,
while wider columns need wider indents.
But feel free to use reverse indents on
occasion, also, as I’ve done here.
• Always use hanging indents on bulleted text
so that sections align accordingly.
Borders, rules, & dingbats...
❇ ❇ ❇ ❇ ❇ ❇ ❇
Borders, rules and
decorative dingbats
to offset text blocks
are great fun to use,
but exercise caution
so you don’t confuse
your message.
❇ ❇ ❇ ❇ ❇ ❇ ❇
Clip art and more clip art...
Yes, clip art is a wonderful thing, in moderation, and if it is of good quality. But be careful not to overload, or your message will get lost in there somewhere.
Above all...
• Have fun
• Find your “ah”
• Try something new each
week
• Learn from the past, go
forward with the future