Principles of Typography. Fonts Different fonts send a different message to the reader: –Sans...
-
Upload
hugh-palmer -
Category
Documents
-
view
254 -
download
0
Transcript of Principles of Typography. Fonts Different fonts send a different message to the reader: –Sans...
Principles of Principles of TypographyTypography
FontsFonts• Different fonts
send a different message to the reader:– Sans serif– Serif– Script– Decorative–
Sans-serif FontsSans-serif Fonts
• Easy to read, especially online
• Modern and clean• Good for websites or
other online formats• Good for headings in
printed texts• Examples include:
– Arial– Comic Sans MS– Century Gothic– News Gothic MT
Serif FontsSerif Fonts
• Easier to read in print• More old-fashioned or
traditional• Best for the body text
in print documents• Examples include:
– Times New Roman– Book Antiqua– Courier New– Garamond
Script FontsScript Fonts• Hard to read - use
sparingly!• Traditional and
flowery – often used on wedding invitations or menus
• Examples include:– French Script MT– Pristina– Lucida Calligraphy
Decorative Fonts (also Decorative Fonts (also Display)Display)
• Hard to read – use sparingly
• Good for headings• Create a fun, funky
mood• Examples include:
– BeesKnees – Curlz MT– Harlow Solid Italic– Jokerman
Grunge FontsGrunge Fonts• Deteriorated fonts• Designed to
appear “beaten up” with parts of the characters missing or misshapen
Dingbat FontsDingbat Fonts• Symbol sets in
fonts• Often used for
bullets or for accents
• Examples include:– Wingdings– Webdings
Type CheckupType Checkup• Which is serif and which is sans
serif?
Serifs
Type CheckupType Checkup• Which is script and which is decorative?
Text TermsText Terms
• Kerning– The distance between letters– a.k.a Tracking
Text TermsText Terms• Leading
– The Distance between lines– Named for the lead used to separate lines of type in
early printing presses.
This is my first Line of Text
This is my Second
A thirdAnd Finally a fourthAnother?
Text TermsText Terms• Text Styles• Some common styles that can be applied to text:
Bold
Italic
Underlined
Shadow
EmbossedEmbossed
Text TermsText Terms
• Font Size– Measured in points– 72 points = 1’’
12-Point
24-Point36-Point
48-Point
DisplayAscender
Descender
Text TermsText Terms• Alignment
Left Aligned
Right Aligned
Center Aligned
Justified words in a paragraph are shown in these two short sentences. See how they
line up at the left and right?
Text TermsText Terms• Reverse text• Common style used
because white on a dark background is quite striking
• Adds impact and emphasis to words
Mixing FontsMixing Fonts• If you want to use
more than one font in a document, make sure they come from two different font families
• In the improved business card, a sans-serif font is combined with a serif-font for better contrast
Rupert BuchananWidget Enterprises
1569 Stone RoadToulouse, PQ(800) 325-2532
Rupert BuchananWidget Enterprises
1569 Stone RoadToulouse, PQ(800) 325-2532
Type contrasts Type contrasts • There are six different ways of
contrasting fonts:– Size– Weight– Structure– Direction– Color
Type contrast - sizeType contrast - size• You can contrast
any two fonts by making them two different sizes, but make them very different
• i.e. 12 pt. versus 14 pt. isn’t enough
SchnobblecasterIncorporated
SchnobblecasterI N C O R P O R A T E D
Type contrast - weightType contrast - weight• You can also achieve
contrast by varying the thickness of type strokes
• i.e. regular, bold, extra bold, and light
• This can be an effective way of organizing information (i.e. use it for headers)
Carmichael Foods
Asparagus Tips
Carmichael Foods
Asparagus Tips
Type contrast - structureType contrast - structure• Make sure you pick fonts from two
different families with different structures
• i.e. one serif and one sans serif, one decorative and one sans serif, etc.
• For printed documents, the body text is normally a serif, while the headings are usually sans serif.
Structure - continuedStructure - continued• The examples on
this page look bad because they each combine two fonts from the same family
Some of thisAnd some of that
Some of thisAnd some of that
Some of thisAnd some of that
Some of thisAnd some of that
Structure - continuedStructure - continued• By switching the
fonts around, we can get some decent looking examples of type contrast
Some of this
And some of that
Some of this
And some of that
Some of this
And some of that
Some of this
And some of that
Type contrast - DirectionType contrast - Direction• You can create some
interesting effects by varying horizontal and vertical lines of type
• You should have a good reason for doing this, though. In general, don’t make people read stuff sideways or on an angle.
Experienceteaches
you to
recognize
a mistake—
when
you’ve
made it
again.
Type contrast - colorType contrast - color• Warm colors tend to
come forward and command attention
• Cool colors tend to recede from our eyes
• You need more of a cool color to create effective contrast than you would need of a warm color
CunninghamState College
CunninghamState College
Type contrast – black & Type contrast – black & whitewhite
• Varying the typeface you use can add “color” to a page, even if it’s still black.
• Differences in the weight, structure, space inside letters, space between letters, size of type, and so on can create “color” contrast.
TypographyIf you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it. If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it.
Type contrast – black & Type contrast – black & whitewhite
• Each font has a different density, so some look darker than others.
• Each of these examples is in Arial, but each has a different “color” or shade of grey.
• Differences in the weight, structure, space inside letters, space between letters, size of type, also create “color” contrast.
If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it.
If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it.
If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it.
Typography Do’s and Don’tsTypography Do’s and Don’ts• don't mix more than three type styles in
one page • use sans serif in titles and serif in body
text • use italics sparingly • create contrast • don't use display fonts or too many colors
in body copy • don't forget that typography is supposed
to make the text easier to read
Combining contrastsCombining contrasts• Most effective layouts take advantage of
more than one type of contrast. • Look through magazines for examples
and ideas. • Try to verbalize what you see in a good or
bad example. You should also be able to provide a rationale for any design decision you make (not just “it looked better”).
Critiquing designsCritiquing designs• Try do identify the problem. How effective
is the contrast in weight? Size? Structure? • Try to name the differences, not
similarities. Are two font faces competing with each other because they are both all caps? Because they are both sans serif?
• Focus on conflicts. Is the larger type a light weight, and the smaller one a bold weight, so that they fight with each other for emphasis?
Contrast or conflict? Contrast or conflict?
HALLOWEEN
THRILLERextremely good
DOG FOOD
MY MOTHERThis is an essay on why my Mom will always be the greatest mother in the world.
FUNNY FARMHealth Insurance
let’s DANCE tonight