Presentation is loading. Please wait.

Presentation is loading. Please wait.

copyright Penny McIntire, 2009 Typography on the Web.

Similar presentations


Presentation on theme: "copyright Penny McIntire, 2009 Typography on the Web."— Presentation transcript:

1

2 copyright Penny McIntire, 2009 Typography on the Web

3 2 copyright Penny McIntire, 2009 Why is Type Important? The following is excerpted from Choosing & Using Type, by Daniel Will- Harris, (awesome site!) … –www.will-harris.com/use-type.htm

4 3 copyright Penny McIntire, 2009 Why is Type Important? Type attracts attention, sets the style and tone of a document, colors how readers interpret the words, and defines the feeling of the page – usually without the reader recognizing a particular typeface.

5 4 copyright Penny McIntire, 2009 Why is Type Important? Type is your personality on paper, your image. –Change your typeface and you go from casual to formal, silly to serious, staid to stylish, old fashioned to modern. –If you use a typeface consistently enough, people will start to associate it with you/your company (think Harry Potter or Coca-Cola).

6 5 copyright Penny McIntire, 2009 Why is Type Important? Type is emotional on a subliminal level because of its connotations. –Example: Helvetica is used on IRS forms. Now, how do you think you're going to feel when you read something set in Helvetica? You probably won’t consciously realize that it's the same typeface the IRS uses, but it could still color your emotional reaction.

7 6 copyright Penny McIntire, 2009 Why is Type Important? Type should be appropriate. –Don't choose a whimsical typeface such as Curly for a banking site, or you'll lose credibility. –If you have a fun business, such as a party service, don't use a serious typeface such as Helvetica or you'll come across as boring.

8 7 copyright Penny McIntire, 2009 Typography Terminology Body copy or body text: the main content. –Primary focus is readability. Display type, display text, or headline text: text used for structure and/or decoration, such as titles and headings. –Primary focus to embellish and draw attention. –Short phrases, larger text sizes, decorative fonts.

9 8 copyright Penny McIntire, 2009 Typography Terminology Typeface: a particular design for characters, like Courier, Times New Roman, Ariel.

10 9 copyright Penny McIntire, 2009 Typography Terminology Font: a particular typeface at a particular size in a particular style (bold, italic, etc). –E.g., “Arial, 16 px, bold” is a different font than “Arial, 12 px, bold.” –Thanks to Microsoft and Windows, the term “font” is commonly used to refer to what should really be called a “typeface.”

11 10 copyright Penny McIntire, 2009 Typography Terminology Proportionally spaced typeface: Each character takes up only as much space as it needs. –E.g., Tahoma (the typeface I’m now using): “I” is skinny, “M” is fat. Monospaced typeface: The same amount of space is assigned to each character. –E.g., Courier’s “I” equals “M”

12 11 copyright Penny McIntire, 2009 Typography Terminology Font family: variations on a particular typeface, like bold, light, italic, condensed, etc. –“font-family” in CSS means something different; i.e., a list of alternate fonts.

13 12 copyright Penny McIntire, 2009 Typography Terminology Font categories –Serif: has a slab at the beginning and ending of main strokes, like Times New Roman or Georgia. Supposedly more legible in print. –San-serif: no slab, like Tahoma or Verdana. Supposedly more legible on the screen, especially at small sizes. Not necessarily true?

14 13 copyright Penny McIntire, 2009 Typography Terminology –Decorative typefaces, with curlycues or all kinds of other stuff…

15 14 copyright Penny McIntire, 2009 Typography Terminology

16 15 copyright Penny McIntire, 2009 Typography Terminology –Dingbat typefaces…

17 16 copyright Penny McIntire, 2009 Typography Terminology Leading (pronounced “ledding”): the space between lines of text. –Default leading is one line. –Print experts often recommend an extra % leading. –Looser leading is often preferred for readability, especially for longer lines of text. –Looser leading gives a lighter (less black) look to the page.

18 17 copyright Penny McIntire, 2009 Typography Terminology To control leading: –Use CSS. tallLine {line-height: 1.1} tallLine {line-height: 110%} tallLine {line-height: 1.1em} – and tags provide spacing between lines as well.

19 18 copyright Penny McIntire, 2009 Typography Terminology Letter spacing/tracking: putting more or less space between letters within words. –Use CSS: widetext {letter-spacing: 1.5em} tighttext {letter-spacing: -0.1em} Essentially 150%

