web typography l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web Typography PowerPoint Presentation
Download Presentation
Web Typography

Loading in 2 Seconds...

play fullscreen
1 / 42

Web Typography - PowerPoint PPT Presentation


  • 269 Views
  • Uploaded on

Web Typography Carol Schwalbe JMC 460 8.26.09 Keep your eyes open! Start noticing typography. Look at logos on everyday household items, bus signs, cereal boxes . . . everywhere, especially in ads. Look at type treatments in print and on the Web. How observant are you?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Typography' - Audrey


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web typography

Web Typography

Carol Schwalbe

JMC 460

8.26.09

keep your eyes open
Keep your eyes open!
  • Start noticing typography.
  • Look at logos on everyday household items, bus signs, cereal boxes . . . everywhere, especially in ads.
  • Look at type treatments in print and on the Web.
how observant are you
How observant are you?
  • How many sides are there on a standard wood pencil?
  • 6
how observant are you4
How observant are you?
  • In playing cards, which king has one eye?
how observant are you5
How observant are you?
  • What’s on the Cronkite School logo?
how observant are you6
How observant are you?
  • What symbol is part of the ASU logo?
how observant are you7
How observant are you?
  • What bird forms the NBC logo?
what s a typeface
What’s a typeface?
  • A style of lettering, such as Helvetica, Futura,Comic Sans,Bodoni,Times,Papyrus, Apple Chancery,Sand, Lucida Handwriting
what s a type family
What’s a type family?

A group of similar typefaces

what s a font
What’s a font?
  • A complete set of characters (A-Z, plus numbers, symbols) of one specific size, style and weight of a typeface
what s an ascender
What’s an ascender?
  • Part of a letter that extends above the body (b, d, h, k, etc.)
  • What’s a descender?
  • Part of a letter that drops below the body (on g, p, y)
what s a counter
What’s a counter?
  • Empty spaces in letters, such as b, o, p and g
what are 2 ways to classify type
What are 2 ways to classify type?
  • By styleType can be serif (that means it has tiny strokes at the tips of each letter) OR sans serif (no tiny strokes).
  • By sizeType is measured in points. There are 72 points in an inch.
what s the difference between body type and display type
What’s the difference between body type and display type?
  • Body type is used for the text or “body” of articles (generally 10 to 12 points online).
  • Display type is larger than body type (headings, subheadings).
what s the x height
What’s the x-height?
  • The height of a lowercase x
  • Fonts with tall x-heights look bigger (this is 32-point Arial) than those with short x-heights (this is 32-point Times), even when they’re the same point size.
what s reverse type
What’s reverse type?
  • Reverse type is white or light type on black or a dark background.
what s outline type
What’s outline type?
  • Outline type is white type outlined in a color.
other type terms
Other type terms
  • ALL UPPERCASE TYPE IS HARD TO READ WHEN THERE’S LOTS OF IT (same as ALL CAPS)
  • Boldface (darker type)
what is leading
What is leading?
  • Vertical space between two lines of type. Measured in points. “Normal” leading is slightly larger than type size. For example, 12-point leading for 10-point type.
  • The leading between these lines is loose.

The leading between these lines is loose.

  • The leading between these lines is tight.The leading between these lines is tight.
what is tracking
What is tracking?
  • The overall spacing among all letters in a given block of typel o o s e: P H O E N I X N E W S tight: TEMPE NEWS
        • looser tracking = older audience
        • tighter tracking = Wired audience
  • What is kerning?

Space between a pair of letters

T EMPE N EW S

which alignment is this
Which alignment is this?
  • Justified
  • Flush left/ragged right
  • Flush right/ragged left
  • Centered
two web fonts
Two Web fonts
  • Renowned type designer Matthew Carter took two years to design two screen-based font families: Verdana and Georgia.
  • The space between characters is much looser, making it easier to scan quickly on a computer screen.
print vs web fonts
Print vs. Web fonts
  • Do you prefer to read Verdana online? (26)
  • Do you prefer to read Arial online? (26 point)
  • Do you prefer to read Georgia online? (26 point)
  • Do you prefer to read Times online? (26 point)
web typefaces
Web typefaces
  • IMPORTANT! Sans serif typefaces are generally easier to read online, but this could change as screen resolutions improve.
  • Serif is easier for dyslexic people to read.
  • Sans serif is easier to read if type is small, such as the text of a print story.
  • Rule of thumb: Use sans serif for body type (text).
  • Use Georgia or another serif face for display type (titles, subheads, pull quotes, other big type).
slide35

Blurry to suggest unfulfilled,still looking, still seeking

"Perfect Balance" is symmetrical;

suggests elegance and harmony

Gray is between black and white;

suggests simplicity

Light, feather-like

Bold, contoured, steel-like

slide37

No two lines are the same,

yet the whole looks balanced

Top left is balancedby bottom right

ALL CAPS

Everything in themiddle is centered

Red in last line fades so it doesn’t overshadow.Red contrasts with black. Rose played for the Reds.

slide39

Most importantwords

Echo of hornsEcho of horns

Diagonal from top leftto lower right

slide40

Most importantwords

Echo of hornsEcho of horns

Diagonal from top leftto lower right