Typography on the Web copyright Penny McIntire, 2009 Why is Type Important? • The following is excerpted from Choosing & Using Type, by Daniel WillHarris, (awesome site!) … – www.will-harris.com/use-type.htm 2 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. 3 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). 4 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. 5 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. 6 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. 7 copyright Penny McIntire, 2009 Typography Terminology • Typeface: a particular design for characters, like Courier, Times New Roman, Ariel. 8 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.” 9 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” 10 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. 11 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? 12 copyright Penny McIntire, 2009 Typography Terminology – Decorative typefaces, with curlycues or all kinds of other stuff… 13 copyright Penny McIntire, 2009 Typography Terminology 14 copyright Penny McIntire, 2009 Typography Terminology – Dingbat typefaces… 15 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 1020% 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. 16 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} – <p> and <br> tags provide spacing between lines as well. 17 copyright Penny McIntire, 2009 Typography Terminology • Letter spacing/tracking: putting more or less space between letters within words. Essentially 150% – Use CSS: widetext {letter-spacing: 1.5em} tighttext {letter-spacing: -0.1em} 18 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. 19 copyright Penny McIntire, 2009 Typography Design: Contrast • 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. 20 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. 21 copyright Penny McIntire, 2009 Typography Design: Contrast • 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. 22 copyright Penny McIntire, 2009 Typography Design: Contrast – Form: Italic or ALL CAPS or SMALL CAPS versus not italic or not caps – Texture: How a block of type arranges itself into a shape, either heavy or lighter in feel. 23 copyright Penny McIntire, 2009 Typography Design: Contrast –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. 24 copyright Penny McIntire, 2009 Typography Design: Contrast –Interrupted rhythm/spacing: Characters that are s p a c e d differently, Or isolated… –Embellishment: Drop shadow or embossed or , etc. 25 copyright Penny McIntire, 2009 Typography Design: Contrast –Justification/alignment: Align left align left align left align left align left align left align left Align center align center align center align center align center align center align center fully justified justified justified justified justified Align right align right align right align right align right align right align right fully fully fully fully 26 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. 27 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. 28 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 <img> tags. • Used to guarantee a particular typeface or graphic effect. 29 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. 30 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. 31 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; } 32 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) 33 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. 34 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. 35 copyright Penny McIntire, 2009 HTML Text: Fonts • Font sizes – Body text for the general population shouldn’t go below 11-12 pixels? – Subheads at 14-18 pixels? – Headings at 24-72 pixels? – In some of the browser versions, a particular font size looks 25% larger on a PC than it will on a Mac. 36 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. 37 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 350-600 pixels, tops (one of the more common student errors). 38 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. 39 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. 40 copyright Penny McIntire, 2009 HTML Text: Layout • Don’t both indent the first line of a paragraph and double space between paragraphs. Bad Four score and seven years ago, our fathers brought forth. Four score and seven years ago, our fathers brought forth. Good Four score and seven years ago, our fathers brought forth. Four score and seven years ago, our fathers brought forth. Good (default) Four score and seven years ago, our fathers brought forth. Four score and seven years ago, our fathers brought forth. 41 copyright Penny McIntire, 2009 HTML Text: Layout • Leave extra space before headings and subheadings (the default with <h> 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. 42 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. 43 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. 44 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. 45 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.) 46 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. 47 copyright Penny McIntire, 2009 HTML Text: Content • 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. – E-mail–like snail mail–gets the job done. En dash Em dashes 48 copyright Penny McIntire, 2009 HTML Text: Content – Escape sequences: • En dash: &ndash; or &#8211; • Em dash: &mdash; or &#8212; • Use “proper” quotes: – “ … ” versus " … " – Escape sequences: • Curly • Curly • Curly • Curly left double quote: &ldquo; or &#8220; right double quote: &rdquo; or &#8221; left single quote: &lsquo; or &#8216; right single quote: &rsquo; or &#8217; 49 copyright Penny McIntire, 2009 HTML Text: Content • Other special characters: – True ellipse … &hellip; or &#8230; • Tables of special characters: – http://www.meadhra.com/cnet/040901/table1.html – http://www.meadhra.com/cnet/040901/table2.html 50 copyright Penny McIntire, 2009 HTML Text: Content • “Upper case numerals” (all the same size) versus “lower case numerals” (uses ascenders and descenders): UPPER-CASE 123456789 LETTERS & NUMBERS (good) Lower-case 123456789 letters & numbers (good) MIXED-CASE 123456789 LETTERS & NUMBERS (bad). Mixed-case 123456789 letters & numbers (bad). – Most typefaces have only one version, so you usually have to change fonts to fix. 51 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. 52 copyright Penny McIntire, 2009 HTML Text: Printing • 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. 53 copyright Penny McIntire, 2009 HTML Text: Printing – Better: Use different CSS rules for different media. Examples: <link rel=stylesheet type=“text/css” href=“myPrint.css” media=“print” /> <link rel=stylesheet type=“text/css” href=“myDisplay.css” media=“screen” /> 54 copyright Penny McIntire, 2009 HTML Text: Printing – 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. 55 copyright Penny McIntire, 2009 Graphic Text • Graphic text: Text created in an imaging program and saved as an image, then embedded using <img> tags. – Should never be used for body copy – a huge download hit and the mark of an amateur. 56 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. 57 copyright Penny McIntire, 2009 Graphic Text • Fonts for graphic text: • A vast selection of text fonts in various categories, such as script, display, oldEnglish, experimental, decorative, etc. • Also special character fonts, such as dingbats, arrows, architectural symbols, web icons, geometric shapes, etc. 58 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. 59 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 antialiasing margin is small. Usually the default. • Strong – Type appears heavier. Can get mushy. • Smooth – As it sounds. Can get mushy. 60 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. 61 copyright Penny McIntire, 2009 Graphic Text • Kerning: adjusting the space between adjacent letters that can nestle closer together. WAVE versus WAV E • Some of this is built into fonts, but real typographers would want to do it manually on larger type like logos. 62 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. 63 copyright Penny McIntire, 2009 Resources • http://kottke.org/plus/type/silkscreen/in dex.html -- Silkscreen font • http://cooltext.com/Download-FontSevenet+7 – Sevenet 7 font • http://www.dsg4.com/04/extra/bitmap/i ndex.html • www.adobe.com/type/ • www.fonthead.com 64 copyright Penny McIntire, 2009 Resources • • • • • http://www.dafont.com, mostly free! www.itcfonts.com www.chank.com www.fontsquirrel.com www.typ.com both free and for a fee. Also a blog about fonts at http://blog.typ.com . • www.will-harris.com/use-type.htm awesome site with advice about using typography. • http://www.lipsum.com Lorem Ipsum generator 65 copyright Penny McIntire, 2009 Resources • • • • http://www.dafont.com (mostly free!) www.itcfonts.com www.chank.com www.will-harris.com/use-type.htm (awesome site!) • http://www.lipsum.com Lorem Ipsum generator • Do be careful with downloaded fonts – in theory, they can contain viruses. 66 copyright Penny McIntire, 2009