20 19 copyright Penny McIntire, 2009 Typography Design Some typefaces tall and skinny, some short and fat– use these characteristics to choose faces for challenging spaces. Don’t mix and match font attributes like different typefaces, different sizes, and different colors willy-nilly. –You will end up with a visually confusing page – the “ransom note” effect. –Use all of these attributes sparingly, with meaning attached.

21 20 copyright Penny McIntire, 2009 Use such contrast in typography to give emphasis (color, bold, italics, larger size, fancier type, alignment, etc.) to draw attention to the structure of your page and to what you consider to be most important. Typography Design: Contrast

22 21 copyright Penny McIntire, 2009 Typography Design: Contrast For example, larger font sizes and perhaps even a different typeface would be okay for headers, because they show that the element is indeed a header. Or, in this presentation, color and italics are used for vocabulary terms that you need to know for exams.

23 22 copyright Penny McIntire, 2009 Types of contrast in typography… –Typeface/structure: Serif versus san-serif, one typeface versus another. –Size: big versus small –Weight: bold versus not bold –Color: You get the idea. Typography Design: Contrast

24 23 copyright Penny McIntire, 2009 –Form: Italic or ALL CAPS or S MALL C APS versus not italic or not caps –Texture: How a block of type arranges itself into a shape, either heavy or lighter in feel. Typography Design: Contrast

25 24 copyright Penny McIntire, 2009 –Direction: Whether the type is Or a very tall skinny block of text Or a very very very very very wide but short block of text. angled Typography Design: Contrast

26 25 copyright Penny McIntire, 2009 Typography Design: Contrast –Interrupted rhythm/spacing: Characters that are s p a c e d differently, Or isolated… –Embellishment:

27 26 copyright Penny McIntire, 2009 Typography Design: Contrast –Justification/alignment: Align left align left align left align left align left align left align left Align right align right align right align right align right align right align right Align center align center align center align center align center align center align center fully justified fully justified fully justified fully justified fully justified

28 27 copyright Penny McIntire, 2009 Typography Design: Contrast Any one (or more) of these typography characteristics can be used to emphasize whatever you want to emphasize.

29 28 copyright Penny McIntire, 2009 Typography Design: Contrast Nonetheless, as we have discussed multiple times, use contrast but don’t get carried away. –If you contrast color and weight and size, don’t contrast all of the other elements, too. –Just because you own 816 typefaces doesn’t mean you have to use all of them on one site. Limit yourself to just a couple on each page.

30 29 copyright Penny McIntire, 2009 HTML Text versus Graphic Text Two types of text on a web page: –HTML text: ASCII text embedded in standard HTML tags. –Graphic text: Text created in an imaging program and saved as an image, then embedded in the HTML using tags. Used to guarantee a particular typeface or graphic effect.

31 30 copyright Penny McIntire, 2009 HTML Text: Fonts HTML text: ASCII text embedded in standard HTML tags. Fonts are not typically downloaded with the page; a font used in HTML displays on the visitor’s screen only if that font file is available on the viewer’s computer.

32 31 copyright Penny McIntire, 2009 HTML Text: Fonts Newer browsers can support fonts that download with the page. –Obviously, this increases download time (a decorative font might need 100K or more). –Just say no.

33 32 copyright Penny McIntire, 2009 HTML Text: Fonts If you want to use an uncommon typeface for HTML text, use that font as your first choice in HTML but specify common backup fonts so that it degrades gracefully if the visitor doesn’t have the first choice font….myFont { font-family: Arial, Helvetica, sans-serif; }

34 33 copyright Penny McIntire, 2009 HTML Text: Fonts –Sans serif fonts Verdana (Verdana, Arial, Helvetica, sans-serif) Arial and Helvetica do not read well on Macs, especially small – letters touch. –Serif fonts Georgia (Georgia, Times New Roman, Times, serif) –Monospaced fonts Courier (Courier New, mono)

35 34 copyright Penny McIntire, 2009 HTML Text: Fonts Georgia and Verdana specifically designed for the screen (Matthew Carter, hired by Microsoft, took two years), with better hinting; that is, larger and more uniform spacing between letters.

36 35 copyright Penny McIntire, 2009 HTML Text: Fonts If you use the typefaces from the list back a couple of slides, you will be safe, because one of the fonts in each category is always present on Windows/Macs.

