The document defines key typography terms and concepts including: - Typeface vs font - a typeface is a design, a font is a digital/physical implementation. - Serif vs sans serif fonts - serif fonts have small lines on letter ends, sans serif do not. - Font styles like bold, italic, and font effects like drop shadows or gradients. - Anatomy of letters including baselines, x-heights, and character spacing techniques. - Guidelines for using type effectively in design like limiting colors and typefaces.

1. Text
“The visual representation of intellectual thought as
expressed through a human language system.”

2. Type
A character or
letterform created for
the purpose of
communicating written
information through
printing or electronic
means.
(Costello, ch. 8)

3. Letterform
A letter’s shape.
Implies letters, but it
also applies to other
characters, such as
punctuation, symbols,
and numbers.
(Costello, ch. 8)

4. Typography
The art of designing and
arranging type.
(Costello, ch. 8)

5. Typeface vs. Font
A typeface is a particular style of type,
such as Times New Roman, where the
entire type conforms to the same design
specifications.
A font is the digital or physical means of
creating or displaying that typeface in a
particular style and size. For example,
Times New Roman 12pt bold.
(Costello, ch. 8)

6. Anatomy of a Typeface
Baseline - invisible line all the
characters sit on.
Meanline - the height of most
lowercase characters within a
typeface.
Cap height - distance between
baseline and the top of
uppercase letters.
X-height - distance between
baseline and meanline.
(Costello, ch. 8)

7. Font Family
A collection of related
fonts—all the bolds,
italics, and so forth, in
their varied sizes.
(Costello, ch. 8)

8. Legibility vs. Readability
Legibility is the ease with
which you can distinguish
and identify letters,
numbers, and symbols.
Readability is the ease with
which you can read text in
context, not as isolated
letters.
(Costello, ch. 8)

9. Characteristics that Define Typefaces

10. Characteristics that Define Typefaces
Stroke: can move vertically,
horizontally, diagonally, or
in a curved direction.
Contrast: difference
between the thick and thin
strokes
Stress: the location or angle
of a transition from thick to
thin or vice versa
(Costello, ch. 8)

11. Font Size
The point system is the most common
method for measuring type.
A point is a unit of measurement used to
define the height of a typeface.
There are approximate 72 points in one inch,
so the letters of a 72 point font are
approximately 1-inch tall.
(Costello, ch. 8)

12. Weight
Weight is the thickness of the
character outlines relative
to their height.
Bold typefaces (also known
as boldface) increase the
width of the stroke and the
visual weight of the regular
roman letterform.
Light typefaces have small
stroke widths.
(Costello, ch. 8)

13. Proportional vs.
Monospaced
In proportional typefaces,
the space a character takes
up is dependent on the
natural width of that
character.
In monospace typefaces
each character takes up the
same amount of space.
(Costello, ch. 8)

14. Serif vs. Sans Serif
Serifs are small marks located on
the ends of a main character
stroke
Serif typefaces contain serifs,
while Sans Serif typefaces do
not.
Serif typefaces are typically used
for print and sans serif for
electronic media.
(Costello, ch. 8)

15. Typefaces

16. Serif Typefaces
Industry standard for body copy that’s printed in books,
magazines, and newspapers.
Digital technology can have trouble displaying serifs, so
unless you’re using a serif typeface designed for the
digital display, such as Georgia, you’re usually better off
relying on serif typefaces for large headings or for print
media.
(Costello, ch. 8)

17. Sans Serif Typefaces
Usually have uniform strokes with little to no contrast
and a vertical stress in rounded strokes.
Ideal for text headings and titles in print and for use in
electronic media.
Often the best choice when designing body copy for the
Web or other channels of electronic distribution.
(Costello, ch. 8)

18. Decorative
Typefaces
Connote a sense of mood,
emotion, or attitude.
Characterized by unusual
features intended to add
splash and pizzazz to a
design.
Should be used in
moderation.
(Costello, ch. 8)

19. Script Typefaces
Attempt to emulate the
cursive style of
handwriting or calligraphy.
Popular in wedding
invitations and certificates
of achievement.
Generally have a weak
appearance when
rendered out to electronic
displays.
(Costello, ch. 8)

