1. TYPOGRAPHY

2. Typography  Typography is the art of creating and setting type with the purpose of honoring the text it sets.  Typography exists  to honor the content it sets  to enhance legibility and  embody the character of the words within.

3. Typography  Principles of durable typography:  legibility  some earned or unearned interest that gives its living energy to the page. Robert Bringhurst The Elements of Typographic Style

4. Typography  Typography exists to bring order to information by dividing and organizing.  It aids readers in finding what they are looking for.

5. RESET STYLES WITH CSS

6. Reset  All the browsers have their own default styling for various (X)HTML elements.  Makes it difficult for cross-browser consistency.  You should Reset everything.  YahooReset.CSS  Eric Meyer Reset : meyerweb.com/eric/tools/css/reset/ meyerweb.com/eric/tools/css/reset/  http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

7. Font sizing  Sizing in pixels is absolute while sizing in ems or percentages are an example of relative terms.

8. Font sizing |Relative | Use em  EM is relative unit best to be thought of as a box.  It is relative to the point size of a specific font (1 em in typical browser is 16 point).  (Sizing with EM Example | EM Box *)Sizing with EM Example

9. Font sizing | Relative | Size of the em  Size of the em square does not define the size of individual characters within a font. Most fonts have characters that are either larger or smaller than an em (in height or width).  Size of type refers to the size of the em square, not the size of individual characters.

10. Font sizing | Relative  Relative font sizes are relative to browser default font size (usually16 pixels) or to the parent element. p { font-size: 80%; } blockquote { font-size: 80%; }  If browser base font is 16px, 80% of 16px is 12.8px, so p and blockquote are same.  However, if p element is inside the blockquote, 80% of 12.8px is 10.42px. (Relative Sizing Example(Relative Sizing Example| Blockquote and P *)

11. Font sizing | Relative | 62.5%  Richard Rutter wrote article outlining a trick to making EM sizing calculations simpler: See: http://www.alistapart.com/articles/howtosizetextincss/ http://www.clagnut.com/blog/348/

12. Font sizing |62.5%  Browsers’ common default font size is 16px.  Set the body font size to be 62.5%, resetting the default value to 10px.  From here on, using ems is much easier:  12px in ems is 1.2em  8px is 0.8em.  This only works for direct child elements of the body; nested elements will be relative to their parents. (Work on Example *)

13. Absolute font sizes  Specified by designer, done in pixels.  Overrides any preference for larger or smaller type a user may want. p { font-size: 14px; } blockquote { font-size: 14px; }  Both paragraphs and blockquote will be 14px even when a child of another element.  No inheritance.  Simpler than figuring out math of relative font sizing.

14. Absolute font sizes Downsides  Takes control away from user.  Accessibility issues if user needs larger text to accommodate for poor vision.

15. Font sizing | Relative |Absolute When to use Relative versus Absolute  Consider target audience, your design, your resources.  Relatively sizing will likely take more time.  Sites with target users who have poor vision use relative.  Situations where abnormally small text has been used for stylistic reasons and you want to make sure someone can resize text to read it - use relative. Jeff Croft, 2008

16. STICK IT TO A SCALE

17. Stick it to a scale  Stick it to a scale  Use a scale when setting type.  Find what suits you best for a given project and stick to it.

18. Stick it to a scale  Don’t compose without a scale  “In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. [...] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.” Source: http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/

19. Stick it to a scale  Traditionally-set type is composed to a scale.  Above sizes are the classic typographic scale.  Relationships between different sizes of type within a composition is meaningful.  Create a scale thoughtfully and then stick to it. Jeff Croft, 2008

20. Stick it to a scale  For text which is to be printed, the font-size property can and should be used to set in text in points, for example: p { font-size:12pt }

21. Stick it to a scale  Body of a web page has 16 px text by default.  Set paragraphs to 12 px would require setting paragraphs at 0.75em. p { font-size:0.75em; /* 16x0.75=12 */ }

22. Stick it to a scale  The traditional scale: body { font-size:100%; } h1 { font-size:2.25em; /* 16x2.25=36 */ } h2 { font-size:1.5em; /* 16x1.5=24 */ } h3 { font-size:1.125em; /* 16x1.125=18 */ } h4 { font-size:0.875em; /* 16x0.875=14 */ } p { font-size:0.75em; /* 16x0.75=12 */ } (Scale Example(Scale Example 1*)

23. Stick it to a scale body {font: 1em/1.5em "Lucida Grande“;} h1, h2, h3, h4, h5, h6 {font-family: helvetica, arial, verdana, sans-serif;font- weight: normal;} h1 {font-size: 218%;} h2 {font-size: 164%;} h3 {font-size: 145%;} h4 {font-size: 118%;} (Scale Example 2)

24. Stick it to a scale

26. SELECT A GOOD MEASURE

27. Select a good measure  Measure - length of a single line.  Measure is a key element of readability.  Set with width property.  Best to use ems or percentages to set the width of blocks of text, units are directly proportional to the size of type.

28. Select a good measure  min-width and max-width properties are very helpful in ensuring a readable measure length, even when text is within larger elements.

29. Select a good measure | Length  For optimal readability,  a measure of 45-75 characters in length is recommended  Between 30 and 50 ems can be seen as an ideal line length. (Scale Example)

30. LEADING

31. Leading  Space between lines of type.  Comes from traditional letterpress-style typesetting, where strips of lead are used to separate one line of text from the next.  Establishing appropriate leading is one of the fastest ways to make your site look professional.

32. Leading rules of thumb  Blocks of type typically need positive leading.  Blocks of type do not read well with no leading.  Short elements of type (e.g., headers) need less leading.  Darker (heavier) type needs more leading than lighter type.  Sans serif type needs more leading than serif.  Longer line-lengths need more leading.  Shorter line-lengths require less leading. Jeff Croft, 2008

33. COLOR

34. Shades of gray  For legibility contrast must exist between the background and foreground colors.  Computer screens have much greater black/white contrast than typical printed page.  As a result, many web designers prefer off-black to pure black on white backgrounds.  Elegant to use very light gray instead of pure white on black backgrounds. Show Examples 1 - 4

35. Shades of gray Make all visual distinctions as subtle as possible, but still clear and effective. Edward Tufte Visual Explanations

36. Grids  Bring order to page and help specify where things should go and their flow.  Use “gutters” (margins between columns) to separate your columns  http://960.gs/ http://960.gs/  http://developer.yahoo.com/yui/examples/ http://developer.yahoo.com/yui/examples/ Show Grid Examples

37. Additional items  Set body in a serif and headings in a san serif or visa-versa - add to visual appeal  Set abbr and acronym elements in small caps (using the font-variant property)  Mark new paragraphs with indents, outdents, or other ornaments, drop cap and/or headers. Simon Pascal Klein, Beautiful Web Typography

38. Additional items  Generally use flush-left (text-align: left;) for running text, particularly with narrow measure.  Justification can work at ample measures and better with serif typefaces.  Use high-contrasting link colors Simon Pascal Klein, Beautiful Web Typography

39. Resources  http://webtypography.net http://webtypography.net  http://alistapart.com/topics/design/typography http://alistapart.com/topics/design/typography  http://ilovetypography.com http://ilovetypography.com  http://cameronmoll.com http://cameronmoll.com  http://jeffcroft.com http://jeffcroft.com  http://markboulton.co.uk http://markboulton.co.uk  http://zeldman.com http://zeldman.com  http://960.gs/ http://960.gs/  http://developer.yahoo.com/yui/examples/ http://developer.yahoo.com/yui/examples/