37 36 copyright Penny McIntire, 2009 HTML Text: Fonts Font sizes –Body text for the general population shouldn’t go below pixels? –Subheads at pixels? –Headings at pixels? –In some of the browser versions, a particular font size looks 25% larger on a PC than it will on a Mac.

38 37 copyright Penny McIntire, 2009 HTML Text: Fonts –For consistency, you could use pixels for type measurement in CSS. –However, for accessibility reasons, use em (the width of the uppercase M) so that you don’t override the user’s font size setting. Example: 1.5em would be 1.5 times as high as the width of an M in the user’s default setting.

39 38 copyright Penny McIntire, 2009 HTML Text: Layout Don’t completely fill a page with line after line of text, stretching from page border to page border. –Too much text is boring. –Long lines of text are hard to read. Limit line length pixels, tops (one of the more common student errors).

40 39 copyright Penny McIntire, 2009 HTML Text: Layout Do “chunk” the content; that is, put it into small sections/chunks with a header to title the chunk. –Web readers skim, rather than reading carefully.

41 40 copyright Penny McIntire, 2009 HTML Text: Layout OK to use various alignment options (left, right, center) for headers and such. Use only “justify left, ragged right” for paragraphs. –Centered body text is annoying, ugly, and hard to read. –Don’t center blocks of text or (horrors!) bulleted lists. –Justification on both sides cannot be done subtly in a pixel-based environment.

42 41 copyright Penny McIntire, 2009 HTML Text: Layout Don’t both indent the first line of a paragraph and double space between paragraphs. Four score and seven years ago, our fathers brought forth. BadGoodGood (default)

43 42 copyright Penny McIntire, 2009 HTML Text: Layout Leave extra space before headings and subheadings (the default with tags). Avoid indenting or leaving a blank line for the first paragraph after a header. –Will have to use CSS to specify single spacing in this case.

44 43 copyright Penny McIntire, 2009 HTML Text: Layout Use pull quotes (a quote pulled off to the side or inserted in the middle, in emphasized type) to give readers and idea of what it in the content.

45 44 copyright Penny McIntire, 2009 HTML Text: Content For emphasizing words, use either bold or italic. Several books say that bold shows up better on monitors than italic, but it often depends on the typeface.

46 45 copyright Penny McIntire, 2009 HTML Text: Content Use underlining only for links. –Underlining for emphasis is an amateurish throwback to the days of typewriters, when that was one of our few alternatives for emphasizing text. Don’t use strikethrough unless you are attempting to display edited versions of documents such as legal contracts. Don’t use blinking text – another mark of an amateur.

47 46 copyright Penny McIntire, 2009 HTML Text: Content Avoid using ALL CAPS in body text, although it can be acceptable in headings. –Fewer caps are easier to read. –Another amateurish throwback to the days of typewriters. Do use CSS to set special characteristics for the first letter or first line (drop cap, all small caps, italics, etc.)

48 47 copyright Penny McIntire, 2009 HTML Text: Content Spell chek!!! Eliminate tpyos!!! Don’t use a bazillion exclamation points in text! (Just look at this page!!!) –It’s distracting and the equivalent of yelling “wolf” over and over!!! Use only one space, not two, at the end of sentences (newer standard), which HTML is going to enforce anyway.

49 48 copyright Penny McIntire, 2009 Use en dashes (a hyphen the width of the letter N, like this -) to separate joined words, and em dashes (longer, the width of the letter M, like this – ) to separate sentence clauses. – –like snail mail–gets the job done. HTML Text: Content En dash Em dashes

50 49 copyright Penny McIntire, 2009 –Escape sequences: En dash: – or – Em dash: — or — Use “proper” quotes: –“ … ” versus " … " –Escape sequences: Curly left double quote: “ or “ Curly right double quote: ” or ” Curly left single quote: ‘ or ‘ Curly right single quote: ’ or ’ HTML Text: Content

51 50 copyright Penny McIntire, 2009 Other special characters: –True ellipse … … or … Tables of special characters: –http://www.meadhra.com/cnet/040901/table- 1.html –http://www.meadhra.com/cnet/040901/table- 2.html HTML Text: Content