20. Symbol Typefaces
Popular because they
include many ornamental
characters not found
elsewhere.
However, they will not
blend as naturally when
mixed with another
typeface.
(Costello, ch. 8)

21. Font Styles

22. Font Styles Overview
Most font families include the four basic styles of roman
(upright), bold, italic, and bold italic.
Font styles usually look better when they are true font
styles rather than faux font styles (computer-generated
effects that simulate bold and italics).
(Costello, ch. 8)

23. Bold and Italicized Font
Italics can be a subtle, effective, and elegant way to
emphasize text.
Be careful about italics for digital media: they can be
difficult to read.
Boldface type is used to add emphasis to selected words
in body text and headings and should be used sparingly
within a design.
(Costello, ch. 8)

24. Condensed vs
Expanded Font
Condensed typefaces
appear tall and thin, while
expanded typefaces look
somewhat short and fat.
(Costello, ch. 8)

25. CAPS
Small caps are not as
visually overwhelming as
true uppercase letters.
Using small caps instead of
all caps helps keep regular
portions of narrative text
from being unintentionally
overemphasized.
(Costello, ch. 8)

26. Underlining & Strikethrough
Underlining applies a line with the same color as the font
to the baseline of selected text.
Web underlining text is a common and standard way of
identifying hyperlinks.
Strikethrough adds a line through the horizontal center
of type.
(Costello, ch. 8)

27. Superscript &
Subscript
Superscript characters
have a smaller point size
than the surrounding text
and are shifted upward
above the baseline.
Subscript characters also
have a smaller point size,
but are shifted downward
below the baseline.
(Costello, ch. 8)

28. Using Color with Fonts
Pick a contrasting shade that stands out from the
background.
Dark type on a light background is generally easier for
people to read than light-colored type on a dark
background.
(Costello, ch. 8)

29. Special Effects

30. Color Gradients &
Pattern Fills
In addition to a single
color, type can also be
filled with a gradient of
colors, a pattern texture, or
an image.
(Costello, ch. 8)

31. Warping
Text can be arched,
inflated, squeezed,
twisted, and manipulated a
number of other ways to
create a variety of text-
based shapes.
(Costello, ch. 8)

32. Drop shadows
When applied to text, a
drop shadow gives the
illusion that words are
floating above the
background.
The more pronounced the
drop shadow is, the greater
the distance will appear
between the text and the
background.
(Costello, ch. 8)

33. Stroke
A colored outline that’s
placed around the exposed
edges of type.
An inside stroke cuts into
the fill area of type, while
an outside stroke expands
outward toward the
background. A center
stroke expands it in both
directions at once.
(Costello, ch. 8)

34. Bevel vs Emboss
Beveling rounds off the
edges of type, giving it the
sculpted, graceful look of a
raised letterhead, making it
appear three-dimensional.
Embossing produces the
opposite effect, making
type appear stamped or
pressed into the
background.
(Costello, ch. 8)

35. Inner and Outer
Glow
An inner glow applies
colored shading to the
inside edge of type to add
internal depth or highlights
to the fill area.
Outer glow creates a halo
effect around the outside
of type to improve
contrast and background
separation.
(Costello, ch. 8)

36. Character and Line Spacing

37. Kerning vs. Tracking
Kerning varies the amount
of space between a single
pair of letters.
Tacking uniformly adjusts
letter spacing across a
range of text.
Can improve readability of
text by eliminating
distracting white space in a
text design.
(Costello, ch. 8)

38. Leading (leh-ding)
Leading is used to define
the amount of space
between vertically
adjacent lines of text.
When lines are spaced too
closely together or too far
apart, readers have trouble
advancing their eyes to the
next line, and readability
diminishes.
(Costello, ch. 8)

39. Alignment &
Justification
Refer to lining up objects
or text uniformly along
their tops, bottoms, sides,
or middles.
(Costello, ch. 8)

40. Design Tips
● Limit up to three colors, which should harmonize to
each other and with the color of the paper and the
dominant color(s) of the photo or graphics
● Limit to two typefaces on a single page, which should
"match"
● Limit up to three fonts and sizes
● Avoid underlining
(Costello, ch. 8)