Dave Shea - Fine Typography on the Web ====================================== slides at http://www.mezzoblue.com/presentations/2006/@media (or will be) interesting things have started happening with typography on the web, things starting to become possible, that's what I'll be talking about. Choices, Methods and Techniques, Practical Application Robert Bringhurst - the elements of typographic style - "Typography is craft of.... though it's branches may be hung each year with new machines" - the web is not print - but you can use the rules from other mediums. Put a photo on a website and rules like composition still matter. Typograhpy - the same thing - the web is a place or medium where we're conveying teh written word, text is our primary interaction, typography is important. Typography affects tone - 2 invitations, same message, very different font Typography affects legibility - same text, same font size, same font, one of left is more open, spacing is larger, allowing lines to breathe, easier to get through. theory can only take us so far, only 10 fonts to choose from, ubiquitous, but plain and boring and we're sick of them. They're not very good fonts. Times NEw Roman - good font, but became default, really tough to see it as anything other than a default, looks like stylesheet hasn't loaded. Coudal.com uses it, but it's still tomes new roman. not interesting. Ariel - cheap knockoff of Helvetica. USed in pretty much any situation where you need a sans-serif font. Such a plain font - cnn.com using it for body and headlines. Mark Simonson (sp?) "The scourge of arial" - "a not very good imitation of a unfashionable typeface" "chosen because it's cheap, not because it's a good typeface" Verdana, Georgia - Matthew Carter, late 90's, pixel grid so it works at various sizes on screen, uses hinting, fit pixel grid perfectly - most legible fonts for onscreen usage, use case for verdana and georgia is no longer valid. Verdana hasn't aged well. Georgia aged a little more gracefully. Core Web Fonts pack - originally licensed free for everything - no longer true. Mac OS X no longer ship with verdana and georgia - no guarantee moving forward that these fonts will be installed. Trebuchet MS - also released around same time - informal look about it that a lot of people are not too happy with. Playful, informal, created by Vincent Connair (sp?), who also created comic sans Comic Sans - stop people on street, 9 out of 10 will say comic sans is favorite font. Playful, shows up in weirdest places, now taking photos of it's usage. British Columbia - Vancouver to my parents house, toll booth, signs are in comic sans. Could justify it in things related to kids. Lucida Sans - actually two versions (mac and windows), can use interchangeably, starting to get a little tired of it, brand new font everyone uses it. Palatino - Font survey - not accurate - only people doing survey care about type, only thing you can take is top 5 fonts installed. Both Apple and Microsoft committed to updating fonts included with OS - few more come with each successive update of Mac OS X. Vista will have new fonts - really nice fonts. Only have low res screenshots, but... Calibri - geometric, low stroke modulation - lowercase o, top and bottom and left and right are same width, not circles, but close. Body text - this will be new default in word, maybe wrong. Cambria - georgia of new set - letterforms are thinner than georgia - as you scale georgia up it has a thick feel to it. Lot of potential as both headline and body font. Candara - least favourite - lot of personality - work well for short passages or headline Consolas - programming environments, code samples, Constantia - Really good headline font - not good for longer passages, look at lowercase x and y and you can see large stroke modulation. Very beautiful, statuesque font. Corbel - Maybe my favourite - very geometric, low modulation, good for headlines and body. Looking forward to using it. Detour on accessibility and machine readability - plain text is both accessible and machine readable. Can screenreaders read text using our methods? Can what we do work on a mobile device - say setting type in a 500px wide image won't work on mobile screen or bandwidth. Can google read it? Couple of methods we have: Font Tags - just say no. CSS formatting - don't need to go into details. CSS isn't without it's problems - to do font sizing you need voodoo. Owen Briggs came up with one method, couple of others. Font Embedding - around for 7 or 8 years - IE and Netscape diverged on implementation, so nobody used them. CSS2.1 removed embedded fonts as nobody has implemented it. It's become a red herring, want it, but technological assistance isn't there. Licensing issues - just as music industry don't want you to embed music, font foundry don't want you to embed fonts without control. Don't see it likely to happen. SVG - potentially, but browser support is limited. Firefox 1.5, Adobe did have a plugin, but hidden recently. Maybe something to look at in future. sIFR - mark up your webpage, apply some javascript which pulls out some elements, read content, pass content to a flash file, generate dynamic rendering in flash file and embed it in the page. Almost doing what font embedding was supposed to do. At first sounds like a lot of overkill - originally by Mike Davidson at ESPN, got into an argument with him, accessible, download times, etc. Everything i threw at him he'd thought about. Now a real technique to consider, they've thought about fallbacks if you don't have technologies. Lot of potential accessibility issues thought through, even Joe Clark has said it's OK. HTML images - ... CSS Image replacement - moving images to central CSS file rather than in HTML, hide text and set a background image - Phark method (negative text indent - accessibility implications), Gilder/Levin (lot more cumbersome, but accessible) CSS3 image replacement - can replace any element on the page with an image. CSS working group has thought through accessibility implications. All methods have strengths and weaknesses. Which one to use depends on what you're trying to do with the text. Scenario: CMS with dynamic headlines - image based options are probably out as you'd have to prerender images. CSS will work great, or sIFR. Could generate images on server, but probably not practical. Scenario: have to use typeface, no questions asked. CSS is out, so image options or sIFR. sIRF probably best. Scenario: kerning control (spacing between individual letters). CSS can't do this, sIFR doesn't currently do this, v3 will have rudimentary, not sure how. So images are only option,. Scenario: styling and decoration: shadows etc - CSS doesn't do enough, sIFR might be an option in future, images only real option. Scenario: font scalability: images don't, CSS does if you use relative font size, sIFR has lazy scaling - based on font size when page is loaded but if they resize on the fly it doesn't change. IE7 has way of scaling entire page, so images aren't necessarily out, but potentially that will solve the problem. Scenario: search engine visibility - CSS is good, no real implications, any technique where we're taking content of an element and replacing it with something else has the potential for being abused - open question of whether search engines will start to blacklist you for using that technique? We don't know, probably relatively clear that we can still use alt text on image. Fairly sure google aren't going to blacklist all sites. Recommended resources: - "The Elements of Typographical Style" - more of a manual - "Typographical Design: Form and Communication" - FontExplorer X - like itunes for your fonts. Q&A --- q: Does sIFR give you an unstyled page on load that corrects itself? a: sIFR can do that, also worth looking at "Flash Of Unstyled Content" q: Have you tried using php for image replacement? a: Personally I haven't, you can install server, there is an alistapart article q: Any pitfalls? a: Haven't done that much myself q: You said you've got objections to sIFR and the designers beat you down. How do you feel about hard cases like 28k modems? a: I generally assume 56k, javascript and flash is small and caches, only looking at 30k overheard. Depends on users and they're bandwidth needs. q: Could be better in terms of download than traditional image replacement? a: absolutely q: Have noticed a problem with sIFR eating memory in multiple tabbed pages in Safari a: don't know issues, have experienced dragged, sure sIFR developers are aware of it. Probably having multiple instances of flash plugin. Question for them. q: Since we're discussing sIFR as solution to client side typography on web, what about other issues - eg: conflict with lightbox. a: Issues of flash existing in layer on top of page, you as a designer have to deal with that, either design around it or not use sIFR. Not necessarily solvable by sIFR developers - browser layer, out of our hands. q: You mentioned briefly about SVG, I seen a solution with batik and apache where images are rendered on the server. Concerned about SVG and Adobe and Flash - what can we do about it? Want an open standard rather than a closed one. a: fundamentally problem with sIFR is that it relies on flash, adobe can decide on a whim where future lies. Flash developers have had to wrestle with, not inherently a problem. Sure adobe will not do something that affects developers. Working with SVG is ideally way forward, but has has a troubled history. Look at CSS, five years ago people weren't using it, wasn't that much of a problem, just had to convince people who wanted something new and fresh. With SVG it's about convincing people who run the space, fundamentally harder problem. If there was demand someone would fill the whole, but the market isn't doing that. As a developer, can't use SVG, but what else can I do? q: these are useful hacks and workarounds, but we should be pushing for what we really want, shouldn't take our eye of that while using workarounds. a: no question, sIFR is a hack, completely agree we need sanctioned methods for doing this. I'm a person using specs rather than someone who makes specs. Just want to use technology and make my own stuff. Both technology and licensing to handle to allow embedded fonts. Just want to get our work done, these workarounds are a way to do that.