5 ms·
Elegant Web Typography
- halo 18y agoThis presentation encourages a relatively large line-height and the presentation claims (without citation) that it makes paragraphs easier to read. Intuitively, this does not make any sense to me - the larger the leading then logically the more difficult it is for the eye to find the start of the next line. I personally find sites with a large amount of leading between them difficult to read, and think many design sites overdo it - including Jeff Croft's own site and the cited A List Apart where the lines are so far apart I seriously struggle to read it. Edit: Another criticism of this presentation is that it implies Internet Explorer doesn't support @font-face, which is does - in fact, it invented the property which was later standardised in CSS2. The difference is that while other browsers generally support TTF, OpenType or both, Internet Explorer 5-7 only accepts the proprietary Embedded OpenType but a free converter from TTF is available. It also misses one big negative of using sIFR - Flash renders fonts differently from the rest of the page (possibly due to Flash using odd aliasing) making it look weird and 'stand out' compared to the rest of the site - I have no idea why he author is so quick to embrace something that looks so distinctively out of place when trying to encourage coherent design.
- randomwalker 18y agoStrange. That has not been my experience at all. Text with small leading is very hard for me to read, whereas A List Apart is very, very pleasant. The first thing I do with my stylesheets is to increase the line height to 1.4 or 1.5 for all text. Your claim that it is logically harder for the eye to find the start of the next line is easily refuted. Think of the extreme case: each line is half a page apart. Clearly, the eye has no problem finding the next line. I'd like to hear other people's opinions too.
- halo 18y ago>Think of the extreme case: each line is half a page apart. Clearly, the eye has no problem finding the next line. I don't see how that's a refutation at all - if anything I think it supports my case. If each line is half-a-page apart, when you reach the end of the line you have to look down to find the start of the next one because you can't see where the next line is within your natural eye-line, preventing the sentence from flowing naturally. Whatsmore, people have no problems reading books or magazines which almost always have a relatively narrower leading than sites like A List Apart. I think the middle-ground is optimum for readability - if it's too narrow it's easy to mix up which line you're reading, if it's too wide it's difficult for the eye to find the next line so reading doesn't flow naturally. I can't help but conclude that someone read "leading is good" somewhere and took it to its logical conclusion which is making it excessive and this meme has caught on, much like how Fitts's Law has been abused as an excuse to make things unnecessarily and annoyingly big for little gain.
- briansmith 18y agoLine spacing needs to be done in proportion to the page width. As you increase the line length, the line spacing must gradually increase. For a typical web page, line spacing as large as 1.4 or 1.5 does more harm than good. First of all, it doesn't do any good (see http://blogs.msdn.com/fontblog/archive/2006/05/17/600507.aspx http://blogs.msdn.com/fontblog/archive/2006/05/17/600507.asp...). Secondly, it makes the user scroll more to read the content. Scrolling is way worse for readability than tight line spacing. A lot of people use Verdana, and Verdana is a very legible typeface. But, because it is so open, and because of its enormous x-height, it tends to look wrong without excessive line spacing. Also, its normal weight is basically semi-bold at small sizes on LCD screens with Cleartype enabled, and that also encourages excessive line height. I've not seen any evidence that says that these huge line heights actually improve reading performance; the primary benefit of huge line spacing is an improvement in the "color" of the page when using Verdana. Microsoft's new Cleartype font collection (the C* fonts) are slightly less open, don't have such an enormous x-height, and are less bold at small sizes. Consequently, a line height of 1.2 or 1.25 is plenty when with less than 75 characters per line.
- deleted 18y ago[deleted]
- tel 18y agoThe line height issue comes, somewhat, from the argument about textual color. If you have no leading at all, the text ends up very cramped and dark which is considered very unfavorable. For instance, I'd bet you'd be hard pressed to find many books printed professionally which don't have at least half a line of leading. How leading affects someone's ability to scan lines, I don't know so much about. In my experience, medium text color is more pleasing to read in general -- I feel less eye strain, less cramped -- but I don't experience much difficulty following lines regardless of leading.
- randomwalker 18y agoThat was very useful, especially for non-designers like me who do design because we have to. Thanks! Almost everything made sense, except the sIFR thing at the very end (slide 133 or so), where you pipe text through javascript and then flash just so you can force the viewer to look at it in your fancy-ass font. That sounds like a terrible idea from designers who have no understanding of the web, data, standards, navigation or accessibility and believe the point of web design is to make things look exactly like print.
- tel 18y agoI feel a need to defend sIFR. It was actually very carefully designed in order to preserve standards, navigation, and accessibility. sIFR is designed to a) be frosting on top of a standards compliant HTML cake and b) fail very gracefully in every combination of javascript or flash availability. When you design using sIFR you are heavily encouraged to build the design with common web fonts first and then simply overlay the sIFR to be optionally rendered when possible. It even preserves behaviors like anchoring and copy/paste. The idea does, at first, sound extremely convoluted and toxic, but should be instead thought of as a really clever hack to make interesting typographic design possible despite constraints of font distribution online.
- briansmith 18y agoIf you go to jeffcroft.com, you can see that following this advice isn't enough to get legible results. Most of the text on his weblog is hard to read because of excessive use of italics, light-on-dark text, and low contrast (exasperated by my laptop screen's poor contrast). I think Jeff is a good designer and he is probably mostly right. However, many parts of this presentation will lead you down the wrong path if you are a beginner. The 62.5% trick doesn't work as well as the designers claim, because there are a lot of people where the default font size isn't 16px tall (e.g. in high DPI mode or when the browser's font size setting is not "normal"). K.I.S.S. and keep everything font-size: 100%, except fine print which can be >= 80%, and headings which can be as large as you want. Basically, any use of "px" and "pt" for text in your stylesheet is just going to cause headaches. It is true that sIFR works better than what a skeptical person would expect. But, I still have problems with it all the time, copying/pasting stuff into my notes. Don't use it if you can avoid it. Finally, Jeff completely misses the point of "vertical rhythm" as mentioned in "The Elements of Typographic Style." This is probably the #1 comprehension failure amongst readers of the book. Briefly, on the web you don't need to adhere to the vertical rhythm guidelines as strictly as you need to when you are working with text PRINTED with facing pages and/or double-sided. Unless you have multiple columns of text on your page, you shouldn't be adding extra vertical padding just to maintain a vertical rhythm, because that extra padding just leads to more scrolling, which is horrible for readability. I already commented elsewhere on the page about the problems with the leading advice. Regarding quotes...wow, this is already getting too long. I should just write an article and submit it to ALA.
- kingnothing 18y agoCompletely off topic, but is the founder of slideshare a member here? There's no reason I should have to register an account in order to download the slides that I can already view as an unregistered user.
- unalone 18y agoI dunno if he is, but Scribd does that, and the Scribd founder is a user.
- unalone 18y agoI disagree strongly with the sans-serif online argument. Serif'd fonts are harder to get to look right, absolutely. But they can be used well, and they look incredible when they are.