
Elegant Web Typography - wird
http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation
======
briansmith
If 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.

------
randomwalker
That 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
I 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.

------
halo
This 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
Strange. 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.

~~~
briansmith
Line 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.asp...](http://blogs.msdn.com/fontblog/archive/2006/05/17/600507.aspx)).
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.

------
kingnothing
Completely 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
I dunno if he is, but Scribd does that, and the Scribd founder is a user.

------
unalone
I 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.

~~~
dchest
Now, after you posted the comment, you can go ahead and read the whole
presentation.

~~~
unalone
Yep! I did that immediately and felt rather silly.

