Richard Rutter: Morning. Welcome to the last day of South by Southwest Interactive. Great to see so many people here for a talk on typography, especially after all of those parties last night. So yea, we're here to talk about "Web Typography Sucks." I'm Richard Rutter. This is Mark Boulton. Mark Boulton: Morning. Richard: And, I think the first thing we need to do is get right in there and start defining what we mean by typography at this stage. The Oxford English Dictionary says typography is "the art or process of setting and arranging types and printing from them," or "the style and appearance of printed matter," which, while there's a lot of print stuff going on there and it seems to imply the setting and arranging of types, they're talking about when type was set with pieces of metal, way back. And I was moved to approach the Oxford English Dictionary to suggest that this wasn't really quite what typography was nowadays, and they agreed, and they told me that this definition was over 100 years old, and you'll find this definition in dictionaries all the way around the world. Fortunately, in the Oxford English Dictionary the word typography is under review, so hopefully we'll have a more modern definition at some point in the future. But there already exists other definitions whic h are closer to what we want to talk about. There's this one here from the typographer and author Phil Baines, in his book Type and Typography, which says that typography is "the mechanical notation and arrangement of language." By mechanical he also means digital, and language, the conveyance of ideas, and stories, and information. And that's really what we're going to be talking about here: the conveyance of ideas and information. So, when my favorite Internet magazine comes out with its annual typography edition and I'm all excited, then I turn to the pages and I see pictures of fantastic funky new free fonts and wonderful things done with type and curvy special shapes and things, and that's not typography to me, that's just art with words. So, moving on from there, why do we think web typography sucks at the moment? So anybody recognize these? Audience: [laughing] Mark: Well, some of you, from the giggles in the front row there... They're primes, and they're used to signify the height of Jeff Veen... Audience: [laughing] Mark:...and also the location of Brighton. So then they're not quote marks, and they're not apostrophes, although they're commonly used as such. So when we see punctuation like this, all over the place on the web, it's clearly incorrect. Of course, this is the correct way that that type should be set, using the correct characters. There are a few more, particularly dashes, where we see incorrect usage. And that's because the keyboard has a hyphen, so we use the hyphen, or in some cases a double hyphen, to indicate these dashes, and that's incorrect also. We've got the hyphen at the top, the en dash, the em dash, and interestingly the minus, which is thicker than all the other dashes and equal in length to the equal sign. It's interesting to note that there are significant differences across culture and style guide for the usages of en and em dashes. For example, in the UK in the old Hart's Typesetting Rules which date back, I don't know, 80 years, it states that "Em dashes should be used as a phrase marker with no spaces." Yet commonly, kind of, nowadays em dashes in the UK are used with spaces at the sides. I think The Chicago Manual of Style also states that an en dash should have a hair or a thin space at the side when used as a phrase marker. Again you may need to check the facts on that because there are wild differences. Richard: But what they're definitely not is hyphens. Mark: No. Richard:...which is the important thing. Audience: [laughing] Richard: So, in the UK we have this marvelous publication: It's The Sun. It's a newspaper: daily newspaper, sort of newspaper... [either he or Mark scoffs]...and by design it has a reading age of eight years old. Audience: [laughing] Richard: [sighs] True fact. Now if we - [sighs] let's just take a closer look at what happens in The Sun. And if we go into this really quite disturbing story of "The mother of all betrayals," and we have a closer look at some of the text here, we will see in The Sun, this newspaper with a reading age of eight years old: we have proper dashes, we have proper quote marks, we have apostrophes. So if The Sun can do it, why can't we do this sort of thing on the web? Audience: [laughing] Richard: And it's not hard to do. It's not hard to do. All it is is a case of using the correct HTML entities instead of hyphens. Now we're not going to go into a whole great load of detail about how to do that here, because it's already been dealt with well, four or five years ago, in this excellent alistapart article, and so I suggest you head over there and check it out, but we can just summarize it with these here: here we have the quotes and the entities on the side. Don't worry about scribbling them all down, just head over to that article at some point. And you see there that there's quotes and apostrophes and the dashes and a minus sign - the multiplication sign which isn't an x. That's a multiplication sign, it's different. It's unserifed even in a serifed typeface normally and it sits a bit higher up. And the ellipsis which isn't three periods, three, four stops, it's - that's an individual character. So, all these little things here can be represented with HTML entities so you get the real characters. But that might sound like a bit of a pain to actually have to go in through, manually change all your hyphens to dashes, and so on and so forth, but there's help out there. For example, SmartyPants, written by John Gruber, is a little plug-in for things like BBEdit, or you can plug it into your blogging engines, and that will automatically turn - detect when dashes should be there instead of hyphens and quotes, and the ellipsis that we talked about. So there's already help out there for you to try and automate some of this typesetting process. Textile is another one which is online. That comes with a text pattern blogging engine. But again these are things that you can just take out, use all of their regular expressions and things so you don't have to worry too much about it, if you're on a development side of things. Mark: There are a few things that - and obviously Richard's saying that, about automating the process. Well, there are some things that you can't really automate, and in The Elements of Typographic Style Robert Bringhurst - it's got a great little bit of advice in here, it's "In heads and titles always use the best ampersand available, " which isn't that. Does anyone know that typeface? Audience: [guessing] Mark: No... No, No? Rotis, which is an incredibly ugly looking shape, and so don't use that one. There's already some good examples of this on the web. And Dan Cederholm's SimpleBits site applies this principle beautifully. In the headline he's got a beautiful italic ampersand. Now if we just take a closer look at the HTML and the CSS, he's just wrapped the ampersand entity in a span with the class and in the CSS he's given those styles to the fonts. Those fonts are available on most platforms, PC and Mac. Richard: Yes, Gaudi Old Style Palatino and Book Antiqua, they're just about on either every Mac or every Windows machine, so that beautiful italic swash-like ampersand is just there already on people's machines. You don't need to use an image for that, that can be just real text. Mark: And the italic is really important there, the Roman ampersand looks nothing like the italic, the swashes, the very kind of elegant style, that can only be found in most italic weights. Richard: Now you wouldn't want to do this for every single ampersand on your page, but when you've got important things like headings and titles, that's where you can really pay extra attention, and it's not that hard to do. It's the sort of thing that could be automated of course. So what I want to talk about now is vertical rhythm. Vertical rhythm is about reading down the page in the same way that time can be split into any number of different intervals. If you need to follow a song or a piece of music, those interviews need to be regular. And it's the same with reading down a page, if there's a regular rhythm reading down a page, then the reader can follow the page and just feel more comfortable. It's a kind of subconscious thing, but so much of typography is. So by way of example, we have this piece of text here: there's a heading, some paragraphs, a sub-heading and I've chosen some text sizes from here, but what's left at the moment, for example the line-height and all the margins, they are just what I've spat out by default from the browser. And the first thing you can see there, the paragraphs are a bit cramped, they're going to be maybe difficult to follow the lines, and so we need to add some line-height and spread those out a bit. So that's what we can do there. But it's still not really a proper rhythm there and I don't know if you'll be able to see this on the screen but there's some grid lines on there that show the rhythm, or show a rhythm, that's an 18 pixel grid as you go down the line there, and you'll see that the text doesn't really match up at all. So we need to tweak some of those margins that come out of the browsers. As designers, there is that space there: there's a space between a heading and a paragraph, and if you don't know what that is, then surely you're not quite doing all the design and you don't really want the browsing software to tell you what those spaces are, you should be defining what those spaces are. You need to know. So we could move on and see the difference there, so if I just flick back and forward briefly... that's how it was... We'll just give it another tweak... and there again without the lines. So what I want to talk about now, and this is... I'm going to ask you to concentrate a bit, because there's a science part coming up. I just want to talk about some of the simple maths in working out what these relationships are, what these figures are, what you should be setting these margins to or what you could be setting these margins to and things like that. And the first thing you need to come up with is a couple of numbers, you need to come up with a text size, a base text size for your paragraphs, and then a text size for your rhythm. In this case, we've chosen 12 pixels for the text size and a rhythm of 18 pixels, and you'll see why in just a second. So there's some fairly simple CSS to do that. We've just set a font size of 12 pixels on the body, now I know that means that Internet Explorer won't be able to up-and-down change the text size, but just bear with me for a second on that one. With the paragraphs we're talking about sizing text in ems with these paragraphs, so we've got our 12 pixel base size and we want the paragraphs to be 12 pixels so we can set a font size of one em for that. Now I mentioned that the vertical rhythm that we want is 18 pixels and we want the line height to match up to that vertical rhythm. So the simple calculation there is you take your 18 pixel line height, you divide it by the text size which is 12 pixels, and that gives you the line height that you need to specify: 1.5 ems. And similarly, the margins you want to be the same as well, you want to keep that rhythm, so we're applying a bottom margin which again is the same as the vertical rhythm which is the 18 pixels, so 1.5 ems. Now if we look at the heading, the heading is bigger, I've set the heading here to be 18 pixels, which is the same as the vertical rhythm, so we'll just move on quickly to some CSS again here. Remember the base size we've set in the body was 12 pixels, so to get that up to 18 pixels, we need to multiply by one and a half. So you have font size 1.5 ems. Again, the line height: we want that to be the same as the vertical rhythm. So we take the desired line height of 18 pixels, divide it by the font size of 18 pixels, so we get a line height of one em. There's some maths there, but it's pretty simple, we're all clever people we can work this stuff out. And I'll just move over onto the side notes, see the side notes there: 10 pixels high, but they all line up with the same vertical rhythm, and it's the same maths. The desired font size is 10 pixels the base font size is 12, so you do desired 10 divided by base is 12, which gives you 0.8333. Now you might be looking at that and be thinking, "I don't want to put four decimal places into my stylesheets, " so you might be tempted to just do 0.8 ems, but what happens there is that the browser on the rendering engine has to start interpolating. It has to start thinking, "That font size is about 0.98" or something like that, or 0.98 pixels or something like that, so it's got to try and squeeze it into what is actually available: it's got to actually try and work out what it can do with these percentages of a pixel. So if you give these decimal places to the browser, then it doesn't have to worry about interpolating with the rendering: it knows that text size is 10 pixels, it can do that easily. And there's a similar calculation with the line height again: desired line height eight pixels, divided by the font size is 10, gives you 1.8 ems. So moving on finally, we get the sub-heading. The sub-heading you can see is sort of offset. If you can see the grid going across there, you'll see that it's actually sitting on one of the lines. We've introduced a sort of syncopation in the rhythm there. The margin above the heading is one and a half times the vertical rhythm, the margin below is half the vertical rhythm, and we get these sort of calculations going on here. If we just look at the margin calculations down the bottom: one and a half times the 18 pixels is 27 pixels divided by the font size we've said is 14 pixels, and so we get a margin of 1.929 ems. So once you almost get your head around this it does get simpler. These might look kind of scary especially at this time of morning with a hangover but once you sort of get into it you'll find that it all comes out quite nicely. You'll have to trust me on that one. So again, here's the final result. Mark: So in addition to the kind of vertical rhythm that Richard has been talking about, there are a number of things which appear in your copy that you may need to consider the spacing and alignment of. So when a person is describing, say they are shopping list, or something like that to you - politicians do this all the time - there is a physical gesture associated with a list. Normally there is a big pause before it. Then there is this kind of motion. Then there is a big pause after it. So you want to try and mirror that gesture typographically. So here we've got a slide of text with no leading and no spacing applied. There is a list within there. It is pretty difficult to see. So we want to add the vertical rhythm that Rich has just been talking about. We give the list some space. But it is still a bit hidden. We need to give it extra prominence. We can do that by using a different typeface or a different weight. Then, we also want to use position. So in this case, we are hanging it in the margin. In CSS we give the padding on the lines of zero. In this case, the left margin there; it's much easier for the eye to read the list of that way than if there was an indent. It's interesting to know, historically, this was the correct way of setting lists. It wasn't until the advent of Word, DTP that we have seen the indenting of lists. This was the traditional way of doing it. Also as an aside to that, there is hanging punctuation as well. So we've got the quote marks that we were talking about before. They would hang off in the same way that the numerical tare are hanging off into the gutter. It just allows that left margin to keep vertical. Richard: There was an interesting slide, just two slides ago, where Mark had no margins or paddings on the text. It was the starting point. That's something I do quite often especially when I am forcing myself to think about what the margins the browsers are applying to things like headings and lists and so on. Sometimes I'll just turn all those off as a starting point. So maybe in your CSS rules, do a big list of all the headings, paragraphs, lists, all the block level elements, and just do margin zero padding zero. And then you've got a complete blank slate to start from. So you're forced to think about what these margins and paddings are. You're not letting it go down to the whims of what the browsers think will probably work for everyone. So what would like to touch on now briefly is lay out which you might not necessarily think is something to do with typography. But here we have the book Elements Of Typographic Style' by Robert Bringhurst. It's a book on typography with a whole chapter on layout. Here is the famous book Grid Systems' by Muller Brockman. It's a book on layout definitely. But it has a whole chapter on typography. So the two are very much intrinsically linked. Mark: That goes back historically. I'm going to talk a little bit now about grids and how layout and grids and type have always been related. If the grid system was being designed years ago than the constraints that were used by the designer to design the grid were the measures. They were the type size. I'm going to ask you to concentrate again, I'm afraid it. So here we have a unit, which is the smallest base element of a grid system. This is where it all starts. This unit is based on a rational ratio of 2:3, which is a rounding up of the Golden Ratio of 1:1.618. OK. The Golden section is a little difficult to deal with it once you start extrapolating out the numbers and the decimal places. It can get a bit hairy. It's always a lot easier to use the rational ratio. The rational ratio used in photography - the rule of thirds - we are going to use that here. So there we are. 2:3, which divides up into six blocks. So each block, we will give a relational measurement in terms of typography of 1n. So 1/6 of this unit is 1n in dimensions. So we've got 2:3n. OK. So then we're going to extrapolate that out to create our grid of units. We are going to add 0.5 gutters in between each unit block. Are you with me so far? Good. The important thing to note here is as we combine the units in whatever way that we see fit and we combine the units also vertically to define any hanging lines. Say if we had a masthead, we don't want to just pluck that dimension out of thin air. We want to have a rational process to define how big is this masthead. We use the ratios to do that. So let's get to a basic grid structure. We want to add in some type over the grid. The type size is 1n. So therefore you can see there is a direct relationship between the type size, which is in the unit, which defines the grid, which defines the columns, and the placement of type upon the grid, in fact any placement of any element upon the grid, because the grid is defined by the type size. There is a direct relationship there, between the type and those elements. It all begins to fit and to work. The important thing is that this is a rational process to go through. This isn't some kind of designer voodoo magic. We don't just place things of the grid because we feel like it. There is a process to go through. So if I begin to take the grid away, the space that is left between the elements, the white space, that isn't decided upon arbitrarily. That is a decision we've made based on a grid, which has been based on the type size. The white space relates to the type. It's not just empty space. There is a relationship between everything there. So then typefaces, fonts. The thorny issue of typography on the web, I suspect. Sometimes I feel people think, "I can't choose a typeface or fonts, so I'm not even going to bother doing anything else in terms of thinking of the typography. I'm stuck with Ariel so why should I care about any of the rest of it?" It's sort of a lost point. But I would beg to differ. These typefaces that we are lumbered with are not that bad, you know. What they are is extremely good for the medium we are working with. Verdana and Ariel and Georgia, all of these typefaces, and Lucida Grand and so on the Mac - these are well designed typefaces for this medium so I wouldn't just throw your hands up in the air and think, "Well, I can't use meta so what's the point?" But one of the bugbears I do have is that when I see this kind of font family, this font stack here which comes straight out of things like DreamWeaver and just about any other editor you might like to think about. Now as you probably know, what this means is if your reader has got Verdana on their machine then it displays the text in Verdana. If they haven't, then it displays it in Arial. If Arial's not there then use Helvetica and so on until you just try and pick a Sans-Serif. But Arial in this case is not a very good backup for Verdana. They're not even the same size. Those two typefaces there are set at the same size but Arial looks maybe a third smaller so if your reader doesn't have Verdana and they're presented with Arial then your design isn't really going to hold true, it's going to look smaller than you were intending. So what I would say there is: think about what those typefaces are in that list of fonts there because you do want to make sure that they're relevant. And perhaps a better backup for Verdana would be Tahoma, which has been around for a while, or Candara which we'll mention shortly. That's one of the new Vista typefaces. But Arial, just remove it from that stack, it's not going to really help you. But also, we could start thinking about maybe moving things on and giving those lucky people that have extra nice typefaces like Frutiger or Univers or something on their machines, specify those in those font families as well because then they'll love you for it. If they see that they've gone to this Web site and they've spent lots of money, maybe, [audience laughter] on Frutiger on their machine, then they'll love you for it. It might only be a tiny fraction of a percentage and everyone else will get the main default fonts, but you'll be really pleasing some people, which is nice. So you could end up with a font family stack like this, where you're saying Frutiger that's my number one if not that then Univers, then Helvetica Neue which is on all OS X machines for example, followed by Arial, Helvetica and Sans-Serif. I put Helvetica Neue there ahead of Helvetica because Helvetica Neue is the Helvetica typeface which has been redesigned specifically for digital rendering whereas the standard Helvetica you get is sort of left over from OS 9, it doesn't really appear on Windows machines very often. It's not really very good on-screen, it's not hinted very well: you tend to get big gaps opening up in between the letters so the kerning is a little bit all over the place, whereas Helvetica Neue is a definite improvement over that. And Mac people might prefer to see that than Arial, for example. So this is the kind of thing you can think about doing. Another thing to consider is if... say you've been approached by a client and they use meta within their corporate guidelines, and within those corporate guidelines written by those wise print designers, they've said you must use Arial. Well, I'd go back to them and argue that point and say, "Actually, why don't we align meta with Trebuchet. The font on the top is Netta, Trebuche underneath." There are enough similarities between the characters to get away with it, you know it's a hell of a lot better than Arial. And it's your job as designers for the Web to argue this point to people who, well let's be honest, don't know any better. So Rich mentioned the fonts within Vista. I'm not sure how many of you are familiar with the new fonts that are shipping with Vista. Unfortunately, all beginning with the letter "C". I don't know if that was a conscious decision [audience laughter] because I can never remember which one is which. But, regardless, these are great typefaces. Seriously, they have been designed by some of the world's greatest type designers, they're OpenType, they're fully stacked with characters, ligatures, lining numerals... these are great typefaces, and of course they're shipping with the operating system that's used by most of the people on the planet. So start using them. Align them with what you, say, for example you wanted to use Georgia, well start using Cambria or something similar. Extend the font stack a little bit, let's get rid of that monotony of Georgia on the Web, start introducing something a little different. Richard: And you might be wondering if these typefaces are going to make it onto Macs. I don't know the answer to that. What I'm hoping is they'll be shipping with something like the next version of Office for OS X which is coming out in the Autumn or something like that. I don't know if that's true but I'm hoping that will be the case because these are good typefaces. And one of the things that does make them quite good actually is, that they may not have a huge amount of character but that's kind of good because they're all generic and that means that they can be applied over a wide range of uses. It's just that they all begin with "C" which is just silly. [audience laughter] OK so what we've been talking about so far is a lot of little details really, those four decimal place calculations in the stylesheets, we were talking about using quotes instead of primes. All of this sort of thing. But it's what typography is all about, it's all about the small details and how the sum of the parts come together to increase the whole. Up here we have, you may recognize it as the periodic table, which is quite a typographic feat in its own, especially when you have to type all of these into keynote. [audience laughter] But, what this represents, all the numbers on there represent the number of protons in a nucleus. I'm going to take you down a slightly tortured analogy here. [audience laughter] Mark: Bear with it, it's good. Richard: Here we have gold coming up there, there's 79 protons in its nucleus, and if you take any one proton away, you change what you have. Now if you imagine that protons in a nucleus can be analogous to details, individual typographic details on your web page. If you have 79 of those you get typographic gold. If you take away a third, you'll get silver, if you've got 47 perhaps. Take another third away as well and you're starting to be a little bit lazy here, you'll end up with copper, so bronze... Gradually if you really can't be asked, six things in there, that gives you carbon, and in the UK we have a saying that if you come last place you'll win the wooden spoon, and that's what this carbon represents to me [audience laughter]. If you just don't put any effort in, then the wooden spoon, not a nice gold medal. So, just think about that. As many of these details as you can get, you don't necessarily have to do everything because we all have time constraints, but any little thing that you can add, any little detail that you can sneak in there, it's going to help build up towards your typographic gold. Mark: So we've talked about the little details, we've talked about typesetting, we've talked about layout, so who's responsibility is all this typographic detail? Well, I asked this of a friend of mine who's a sub-editor of a newspaper and I asked her a while ago, "Who does that within the organization, who cares if an em dash isn't set correctly?" And she gave me kind of a quizzical look, and she said, "Well, we all do." And it was from the reporters to the sub-editors to the editors to the guy working the press. You know, they all care whether or not something is set correctly, they're using the right characters... they care about the typography. Six months ago I left the BBC. I was working there for four years in a department of 60 journalists so, same environment: a lot of people writing copy, just the delivery mechanism, the end medium, was the only difference. It was the same structure: reporters, journalists, articles, yet there wasn't the care there. Now what has gone wrong in our industry within the process that the attention to detail and the care of typography and language isn't addressed or isn't cared about by everybody along the chain? Is it a cultural thing? Can we change it? Richard: So when we talk about web typography sucking, well it's all our fault, that's why it sucks. In this room I suspect there will be visual designers and software engineers and front-end developers, maybe content creators. As Mark was saying, everyone here should be responsible for it: typography should be in the process, the whole process from content creation to final delivery at the end. As we hinted at earlier on a lot of these things can be automated and so there is some onus on software engineers to be able to do that. But you need to be telling software engineers what needs to go into their content management systems, because we do appreciate that there aren't really that many web sites nowadays that are hand-crafted, individually typed HTML, stuff comes out of CMSes and database and things like that. So there does need to be some automation in there, but like I said there's already tools out there to help you on the way with things like Smartypants and so on. So I would say, if you're an author and you see your text coming out onto the web and the typography is pretty shoddy then I'd get a bit annoyed about that, because you're spending time creating things for people to read and it comes out on the screen and is not as easy to read as it should be able to. So if you're an author, maybe have a go at the visual designer and say, "Why didn't you think about the typography with your design." And if the designer did but it didn't get implemented in the front-end, whatever, just go up the process and start complaining at people and start getting this typographical detail into the process of every single stage. Project managers and people should be aware that it's important, because as Mark said, that is the case in print, and yet you see some organizations, most organizations I would say, which have primarily print output, like a newspaper or a magazine, and then they have the same content coming out on the web and you see the typographical attention coming out in the print but it gets lost when it comes out onto the web. I'd like to know why that is and where that does go wrong. Somewhere where it does seem to be right for example is the new redesign of the New York Times, and just seeing something as simple as the correct dashes and the correct quotes. That appears there. I haven't had a chance to talk with Corante who've been responsible for that, but somewhere along the line, the typography has got into the process from the web side of things as well as the print side of things. Mark: And it might be a cultural thing... that's what's hard, and I really do employ you, if you're in an organization and you're sat here thinking, "Yeah, that's all well and good guys, but I work with 50 people who don't really care about what I do, " I'd really employ you to get on their backs. It's tiring, it takes a lot of energy, but the result is really worth it: you'll get a better product. Richard: And at this point, we'd probably like to open it up to the floor a bit to get your opinions on maybe why this process isn't happening and maybe suggestions on how it could do. Perhaps it's working for you, but maybe you could give us some ideas as to why it could be. The slides and so on are up at this URL here, and we've got a few links off to some various resources as well. So yes, we'd like to hear from you guys, see what you think. [pause] I think there's a microphone there it's probably best to head over to. Mark: We've got somebody on the mic already. Man 1: I've got a question about web typography and I am a front-end developer and this is something that interests me but I don't have as much knowledge as the two of you. I've often seen em dashes used, for instance on blogs or other non-commercial sites, but with spaces on either side - is that strictly incorrect? Or is that merely an aesthetic choice. Mark: It depends. [laughs] I know that's not a great answer. Man 1: Throw me a bone, here! Mark: It depends on which side of the Atlantic you're on, it also depends on which style guide you're reading, Audience Member 1: Well saying I'm on the left side of the Atlantic for starter [laughs. Mark: After speaking to a couple of people on this side of the Atlantic, I'd put a space either side. If you're in the UK, I'd say that's incorrect. Man 1: And just lastly, is there, for instance, a book you could recommend which covers some of these types of things because I want to provide good type to our users. Mark: Yes, read Bringhurst. Bringhurst book is great. If you can get hold of the "Chicago Manual of Style", that pretty much covers a lot of typesetting stuff. The difficulty with typesetting is there's such a crossover with language and with punctuation, and it can get very complicated very quickly. It can also get very heated very quickly, so I guess that would be my advice: get those two books. Man 1: Great, thank you. Man 2: Hello, when you mentioned using body twelve pixels to measure the ems off, and then also mentioned that this was a real problem on Windows IE, I believe you said you would expand on that, and did I miss that? Richard: I didn't expand on it. I just wanted to, when I set the body size there to be 12 pixels I just wanted to try and keep it simple because there was enough maths going in there but what you can do is, for Internet Explorer you can use something like 75 percent and if you give 75 percent that will knock down the standard 16 pixels down to your 12, and when your text size is set in a percentage for IE6 and below then it will scale in ems properly and people can change the text size. In IE7 it's not a problem because that just has the whole zoom thing anyway, so it's not an issue there. The percentage thing is interesting because I did a little experiment on my web site just to find out what default size text people had in there browsers: 95 percent had it as the default which is 16 pixels, so you've got a pretty good guarantee that people are coming to your site with a baseline of 16 pixels so you can resize that with a percentage with some confidence to get it down to something else. Man 3: You asked why you think typography is worse on the web than it is in print, and I think the reason is when you're working in Quark Xpress or whatever, you've got gestures you can type to give you em dashes and those kind of things, but they don't exist in most web programming tools. Richard: Yes, which is why I was suggesting that perhaps that automation can happen elsewhere in the process, because I think when people are writing articles for the web, those are - They're going to be using hyphens and things like that and those need to be converted at some point down the line. Now for print that would be done with the typesetters in something like Quark, but for us on the web it's going to be happening in a CMS I think. Man 3: Interestingly enough I do it in DreamWeaver, in the code field, because if you type in the code to use, as soon as you type in ampersand, it then drops down a menu of all those... Richard: Right. Man 3:...values. And I tend to use the actual Word versions rather than numbers because it's easier to remember ampersand - em - colon - semicolon and so on. And just type those in as they go along and encode it. Richard: Oh, that would probably do the job too. Man 3: And that's an easy way to do it. Richard: Mm-hmm. Man 3: So... And the other thing is you show all your examples in pixels, but I strongly encourage people to size in ems all the way through, because then when the user scales on the keyboard, with ctrl + and ctrl -, all the type scales... Richard: The examples there: the baseline was set in pixels, but thereafter everything else was using ems, so that's really the typographical unit that should be done. But on the screen, of course, everything is thought about in pixels. So I think that's the right thing to discuss sizes in, but how you achieve 12pixel size text or 14pixel size text should be done using ems. But like I said, you need to be able to describe it in a slightly more meaningful way, which is why I was talking pixels. Man 3: Good, OK. Great presentation, thank you. Max: I'm Max from Sight Point. It's a comment more than a question, really. You listed the entities, and their numerical values. I'm not a Unicode expert, but I believe if you're using UTF-8, it's best to use, for example, ampersand, and the &ash; rather than the numerical value. It's easy to understand if you're looking at the source code, but it's also more consistent if you're using UTF-8 to use that value. So just a comment, but great presentation. Richard: No, thanks a lot. Max: OK. Richard: That can apply to at least those HTML entities that do have, the words, if you like, to describe them, as opposed to the numerals. Man 4: Hi guys. I was wondering if you have any advice on determining things like line length, measure, and also how that applies to avoiding terrible things like full justification, since there's the absence of hyphenation online and stuff, to improve legibility. Richard: Yea, the measure, as you probably know, the measure was originally dictated by line length in print, and the example I worked through with the ems on the grid - That is, with regards to measure. I'm talking about measure now. That is great, because, I mean, if you set a measure of say, oh I don't know, I always try to get the measure around about two-and-a-half alphabets, around there, 54 characters, something like that. Simply because, any kind of longer than that and you start having problems with legibility. And if you create in an em-based layout, the advantages of a scalable em-based layout is that all those relationships I talked about: whitespace, the positioning on the grid, everything, is retained as the type size kind of scales. It's disadvantages of course is you get horizontal scrollbars and all sorts of things that we - You know, it's not quite there yet. We need to think about how that adapts as the type size changes. Mark: With regards to leading, line height, that kind of thing: the initial... I don't know, I kind of go gut for that. I wrote an article on alistapart a couple months ago on whitespace, and micro whitespace in between lines is often - I find it's often determined by - sometimes it's determined by brand, so if you've got a kind of upscale brand and you set and type within an upscale brand, you know, on a website, you want to give it more leading and that gives more space, gives more of a feeling of an upscale brand. For legibility purposes I'd keep it kind of - say you've got 12pixel type to 15pixels... Richard: It's an interesting discussion there, the layout thing in terms of dealing with line lenghts, because something's got to give on the web, because there's so many things that you don't have control over, or rather your readers have control over: which is the size of their window, the size of the text, and that sort of thing. And obviously you've got to limit the measure, limit the length of your lines of text. And you can do that by specifying their container in pixels or in ems, so that as the text goes up the box gets bigger, but you still have the same number of characters on the line. And as Mark said, the downside of that is that if the text size is too big then you'll end up with a horizontal scrollbar, but at least it's typographically intact. Audience: [laughs] Richard:...And of course the other way is with a liquid layout, so you're specifying the length of your line as a percentage of the size of the window, which I quite like as a compromise, because as I said, your readers have more control than you do over that sort of thing. There's always compromise, and something has to give. And it really, in my opinion, boils down to the content as to which way you go. Mark: The kind of adapting to window size and that kind of thing. Personally, I think combining that with an elastic em-based layout is going in the right direction. Some kind of intelligent controls to know what size the type is within the browser that the user's changed, and then adapting the grid and the display of the content. I think that's going in the right direction. But it's, you know, good luck finding anyone that gives it a go. It's really complicated. Audience: [laughs] Mark: Rolf. Rolf: Hello gentlemen, nice presentation. First of all, this is more of a comment than a question, but in talking about why web typography sucks, I think it's important to point out... Like in the Bringhurst book, he mentions when you see two hyphens next to each other instead of an em dash, that's the mark of a typist as opposed to a typographer or typesetter. And really the vast majority of typeset on the web is set by amateurs, essentially typists, right? And we've got these tools for them that will automate the process and insert proper characters here and there, but so much of it is so contextual, and at least so far hasn't been able to be algorithmically automated, or whatever. So I think it's just kind of important to keep that in mind: that that's the uphill battle that we face; That the tools that we have so far are good, but they're not good enough. And I think it's - with more and more blogs, more and more people who don't know anything about this, setting this typ e, these are the problems that we're going to face. Mark: Yea, I think automation is only part of the answer. I think we need to nurture an environment where typography is cared about. And that's one of the downsides of modern software, is that it's taken that out of the equation for a lot of people. If I put a hyphen in Word in a certain place, it knows it's an em dash. Well, I think that sucks, personally. [all laugh] Mark: So, I think we need to, everyone needs to - maybe it's just me, but everyone needs to care a little more about using the right character in the right place. You know? Automation can only take us so far. Rolf: Yea I agree. Yea, I just wanted to point that out, so thanks. Richard: Also, another point I'd like to make just sort of briefly is that all these details we're talking about, one of the counter-arguments is that resolutions are so rubbish compared to something in print that you can't really tell the differences anyway. I say that we're going to be found out soon, because back in the late '90s, IBM were developing 200 dpi screens. Now, 200 dpi doesn't sound an awful lot, but the perceived resolution on screen is higher than on print. There's a reason, for example, why the next version of OS X Leopard is going to come out resolution-independent. That's because there's going to be higher resolution screens, and also small screens like the iPhone and things like that. Somewhere down the line, as we get more detail available to us on-screen, the lack of attention to typography is going to become more and more apparent. That's just a warning. [laughter] Jeff Croft: Hey guys. Great presentation. [coughs] Excuse me. My name is Jeff Croft, and I wrote a book called Pro CSS Techniques. I just wanted to point out that, from a CSS perspective, there's nothing wrong with using pixels for sizing your type. What is wrong with it is in Explorer 6. So it's important to keep that in mind. Using ems is great also, but as far as CSS is concerned, all the different units are equal. You can use whatever one you want. The fact that Internet Explorer six has problems with resizing text in pixels, I don't think should prevent you from using that if that is what makes sense to you in your head. Certainly, there are things that you have to do to accommodate for that, but, I don't know. I think it's important to keep in mind that's an Internet Explorer problem and not a CSS problem. So that, really just kind of more than anything... One other thing I was going to say is that I think, when it comes to characters and using the right characters, to me it's important to keep the right characters on the presentational level. For example, on my personal site, I store in my database the wrong characters, the ones I typed when I was typing the thing. Then I use the SmartyPants as a filter on my template level to process it into the right characters. I just think that's important for database normalization and that sort of thing, because these aren't always going to be outputted onto the web. If somebody's getting my stuff via XML or some other format, the right characters can sometimes get in the way. If you have-- Mark: Yeah, nobody's going to look up the multiplication symbol when they're just typing an equation. Jeff: Right. Mark: It gets in the way. Jeff: Yeah, so just a couple of comments. Great job. Man 4: Hi. This is [no idea what the name is...best guess is Mora Colment but it's impossible to tell]. You advised folks using the new Vista fonts. My advice would be to go check the results on a machine without ClearType. You may find machines with these fonts but without ClearType. The texts get rendered really unreadable. We did some testing just a few weeks ago, and what we did was use these fonts in IE seven and Safari and used the fallback fonts for the rest. You can't tell, for example, if IE six or Firefox is running on a machine with anti-aliasing turned on or off, and some fonts just do get unreadable without anti-aliasing. Mark: Would I be right in thinking that in Vista, ClearType is turned on by default? Obviously that means you can turn it off, but I would have thought that under most circumstances-- Man 5: Yeah, but, you know what? Sometimes these fonts are present on XP machines as well. Mark: That's a good point to look out for, yeah. I don't know why ClearType is turned off in XP. I can't quite understand that. Richard: Probably the same guy who made the decision that all those begin with 'C'. [laughter] Dan Mall: Hi, guys. This is Dan Mall. I work at Happy Cog. I just wanted to say that it was a great presentation. Mark, when you were talking about lists, you were talking about how the numerals should hang, and that's the proper way to do it so you maintain that left margin. Can you talk a little bit about how you could do that with things like quotation marks? I know some of the limitations of CSS is that you're working within containers, so how can you drift outside the containers? Whether you've done any testing with negative margins or positioning negatively, or anything like that? Mark: Yeah, I have. I constantly scream at the computer for not letting me. I'm really dismayed that the tools just get in the way of what I want to do, constantly. That's why, every time I apply zero padding, zero margins, to an unordered list, I'd smile a little. Because it's the correct way of doing it, and it looks great. No, personally, I don't have any pearls of wisdom on that one. I remember constantly getting frustrated with the fact that I can't do hanging punctuation correctly. Most DTP packages now, InDesign does it pretty well, where you've got the quotation marks like that, in the gutter. Richard: I find a quick and dirty way to do that, to hang the quotation marks in the gutter so that your text lines up as opposed to the first line being apparently indented by a quotation mark, is a negative test indent. Text indent minus five em will just shove your quote mark into the gutter and you should get your text lined up. That will only do it roughly, but it's probably better. Otherwise, you may have to do fancy things with absolutely positioning your quotes outside, and that gets messy. Mark: The difficulty is any kind of text resizing. That's where I always come unstuck, because those kind of relationships are then lost. So, I tend to just not bother until the tools can do what I want it to do. Dan: Thanks. Woman 1: Hi. I'm a little bit short for the mic, but that's OK. I missed the start of this so forgive me if I'm bringing up something that was covered earlier, but the point that you made about setting the default body size as 75 percent to allow for Internet Explorer not resizing text set in pixels? My understanding is that Internet Explorer has a bug that if the text size is set at less than 75 percent, then the gaps in the resizing are made dramatically bigger. Then the text goes kind of medium, huge, massive, and medium, tiny, unreadable. Just from an accessibility standpoint, I've seen that in a number of the sites that I've looked at, where the people resize their text a little bit and in conjunction with screen magnification, or people with tunnel vision who resize their text smaller find the text becomes unreadable. I wondered if you had any advice on how to set text so that you can get a baseline of 12 pixels or smaller type without falling into that trap. And yes, it's only Internet Explorer, but so many people still use that. It's just something that's going to concern me. Mark: I haven't had too many issues with setting the base size with 75 percent. I found, I thought, that the text did scale quite well in Internet Explorer. An alternative to doing that is perhaps offering alternate style sheets. People can click the little 'T' buttons at the top of your pages to change the text that way using alternate style sheets. That way, you could specify all your style sheets in pixels. It's a bit annoying, because that would take the text size thing away from what the browser can do itself, and you're having to re-code browser behavior into your site. You have to work around these things somewhere along the line. Woman 1: Yeah, OK. Thanks. Richard: OK, we've just been given the sign, so we're done. Thanks very much. Mark: Thanks very much. [applause]