52 51 copyright Penny McIntire, 2009 “Upper case numerals” (all the same size) versus “lower case numerals” (uses ascenders and descenders): UPPER-CASE LETTERS & NUMBERS (good) Lower-case letters & numbers (good) MIXED-CASE LETTERS & NUMBERS ( bad). Mixed-case letters & numbers ( bad). –Most typefaces have only one version, so you usually have to change fonts to fix. HTML Text: Content

53 52 copyright Penny McIntire, 2009 HTML Text: Printing If your visitors might want to print the page, you will need to test it on both a color printer and black and white. For instance, light text on a dark page background might not print, depending upon the visitor’s browser and the way it is configured.

54 53 copyright Penny McIntire, 2009 Alternatives –Link to a second, printable version of the page: black text, white background, no tables or frames, simple layout. But maintaining two versions of each page is an error-prone pain. HTML Text: Printing

55 54 copyright Penny McIntire, 2009 –Better: Use different CSS rules for different media. Examples: HTML Text: Printing

56 55 copyright Penny McIntire, 2009 –Set up the page as a.pdf file, for a print version. Must have a.pdf authoring program installed (cutePDF is a free download), then you print a document to the pdf option on the print menu. –Page as.doc file, dependent upon user having Microsoft Word. HTML Text: Printing

57 56 copyright Penny McIntire, 2009 Graphic Text Graphic text: Text created in an imaging program and saved as an image, then embedded using tags. –Should never be used for body copy – a huge download hit and the mark of an amateur.

58 57 copyright Penny McIntire, 2009 Graphic Text Disadvantages: –Worth repeating: download hit! –Not searchable and it’s invisible to screen readers (both partially offset by appropriate use of the alt attribute). –Unavailable if visitor or visitor’s system can’t see graphics for some reason. –Hard to update.

59 58 copyright Penny McIntire, 2009 Graphic Text Fonts for graphic text: A vast selection of text fonts in various categories, such as script, display, old- English, experimental, decorative, etc. Also special character fonts, such as dingbats, arrows, architectural symbols, web icons, geometric shapes, etc.

60 59 copyright Penny McIntire, 2009 Graphic Text Can use very tiny face, like Silkscreen (8 pixels) and Sevenet (7 pixels high), both free. –Bitmapped to a particular size – will not expand well, don’t anti-alias. –Use only on graphic text, not for HTML text because, once again, the user probably won’t have these fonts.

61 60 copyright Penny McIntire, 2009 Graphic Text Anti-aliasing text –Don’t anti-alias extremely small-sized fonts; they get mushy and hard to read. –Several Adobe settings: None – no anti-aliasing is done. Crisp – Type appears sharp, uses less bandwidth than other settings because the anti- aliasing margin is small. Usually the default. Strong – Type appears heavier. Can get mushy. Smooth – As it sounds. Can get mushy.

62 61 copyright Penny McIntire, 2009 Graphic Text –A trick to improve legibility on very thin, anti-aliased type: Place a second copy of the anti-aliased type directly on top of the first copy. Makes the type stronger. Careful, though – may have to space the letters further apart to keep them from running together.

63 62 copyright Penny McIntire, 2009 Graphic Text Kerning: adjusting the space between adjacent letters that can nestle closer together. W A VE versus WAVE Some of this is built into fonts, but real typographers would want to do it manually on larger type like logos.

64 63 copyright Penny McIntire, 2009 Graphic Text Text effects: Can apply the same effects that you can apply to graphics, like drop shadow, blur, glow, outline, radial fill, etc.

65 64 copyright Penny McIntire, 2009 Resources dex.html -- Silkscreen fonthttp://kottke.org/plus/type/silkscreen/in dex.html Sevenet+7 – Sevenet 7 fonthttp://cooltext.com/Download-Font- Sevenet+7 ndex.htmlhttp://www.dsg4.com/04/extra/bitmap/i ndex.html

66 65 copyright Penny McIntire, 2009 Resources mostly free!http://www.dafont.com both free and for a fee. Also a blog about fonts at awesome site with advice about using typography.www.will-harris.com/use-type.htm Lorem Ipsum generatorhttp://www.lipsum.com

67 66 copyright Penny McIntire, 2009 Resources (mostly free!)http://www.dafont.com (awesome site!)www.will-harris.com/use-type.htm Lorem Ipsum generatorhttp://www.lipsum.com Do be careful with downloaded fonts – in theory, they can contain viruses.


Download ppt "copyright Penny McIntire, 2009 Typography on the Web."

Similar presentations


Ads by Google