1. TYPOGRAPHY

2. Typography  Type reset | Absolute versus Relative  Using a Scale  Measure  Line height  Examples 1 | 2 | 3 Examples23

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

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

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

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

7. RESET STYLES WITH CSS

8. Reset  All browsers have their own default styling for various HTML elements.  Can make cross-browser consistency difficult.  Some suggest resetting everything.  YahooReset.CSS YahooReset.CSS  Eric Meyer 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/

9. Font sizing: Absolute | Relative  Sizing in pixels is absolute while sizing in em or percentages are an example of relative terms.

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

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

12. 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 px).  1em is equal to the current font-size of the element in question. If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px.  By default 1em = 16px. Source: http://css-tricks.com/css-font-size/

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

14. (Sizing with EM Example | EM Box *)Sizing with EM Example

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

16. (Relative Sizing Example(Relative Sizing Example| Blockquote and P *)

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

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

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

20. STICK IT TO A SCALE

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

22. Stick it to a scale  Don’t compose without 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/

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

24. 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 */ }

25. 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*)

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

27. Stick it to a scale

29.  For text that 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 } {Example – setting print styles}Example

30. (Scale Example(Scale Example 1*)

31. SELECT A GOOD MEASURE

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

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

34. 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.  For single-column design 65 characters is considered ideal. (Scale Example)

35. Line Length  Good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally. Martin (2009) examined web sites and obtained:  line length (pixels) ÷ line height (pixels) = 27.8

36. Too Long: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Good: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Too short: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

37. LEADING

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

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

40. Leading  Sufficient line height makes the text ultimately more scannable.

41. Good: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Too little: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Too much: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

42. Leading  According to Carusone (2009), a good rule is to set the leading 2 to 5pt larger than the type size, depending on the typeface.

43. Measure | Line Height According to Martin (2009):  line height (pixels) ÷ body copy font size (pixels) should = to 1.48 or 1.5  line length (pixels) ÷ line height (pixels) should = to 27.8 1) Once you have decided on your body copy font size, multiplying this value by 1.5 will give you the optimal line height. E.G., 16px X 1.5px = 24px or 1.5em 2) Then multiply this new value by 27.8 to get your optimal line length: E.G., 24 X 27.8 = 667.2 or 42em  Layout will need gutters, margins and padding to let the body copy breathe.

44. VERTICAL RHYTHM

45. Vertical rhythm  On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors:  font size,  line height and  margin or padding.  All of these factors must calculated with care in order that the rhythm is maintained.

46. Line height  Basic unit of vertical space is line height.  Establish suitable line height that can be applied to all text on the page: heading, body copy or Asides  This is the key to a solid dependable vertical rhythm, which helps guide readers down the page.

47. Line height  For readability body text needs leading - spacing between the lines.  Shoot for 130-160% Leading

48. Set Line Height  Example: a 12px font size type (font-size: 75%)  a line-height of 1.5em  would give 6px spacing between the lines of body copy. 12 X 1.5 = 18  creates a total line height of 18px, which can be used as the basic unit. font-size: 12px; font-size: 75%; line-height 1.5em;

49. Set Line Height  150% of 12px = 6px  12px + 6px = 18px total line height  18px is 1.5em (or one and one-half) the size of the base font-size of 12px.

50. Spacing between paragraphs  With Line height unit set to 18px must ensure it is maintained throughout the document body.  A common place to lose the vertical rhythm is the gaps set between margins.

51. Spacing between paragraphs  Default treatment by web browsers of paragraphs is to insert a top- and bottom-margin of 1em.  In this example (12px) this results in a spacing between the paragraphs of 12px (not 18px) throwing text out of rhythm.

52. Spacing between paragraphs  If vertical rhythm of page is to be maintained:  spacing of paragraphs should be related to the basic line height unit.  achieved by setting top- and bottom-margins equal to the line height. font-size:1em; line-height:1.5em; margin-top: 1.5em; margin-bottom: 1.5em;

53. Reset  Browsers set margins on all block-level elements (headings, lists and blockquotes)  To ensure typographic attention is paid to all such elements, reset the margins at the beginning of styles. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { margin:0; padding:0; }

54. Variations in text size  When text size changes, as in headings, text size should be a multiple of the basic leading/line height.  In our example of 12px, every deviation from this basic text size should take up multiples of 18px.

55. Variations in text size  Example h2 set to 14px or 1.1667em based on 12px base font-size (see http://riddle.pl/emcalc/). http://riddle.pl/emcalc/  To ensure height of each line is 18px, the line-height should be set to  Line Height / font-size = LineHeight  18 ÷ 14 = 1.286.  Similarly the margins above and below the heading must be adjusted to fit.  To maintain rhythm, the top and bottom margins should be set at 1.286em so that the spacing is equal to the full 18px unit.

56. Variations in text size  Example h2 set to 14px or 1.1667em based on 12px base font-size (see http://riddle.pl/emcalc/). http://riddle.pl/emcalc/  To ensure height of each line is 18px, the line-height should be set to  Line Height / font-size = LineHeight  18 ÷ 14 = 1.286.  Similarly the margins above and below the heading must be adjusted to fit.  To maintain rhythm, the top and bottom margins should be set at 1.286em so that the spacing is equal to the full 18px unit. h2 { font-size:1.1667em; line-height: 1.286em; margin-top: 1.286em; margin-bottom: 1.286em; }

57. Variations in text size  Also in our example, the main heading is given a text size of 18px, therefore the line-height has been set to 1em, as has the margin  18 ÷ 18 = 1  Line-height = 1em h1 { font-size:1.5em; line-height:1em; margin-top: 1em; margin-bottom: 1em; }

58. Asides  Asides (and other supplementary material) are often set at a smaller size to the basic text.  To keep rhythm, smaller text should still line up with body copy, so a calculation similar to that for headings is required.  In our example, the aside set at 10px and so their line-height must be increased to 18 ÷ 10 = 1.8.

59. Asides  Asides (and other supplementary material) are often set at a smaller size to the basic text.  To keep rhythm, smaller text should still line up with body copy, so a calculation similar to that for headings is required.  In our example, the aside set at 10px and so their line-height must be increased to 18 ÷ 10 = 1.8..aside { font-size:0.8333em; line-height:1.8em; margin-top: 1.8em; margin-bottom: 1.8em; }