1. CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

2. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 2 What is Typography? The Web is all about reading information, so our goal is to make reading as easy as possible for the visitor.

3. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 3 Readability vs. Legibility Readability and Legibility are not the same thing.

4. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 4 Readability Readability refers to how easy it is to read a lot of text. Serif fonts are easy to read. Sans-Serif fonts are more legible. You can improve the readability of your pages a lot by using fonts designed specifically for use on screen. Most computer fonts are optimized for the printed page, not screen display.

5. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 5 Legibility Legibility refers to how easy it is to recognize short bursts of text, such as headlines, buttons, signs, etc.

6. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 6 Readability on the Web Use a Serif typeface for extended text. Sans Serif can be easier to read in shorter amounts of text, a paragraph or two or separated by graphics.

7. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 7 New Rules: Size Text not too big (not above 14pts.) Nor too small (not below 10pts.) This text is 14pts tall. This text is 10pts tall.

8. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 8 New Rules: Formatting Never set large amounts of text in Bold, Italic, CAPS, or S MALL C APS.

9. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 9 New Rules: Lines of Text Avoid long lines of text. Never spread across the entire page, type in columns. Avoid very short lines of text. We read groups of words, not one word at a time. Keep columns of text to about 8 or 10 words for easy reading.

10. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 10 New Rules: Contrast Keep enough contrast between the type and the background. Black text on White best, other combinations can work with enough contrast. Never use Red text on yellow, dark Blue on Black, Orange on Pink, etc.

11. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 11 Legibility Use a Sans Serif typeface for short bursts of text, buttons, headlines, etc. Avoid typefaces with short ascenders or descenders, hard to distinguish an ‘h’ from an ‘n’ etc. Don’t set type in all CAPS, unless it’s a distinctive part of the “graphic look” you desire. There will be a trade out for legibility.

12. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 12 Breaking the Rules You can break the rules if you know what the rules are. Then have a conscious reason why you are breaking the rule and why it will be OK.

13. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 13 Reverse Type Light type on a dark background, makes text appear smaller. Compensate by making the text a bit larger and the line shorter. This is what happens to text that is white on a black background. This is what happens to text that is white on a black background. This is what happens to text that is black on a white background. This is what happens to text that is black on a white background.

14. Illusions with Text Typography on the Web by Professor Al Fichera http://profal2.com 14 August 26, 2010  The white text on the black back-ground is one size larger than the black text. This is what happens to text that is white on a black background. This is what happens to text that is white on a black background. This is what happens to text that is black on a white background. This is what happens to text that is black on a white background.

15. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 15 Be Conscious If it looks hard to read, it is! Just follow the guidelines given and be sensible. Don’t push it so far that people will get annoyed or not spend the time to read it. Critique other pages for readability and legibility, notice what works and what doesn’t, and why.

16. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 16 Quotation Marks Use professional “curly” quotes, it doesn’t take that much effort to make a Web page look great!  ‘ use ‘  ’ use ’  “ use “  ” use ”  " use " straight quotes for inches.

17. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 17 Special Characters These special characters will make your Web pages appear as professional as any desk top publishing document. • (middle dot) – (en-dash) — (em-dash) … (ellipsis) ¢ (cents) © (copyright) ® (registered ) ™ (Trademark)

18. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 18 More Special Characters Four characters & “ are used in HTML to represent certain aspects. Because of this they cannot be used in the text part of your document without help. Use the following codes to represent them: for use > for & use & for " use "

19. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 19 Default Fonts and Sizes The default font is usually 12pt Times. You can not depend on the type looking the same on anyone else’s computer as it does on yours. Whatever you code as a Paragraph will appear in someone else’s computer in their browser’s default size and font. Heading four (4) is the same as the default size.

20. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 20 Fancy Font Faces Anytime you see a “Fancy” font face on a Web page, that text is most likely a graphic file. It’s the best way to guarantee that the visitor sees the font and size you want.

21. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 21 Letting Go of Total Control Accept the limitations of the Web. Don’t create designs that are dependent on text being a certain font, size or in a certain place. This concept can be up for discussion.

22. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 22 Letting Go of Total Control Don’t tell the visitor how to set their defaults, maybe they like their defaults just the way they are.

23. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 23 Letting Go of Total Control It’s not the visitor’s problem to make their system match your ideal, it’s your problem to work around the variables.

24. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 24 What About Fonts on the Web? The standard default on most browsers is Times New Roman (PC) or Times (Mac). This may not be the best choice for any of the OS Operating Systems!

25. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 25 Which Font Faces Should I Use? Designing Web pages for all OS browsers (that means Macs too).  Mac Screen fonts, such as Verdana, Georgia, Geneva and New York, are more readable on web pages.  Printer fonts such as Times, Times Roman, Helvetica, Arial, are less readable on Macs.

26. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 26 Font Face PCs: Georgia Georgia How is the readability? serif Georgia is a serif screen font from Microsoft. It is installed automatically when you install Internet Explorer. This is a screen shot from a MAC * *Thanks goes to Jonathan Nelson, student at Sierra College for all the MAC screen shots.

27. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 27 Font Face MACs: New York New York New York is a serif screen font from Apple. It is an ancient font, designed for the first Macs, but it still works well on screen. This is a screen shot from a MAC

28. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 28 Font Face PCs & MACs : Verdana Verdana How is the readability? Verdana is a sans-serif screen font from Microsoft. It is installed automatically when you install Internet Explorer. This is a screen shot from a MAC

29. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 29 Font Face MACs: Geneva Geneva Geneva is a sans-serif screen font from Apple. It is an ancient font, designed for the first Macs, but it still works well on screen. This is a screen shot from a MAC

30. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 30 Font Face PCs & MACs: Times Times (Times New Roman) How is the readability? Times (or Times New Roman) is a serif font optimized for printing. It is not optimized for screen use. Compare with the previous two fonts. Many users have Times set as their default browser font. This is a screen shot from a MAC

31. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 31 Font Face MACs: Helvetica font Helvetica Helvetica is a sans-serif font optimized for printing. It is not optimized for screen use. Compare with the previous two fonts. This is a particularly good example of a font which is difficult to read on the screen. This is a screen shot from a MAC

32. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 32 Font Face PCs & MACs : Courier Courier How is the readability? Courier is a mono-spaced serif font designed to look like a typewriter font. It is not optimized for screen use, but its wide spacing generally works OK on screen when a mono- spaced font is needed.

33. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 33 So How Do I Write the Code? Use the Cascading Style Sheet version for listing Font Families in the HEAD. For san-serif fonts… p { font-family: arial, geneva, sans- serif } For serif fonts… p{ font-family: georgia, new york, serif }

34. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 34 Last Notes on the Fancies Just because you have a fancy font face* loaded on your computer, it doesn’t mean that your visitor has the same font. Your page will load with their own default font instead. *See the Bitstream information later in this lecture.

35. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 35 Designer Headaches Factors designed to create Designer Headaches. The visitors browser default font The visitors browser default font size. The visitors screen resolution size. All can be controlled by the visitor, so your well planned idea has run into a snag. It’s a factor to deal with too!

36. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 36 Logical vs. Physical Styles All browsers interpret physical styles the same way; if you choose “bold” it will appear bold in every browser. But some browsers might interpret logical styles differently; if you choose “emphasis” it might be italic in one browser, bold in another, and underline in yet another.

37. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 37 The Underline Web page designers are divided on the use of Hypertext underling. Use it and you have clear directions to the visitor. Don’t use it and the visitor has to run the cursor over all colored text to see if it is a hypertext link.

38. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 38 Logical Tags Logical style tags indicate how the given coded text is to be used, not how it is to be displayed. These tags are essential to the Aural Browsers used by blind individuals.

39. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 39 Logical Tags for Audio Browsers this tag is useful for audio browsers, for instance, FOX will be pronounced “F-O-X” instead of “fox”, example: Use the standard two-letter abbreviation (such as CA for California.)

40. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 40 New Logical Tags for HTML 4.0 this tag designates a word formed by combining the initial letters of several words, for example: Jonathan learned his great problem-handling skills from STEPS (Simply Tackle Each Problem Seriously)

41. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 41 New Logical Tags for HTML 4.0 this tag indicates a definition, for example: Styles that are named after how they are actually used are called Logical Styles

42. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 42 A Few Logical Character Tags Logical Character tags indicate how you want to use text. and = Italicized for emphasis and = Italicized for citing books and movies. and = Fixed Width and = Bold These tags have been around from the start, but may not be used quite as much as the Physical tags.

43. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 43 Screen Shots Logical tags Here’s a look at them in both browsers. As you can see, virtually no difference. Check it out, really old screen shots from the old “Browser War” days! Could be 1998 or 1999 MSIE and Netscape Browsers.

44. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 44 Physical Style Tags Physical Style tags indicate exactly the way text is to be formatted. (Bold, Underlined, Italic, etc.) Nothing added in HTML 4.0, but two have been deprecated: Underline and Strikethrough.

45. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 45 Physical Character Tags Use Physical Character tags to indicate exactly how characters are to be formatted. and = Bold and = Italicized and = Typewriter Text and = BIG and = SMALL and = SUP and = SUB

46. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 46 Physical Tags in Action These tags work in both browsers. Also, showing some comparison tags.

47. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 47 Physical Style Tags address tags usually go at the bottom of each Web page and are used to indicate who wrote the Web page, who to contact for more information. Addresses are often preceded with a Rule line and the tag can be used to separate the lines.

48. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 48 What are Dynamic Fonts? Dynamic fonts are one of the developments in HTML design from Bitstream. Dynamic fonts put more creative power in web authors' hands. On the next few slides are a few examples of the many Type Faces available.

49. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 49 Truedoc: Brush 455 http://new.myfonts.com/search/Brush+455/fonts/

50. Truedoc: Snowcap Typography on the Web by Professor Al Fichera http://profal2.com 50 August 26, 2010 http://new.myfonts.com/fonts/bitstream/snowcap /

51. Truedoc: Engravers Gothic Typography on the Web by Professor Al Fichera http://profal2.com 51 August 26, 2010 http://new.myfonts.com/search/engravers+gothic/

52. Truedoc: Poster Bodoni Typography on the Web by Professor Al Fichera http://profal2.com 52 August 26, 2010 http://new.myfonts.com/search/Poster+Bodoni/fonts/

53. Truedoc: Zurich Typography on the Web by Professor Al Fichera http://profal2.com 53 August 26, 2010 http://new.myfonts.com/search/Zurich/fonts/

54. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 54 How Do I Find This Web Site? This is a link to the Home Page: http://new.myfonts.com/foundry/Bitstream/ http://new.myfonts.com/foundry/Bitstream/

55. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 55 How Can I Use These Fonts? These fonts do cost, but not as much as you might think, once you purchase them you can use them on your site by uploading them to your own Web host instead of linking to Bitstream directly.

56. August 26, 2010 Typography on the Web by Professor Al Fichera http://profal2.com 56 Finally… I hope you enjoyed looking at all the wonderful things that can be done with Text and Fonts on a Web page. When we get to CSS (Cascading Style Sheets), you’ll learn how you can directly affect how Text and Fonts can be used on a Web page, and, you’ll understand the difference between them both. Thanks for watching!