10. Font Elements
• A font is a collection of characters and
symbols that share a common design.
• 3 main elements of the design:
• Typeface
• Style
• Size
11. Typeface
• specific characteristics
of characters & Tahoma
symbols in the font Verdana
Arial
• width of the thick Times New Roman
and thin strokes Comic Sans MS
• the presence or Various typefaces
absence of serifs
12. Style
Gill Sans Light
• weight and slant of a Gill Sans Regular
font Gill Sans Bold
Gill Sans Italic
Font Styles
13. Size
• an imprecise value
gM
determined by
measuring the distance
from the bottom of a
font size lowercase g to the top
of an adjacent
uppercase M (as shown)
14. Font Families
ascender line
vedy
serif
H
ascender
cap height
• a set of fonts
having common x height
baseline
stroke width and descender
descender line
serif
characteristics
Arial (regular)
Arial (bold)
Arial (regular italic)
Arial (bold italic)
Arial font family
15. Serif vs. Sans Serif
• A serif typeface contains
small horizontal lines at the
top and the bottom of each
character
• A sans serif typeface
does not have the lines (sans
means “without”)
16. FASHIONMONTHLY
Serif or Sans
January 20, 2006
Serif ???
• Based on the intended Adiam condimentum
Purus, in consecte-
use or delivery
tuer Proin in sapien.
Fusce urna mag-
na,neque eget lacus.
Maecenas felis nunc,
aliquam ac, conse-
quat vitae, feugiat at,
blandit vitae, euismod
method
vel.
Suspendisse feugiat mi sed lectus
aoreet nec interdum
• sans serif: used for By Trenz Pruca
Malesuada quis, egestas quis,
wisi. Donec ac sapien. Ut orci.
modo suscipit. Nam uut, massa.
Maecenas vitae ante et lacus
cidunt quis Malesuada quis, eg-
estas quis, wisi. Donec ac sapien.
headings
Duis ultricies, metus a feugiat aliquam hendrerit. Ut orci. Duis ultricies, metus a
porttitor, dolor mauris convallis Curabitur nunc eros, euis- feugiat porttitor, dolor mauris
est, quis mattis lacus ligula eu mod in, convallis at, vehicula sed convallis est, quis mattis lacus
augue. Sed facilisis. Morbi lorem consectetuer posuere, eros ligula eu augue. Sed facilisis.
mi, tristique vitae, sodales eget, mauris dignissim diam, pretium Morbi lorem mi, tristique vitae,
• serif: usually easier
hendrerit sed, erat lorem ipsum. sed pede suscipit: Adiam condi- sodales eget, hendrerit sed, erat..
Vestibulum eget purus vitae mentum purus, in consectetuer Vestibulum usce urna mag-
eros ornare adipiscing. Vivamus Proin in sapien. na,neque eget lacus. Maecenas
nec quam. Integer vestibulum Fusce urna magna,neque felis nunc, aliquam ac, consequat
malesuada libero. Sed vehicula eget lacus. Maecenas felis nunc, vitae, feugiat at, blandit vitae,
fermentum leo. In condimen- aliquam ac, consequat vitae, euismod vel, nunc. Aenean ut
to read in print
tum. Nullam wisi arcu, suscipit feugiat at, blandit vitae, euismod erat ut nibh commodo suscipit.
consectetuer. Vestibulum imper- vel, nunc. Aenean ut erat ut nibh Maecenas metus non quam.
diet nonummy sem. Vivamus sit commodo suscipit. Maecenas Nam uut, massa. Maecenas
amet erat nec turpis tempus con- metus non quam. vitae ante et lacus aliquam
sequat. Praesent malesuada. Cras erat. Aliquam pede. hendrerit. Aenean ut erat ut
Donec vitae dolor. Donec at vulputate eu, estmorbi tristique nibh commodo suscipit. Curabi-
lacus ac mi vehicula bibendum. senectus et netus et male. Ali- tur nunc eros, euismod in, con-
Donec feugiat tempor libero quam pede. Proin neque est, vallis at, vehicula sed consecte-
Aenean ut erat ut nibh com- sagittis at, semper vitae, tin- tuer posuere.
1
17. Purus, in consecte-
tuer Proin in sapien.
Fusce urna mag-
na,neque eget lacus.
FASHIONMONTHLY
Serif or Sans
Maecenas felis nunc,
aliquam ac, conse-
quat vitae, feugiat at,
blandit vitae, euismod
January 20, 2006
vel.
Serif ??? Suspendisse f
aoreet nec int
By Trenz Pruca
• Based on the intended Adiam condimentum
Purus, in consecte-
Malesuada quis, egestas quis,
wisi. Donec ac sapien. Ut orci.
Duis ultricies, metus a feugiat
mod
Ma
aliq
use or delivery
tuer Proin in sapien.
Fusce urna mag-
na,neque eget lacus.
Maecenas felis nunc,
aliquam ac, conse-
porttitor, dolor mauris convallis
quat vitae, feugiat at,
blandit vitae, euismod est, quis mattis lacus ligula eu mod
method
vel.
augue. Sed facilisis. Morbi lorem con
Suspendisse feugiat mi sed sodales eget, mi, tristique vitae, lectus mau
aoreet nec interdum sed, erat lorem ipsum. hendrerit sed
• sans serif: used for By Trenz Pruca
Malesuada quis, egestas quis,
wisi. Donec ac sapien. Ut orci.
Vestibulum eget purus vitae
modo suscipit. Nam uut, massa.adipiscing. Vivamus
eros ornare cidunt quis Malesuada quis, eg-
Maecenas vitae ante et lacus estas quis, wisi. Donec ac sapien.
Ut orci. vestibulum
aliquam nec quam. IntegerDuis ultricies, metus a
men
Pro
headings
Duis ultricies, metus a feugiat hendrerit.
porttitor, dolor mauris convallis Curabitur nunc eros, euis- feugiat porttitor, dolor mauris
est, quis mattis lacus ligula eu mod in, convallis at, vehicula sed convallisSed vehicula
malesuada libero. est, quis mattis lacus ege
augue. Sed facilisis. Morbi lorem consectetuer posuere, eros ligula eu augue. Sed facilisis.
mi, tristique vitae, sodales eget, mauris dignissim diam, pretiumleo. In condimen-
fermentum Morbi lorem mi, tristique vitae, aliq
• serif: usually easier
hendrerit sed, erat lorem ipsum. sed pede suscipit: Adiam condi- sodales eget, hendrerit sed, erat..
Vestibulum eget purus vitae mentum tum. consectetuer wisi arcu, suscipit
purus, in Nullam Vestibulum usce urna mag- feug
eros ornare adipiscing. Vivamus Proin in sapien. na,neque eget lacus. Maecenas
nec quam. Integer vestibulum consectetuer. Vestibulum imper-
Fusce urna magna,neque felis nunc, aliquam ac, consequat vel,
malesuada libero. Sed vehicula
fermentum leo. In condimen-
diet nonummy sem. Vivamus sit
eget lacus. Maecenas felis nunc,
aliquam ac, consequat vitae,
vitae, feugiat at, blandit vitae,
euismod vel, nunc. Aenean ut
com
to read in print amet ut erat ut nec Maecenas metus non quam.con-
erat nibh turpis tempus met
tum. Nullam wisi arcu, suscipit feugiat at, blandit vitae, euismod erat ut nibh commodo suscipit.
consectetuer. Vestibulum imper- vel, nunc. Aenean
sequat. PraesentNam uut, massa. Maecenas
diet nonummy sem. Vivamus sit commodo suscipit. Maecenas
amet erat nec turpis tempus con- metus non quam.
malesuada.
vitae ante et lacus aliquam
sequat. Praesent malesuada. CrasDonec vitae dolor. Donec at
erat. Aliquam pede. hendrerit. Aenean ut erat ut vulp
Donec vitae dolor. Donec at vulputate eu, estmorbi tristique nibh commodo suscipit. Curabi-
lacus ac mi vehicula bibendum. senectus lacus ac mi vehicula bibendum.
et netus et male. Ali- tur nunc eros, euismod in, con- sene
Donec feugiat tempor libero quam pede. Proin neque est, vallis at, vehicula sed consecte-
Aenean ut erat ut nibh com- Donec feugiattuer posuere. libero
sagittis at, semper vitae, tin- tempor qua
Aenean ut erat ut nibh com- sagi
1
22. Font Size
gM font size
• measured in points (pt)
•
•
1 pt = (1/72)”
from cap height to
descender
Sample Text (Arial)
• different fonts may
look smaller or larger,
Sample Text (Times) although the point size
Sample Text (Brush Script) is the same
Various typefaces with the same
point size
23. Font Size
Q ASCENT
DESCENT • Line spacing
adjustment is
Q
LINE SPACING important to the
clarity of a large body
of printed text.
24. Character Spacing
• The portion of space that
projects beyond the body of
the character is called the
kern.
• Proportional font
• the spacing between the
letters is adjusted
depending on the width of
each individual letter
25. Character Spacing
• Some fonts allow the
width of the character
itself to be adjusted.
• This adjustment is
called font metrics.
• it allows you to
expand or condense
the text.
26. Leading Space
(pronounced led-ing)
• Leading is the space between lines of text.
• Often called line spacing.
27. Leading Space
(pronounced led-ing)
• Leading is the space between lines of text.
• Often called line spacing.
Adjusting the
spacing between
lines.
28. Leading Space
(pronounced led-ing)
• Leading is the space between lines of text.
• Often called line spacing.
Adjusting the Adjusting the
spacing between spacing between
lines. lines.
29. Leading Space
(pronounced led-ing)
• Leading is the space between lines of text.
• Often called line spacing.
Adjusting the Adjusting the Adjusting the
spacing between spacing between
lines. spacing between
lines.
lines.
31. Raster Font
A raster font character is created by mapping
the individual bits that make up the character.
32. Vector Font
• A vector font is created by defining the
shape or outline geometrically using line
segments. (may be called scalable fonts)
• The character can be displayed at any size
and will retain its shape.
• The advantage: it can take advantage of high-
resolution output devices.
