1 / 42

Web Typography

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?

Audrey
Download Presentation

Web Typography

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Typography Carol Schwalbe JMC 460 8.26.09

  2. 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.

  3. How observant are you? • How many sides are there on a standard wood pencil? • 6

  4. How observant are you? • In playing cards, which king has one eye?

  5. How observant are you? • What’s on the Cronkite School logo?

  6. How observant are you? • What symbol is part of the ASU logo?

  7. How observant are you? • What bird forms the NBC logo?

  8. Identify these logos

  9. Identify these logos too

  10. What’s a typeface? • A style of lettering, such as Helvetica, Futura,Comic Sans,Bodoni,Times,Papyrus, Apple Chancery,Sand, Lucida Handwriting

  11. What’s a type family? A group of similar typefaces

  12. What’s a font? • A complete set of characters (A-Z, plus numbers, symbols) of one specific size, style and weight of a typeface

  13. 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)

  14. What’s a counter? • Empty spaces in letters, such as b, o, p and g

  15. Anatomy of type

  16. 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.

  17. 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).

  18. 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.

  19. Relative sizes of type

  20. What’s reverse type? • Reverse type is white or light type on black or a dark background.

  21. What’s outline type? • Outline type is white type outlined in a color.

  22. Other type terms • ALL UPPERCASE TYPE IS HARD TO READ WHEN THERE’S LOTS OF IT (same as ALL CAPS) • Boldface (darker type)

  23. 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.

  24. 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

  25. Which alignment is this? • Justified • Flush left/ragged right • Flush right/ragged left • Centered

  26. Is centered text strong or weak?

  27. What’s the advantage of FL/RR?

  28. When would you use FR/RL?

  29. 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.

  30. 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)

  31. 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).

  32. Characteristics of different faces

  33. Characteristics of different faces

  34. 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

  35. 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.

  36. Most importantwords Echo of hornsEcho of horns Diagonal from top leftto lower right

  37. Most importantwords Echo of hornsEcho of horns Diagonal from top leftto lower right

  38. THE END

More Related