Scribd
Upload
960 views25 pages

Typography

This document discusses typography and font design. It defines key terms like typefaces, fonts, font families, font styles, and font properties. It explains the four main categories of typefaces - serif, sans serif, script, and decorative. It discusses how to properly use different typefaces and manage font properties like leading, kerning, and tracking to make text easy to read. Web developers must consider typography to achieve consistent designs across browsers. Helpful resources for learning about typography include websites like Dafont, Hackdesign, and typography lessons on YouTube.

Uploaded by

api-264479275
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
960 views25 pages

Typography

This document discusses typography and font design. It defines key terms like typefaces, fonts, font families, font styles, and font properties. It explains the four main categories of typefaces - serif, sans serif, script, and decorative. It discusses how to properly use different typefaces and manage font properties like leading, kerning, and tracking to make text easy to read. Web developers must consider typography to achieve consistent designs across browsers. Helpful resources for learning about typography include websites like Dafont, Hackdesign, and typography lessons on YouTube.

Uploaded by

api-264479275
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Typography

Investigate typefaces and fonts.


The Target Audience
• Publications are created to convey a
message to the intended audience,
called the target audience.
• The target audience will determine the:
– Language used.
– Typefaces used.
– Colors used.
– Graphics used.
Typography
• Many publications will contain a
large amount of text to deliver the
message.

• Typography refers to the style and


arrangement or appearance of text.
Typefaces, Fonts, and
Font Families
• A typeface is the basic design of a character.
• Each typeface has a design for each letter of
the alphabet, numbers, punctuation symbols
and may contain other symbols.
• Example:

Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!@#$%^&*()_+-=?,.:”’;
• Click here for more examples of typefaces.
Typeface Categories
• Typefaces can be divided into four
main categories.
– Serif
– Sans Serif
– Script
– Decorative or Ornamental
Serif Typefaces
• Have attributes or strokes at the tips of
the letters called serifs.
• Examples:
 Bodoni
 Goudy
 Courier
 Times New Roman
k
• Used for body text in printed publications.
 Business correspondence  Book text
 Magazine article text  Newspaper text
 Recommended sizes for body text are 10 to
12 points.
Sans Serif Typefaces
There are no attributes (serifs) at the tips
of the letters.

• Examples:
• Arial
• Berlin Sans
 Gill Sans
 Verdana
k
• Used for very large or very small text
and for digital display.
• Web pages  On-screen display
• Headings  Tables
• Captions  Headlines
Ornamental or Decorative
Typefaces
• Designed strictly to catch the eye
• Should be used sparingly.
• Can be hard to read.

• Examples
• Chiller  Broadway
• Webdings  engravers MT

• Used for decoration.


• Headlines on flyers or advertisements.
• Webdings can be used for symbols in
logos.
Script Typefaces
• Appear to have been written by hand
with a calligraphy pen or brush
– Should never be used to key in all caps.
• Example
• French Script
• Uses
• Formal Invitations
• Place cards
• Poetry
• Announcements
Fonts
• It’s easier to understand fonts if you begin with
the original definition of a font.

• Before desktop publishing, people called


‘typesetters’ set the type by hand using
moveable type.

• Each character was a separate block of metal.

• The letters were “set” on the layout to form the


text.
• Each typeface had a complete set of metal
characters for each size, weight, etc.
• Click here for an image on Wikipedia
Fonts Continued
• Each different size or weight required a
completely separate set of metal characters.

• So a font is the specific size, weight and style


applied to a typeface.

• Examples: Arial, bold, 12 point


Arial, italic, 14 point
Arial, 10 point
Font Style
• The font style refers to the slant, weight
and special effects applied to the text.
• Examples:
– Bold
– Italic
– Underline
– Shadow
– Outline
– Small Caps
Font Families
• A font family is the different sizes,
weights and variations of a typeface.
• Examples: Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
Typeface Spacing
• Monospace
• Proportional
• Leading
• Kerning
• Tracking
Monospaced Typefaces
• Each letter takes up the same amount of
space regardless of the letter size.
• Advantages
– Easier to see thin punctuation marks.
– Similar characters look more different.
– If limited to a certain number of characters
per line, each line will look alike.
• Used often in computer programming
and biology

Courier is monospaced
Proportional Typefaces
• Proportional
– The amount of space each character takes
up is adjusted to the width of that character.
– Therefore, an i is not as wide as an m and
receives less space.
• Advantages
– Does not take up as much space as
monospaced typefaces.
– Easier to read.
• Used in most documents and
publications.
Times New Roman is proportional
Leading
• The vertical spacing between lines of
text.
• Pronounced “led-ding.”
• In most software programs, it is referred
to as line spacing.
• In Desktop Publishing, it is still referred
to as leading because typesetters used
long pieces of lead between the
moveable type to create blank lines
between the text.
Leading Continued
• If there were no space between the lines
of text, the letters would touch the lines
above and below them and would be
extremely difficult to read.
• Used to:
– Slightly increase or decrease the length of a
column of text so that it is even with an
adjacent column.
– To make a block of text fit in a space that is
larger or smaller than the text block.
Kerning

• Horizontal spacing between pairs of


letters
• Used to add or subtract space between
pairs of letters to create a more visually
appealing and readable text.
• BOOK – before kerning.

– after kerning the O’s.


Tracking

• Horizontal spacing between all of


characters in a large block of text.
• Makes a block of text seem more open
or more dense.
• Examples
Tracking Continued
• Makes a block of text more open and
airy or more dense.

• Used to expand or contract a block of


text for the purpose of aligning two
columns.
Typography & Web Design
• Web developers have to predict
how to achieve a specific look
across different browsers.
• Youtube – Typography Lesson
Helpful Sites
• Dafont.com
• Hackdesign.org
• Kerning game
• Shape Spacing
Assignment
• Turn in your worksheet to the first
block drawer.

• Log into My Big Campus


– Navigate to our class page & the
resource tab
– Open the Web Design Principles &
Elements folder.
– Open and complete the Web Design
Basics Term Chart document. Type
on the word document.

You might also like