Typography

1
Typography Web Use

• Michael Kun Yung Howard
• October 30, 2007
• CS 502 Individual Project

2
What is Typography?

• Typography is the art, techniques, and style of
  type design arranging type for an assortment of
  different mediums.
• Traditional typography, known as text is composed
  to create a readable, legible, coherent, and
  visually pleasing pieces, without distracting the
  reader.

3
Anatomy of Type
4
Different Styles of Type
5
Why is X-Height Important

• The x-height creates the impression of the
  fonts size.
• Most of what we see of a typeface, gives a
  typeface its visual impact.
• Can vary between different fonts

6
Typeface Categories (7)

• Oldstyle - Originally developed from the
  traditional hand-lettering form, following the
  way scribes held their pens and drew letters.
• Modern - Came about during the industrial
  revolution, reflects a strong emphasis on
  structure and form.
• Slab Serif - Created during the birth of the
  advertising industry, fattened up the entire
  letter-form.
• Sans Serif - These typefaces have absolutely no
  serifs, which make the typeface a little less
  readable.

7
Typefaces Categories (Continued)

• Grudge or Distressed - Also called fringe
  typefaces, are typically distorted,
  schizophrenic, deliberately trashed, often making
  it harder to read.
• Scripts - Emulate hand-lettering in many
  varieties such as black-letter (bibles written by
  scribes), calligraphy (wedding invitations),
  drafting (architects' drawing), cartoons, and
  etc.
• Decorative - These typefaces were created only
  for the use of giving a piece a decorative look.

8
Examples of Typefaces
9
Readability

• Readability refers to whether an extended amount
  of text is easy to read such as in articles,
  books, reports, and etc.
• Most readable text is the classic oldstyle serif
  faces because the serifs help the reader's eye go
  from one letter to the next.
• Want typefaces with moderate features and a lack
  of attention to them.

10
How to Improve Readability

• Never use all caps!
• Even and consistent letter spacing.
• Even and consistent word spacing.
• Average line lengths.
• Even and consistent line spacing.
• Know when to use extra bold or extra thin.

11
Legibility

• Legibility refers to whether a short burst of
  text is instantly recognizable such as in
  headlines, subheads, catalogs, listings, signs,
  and etc.
• Sans serif letter-forms are more instantly
  recognizable when there is a small amount of
  text.
• Want typefaces that are direct and clear to the
  reader, with no serifs.

12
How to Improve Legibility

• Sometimes having small x-heights can reduce
  legibility.
• If you want to increase legibility choose a
  typeface with an average x-height.
• Use of regular or medium weight.
• Use of lowercase letters and caps when they
  belong.
• More letter-spacing with small fonts, less
  letter-spacing for large fonts.

13
Punctuation Is Important

• Always use true quotation and apostrophe marks.
• Know when and where to use apostrophe and ditto
  marks.
• Always include the periods and commas inside
  quotation marks
• Semi-colons and colons belong outside of the
  quotation marks.
• Only include punctuation within parentheses if
  its a full sentence.

14
Hang That Punctuation

• Reasons Why to Hang . . .
• Keep clean and strong alignment or edge.
• Eliminates any awkward gaps that can be caused by
  punctuation.
• When To Hang . . .
• Type is set aside from the main body text.
• When set a large as in quotations, pull quotes,
  headlines, posters, and etc.
• When type is flush (left or right)
• Dont need to hang punctuation with small type.

15
Baseline Shift

• The baseline is an invisible line upon which all
  the characters sit.
• The term baseline shift refers to moving
  characters up or down in relation to that
  baseline.
• When To Shift the Baseline . . .
• Parentheses or hyphens.
• Dingbats as bullets.
• Initial caps.
• Decorative words.
• Corrections in Company names or Logos.

16
ExamplesHanging Baseline Shift
17
Kerning

• Kerning is the process of adjusting the space
  between individual letters the process of
  fine-tuning.
• End result is visually consistent letter spacing,
  which strengthens readability of the text.

• Types of Kerning . . .
• Kerning pairs.
• Auto kerning.
• Range kerning.
• Tracking.

18
Other Important Details

• Linespacing - the space between the lines of
  type.
• Leading - is measured in points, the amount of
  space after the type and before the next line of
  type.
• Paragraph Spacing - either indent or add space
  between paragraphs dont do both!
• Alignment - can play a vital part in the look and
  readability of your text. (left, center, right,
  justified)
• Consider those phrases, be conscious of your
  choices!

19
Headlines and Subheads

• Used to provide organization and visual contrast.
• Be aware the following
• Avoid using all caps or small caps.
• Watch the leading for multiple line heads.
• Be consistent, if flush left, flush everyone left
  as well.
• Always be more space above rather than below.
• Create a clear distinction between heads and
  subheads.
• Choose typefaces that create a strong contrast.
• Always remember that your purpose is to
  communicate!

20
Pull Quotes

• Pull quotes are intended to add some visual
  interest.
• Helpful Tips
• Include a wide outer margin.
• Include simple rules to set it apart.
• Colored or black boxes to show contrast.
• When using tall or narrow settings, make sure to
  give them plenty of extra space.
• Try using horizontal quotes that extend across
  several columns.

21
Pull Quotes In Action
22
Emphasizing Type

• Things to never do . . .
• Underline or use all caps.
• Things you can do . . .
• Italic or bold italic.
• Use different typefaces altogether.
• Use colors warm and cool colors.
• Add empty space.
• Use rules.
• Make either really big or really small,
  surrounded by lots of empty space.

23
Web-tastic Typography!

• Typography rules and terms are pretty much the
  same and still apply when it comes to use on the
  web.
• When creating type on the web designers use CSS.
  (Specify specific characteristics)

• font-type - font-weight
• font-size - font-style
• font-color - and etc.

• There are some problems though
• Cross-platform Issues

• Installed fonts.
• Systems display.

24

• Web Appropriate Type -
• Verdana (sans serif) - high legibility, improves
  when it gets smaller. (more content)
• Georgia (serif) - also very legible in large type
  size.
• Never use Times New Roman, was designed to look
  good in print not the web. (Default)
• Punctuation - remember to use the character
  entities!
• - lt (
• - gt ()
• Anti-aliased Type -

• Is a technique that uses computer graphics to
  optimizethe appearance
• of type on screen, smoothing out the edges by
  adding an additional
• intermediate colored pixels along the edges.
• Looks more pleasant and readable.

25

• Pixels and Grids
• Pixels are the individual dots that collectively
  make up what we see on the screen, they are in
  organized rows and columns that form a grid.
• Pixels are a fixed size, absolute, cannot be
  split or broken.
• Some fonts because of there design fit the grid
  more naturally than others. (specially designed)
• Size Matters
• Absolute Measurements in, cm, mm, pt, pc.
• Relative Measurements px, em, ex, . (rec. ems)
• Resolution Matters
• Should take into account when designing.
• Appearance of type - type set way too small may
  look blocky in a low resolution screen which
  becomes nearly impossible to read and is ugly.
• Blurred type - low resolution screens, very
  difficult to read.

26
Open Type and Expert Sets
If theres time left!

• Expert Sets
• Are additions to basic font sets, designed for
  when we want more and better choices.
• Is actually a collection of fonts in the same
  font family.
• Have the regular font, plus other variations.

• Open Type
• Based on Unicode.
• Fonts that can contain more than 65,000 glyphs.
• Can include entire character sets.
• Are cross-platformed.
• Are smart fonts.
• Eventually going to replace expert sets.

27
Different Ways In Making Type Beautiful(ex.
Small Caps)
If theres time left!
The example above is the use of small caps,
which can be found in open type and expert sets.

• Others are . . .
• Oldstyle Figures
• Display Type
• Many more . . .

28

• References
• The Non-Designer's Type Book by Robin Williams
  (Peachpit Press, 1998)
• Typography by Joe Gillespie (Webpage Design for
  Designers as of October 26, 2007)
• Web Typography by Ross Shannon (HTML Source HTML
  Tutorials as of October 26, 2007)
• Cross-platform Issues by Lynch and Horton (Web
  Style Guide 2nd Edition as of October 26, 2007)
• Type Graphics by Lynch and Horton (Web Style
  Guide 2nd Edition as of October 26, 2007)
• Web Design/HTML by Jennifer Kyrnin (About.com as
  of October 26, 2007)