
Simple rules for good typography - madh
http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/
======
m_eiman
_Bullet points, should ideally be in the page margin. Not indented._

Really? To me that's "ugly", as in "that's not how it looks anywhere, so it
jumps out at me". The reason given in the linked text seems to be a design one
("it looks ugly") and not something to do with usability (which is a major
goal of typography).

~~~
mcav
The description in the article makes both look ugly, because there isn't
uniform line height. This might at least provide a slightly better visual
comparison:

    
    
          This is a paragraph of text, and it
          continues onto the second line here.
        
           - This is one bullet
           - This is a second bullet
           - This is a third, longer bullet.
        
          And it ends with a final paragraph.
          
          -----------------------------------
        
          This is a paragraph of text, and it
          continues onto the second line here.
        
        - This is one bullet
        - This is a second bullet
        - This is a third, longer bullet.
        
          And it ends with a final paragraph.

~~~
bd
Independently of line height, it still looks much better indented.

------
ugh
Please don’t use underlines as emphasis on the web. That’s just confusing.
Underlines should be used for links, nothing else. I think that should be
self-evident but some people still get it wrong. Clicking on underlined words
– expecting further explanation or additional material – with nothing
happening always makes me sad :)

(As an aside, I personally don’t like underlines even in print. I much prefer
the subtle use of italics. But that’s very much a question of taste.)

~~~
lmkg
Most style guidelines strongly recommend against using underlines in print.
Underlining used is for emphasis in handwritten material, because it's
difficult to hand-write italics, much less bold. In a printed context, it just
looks... unprofessional.

Of course, this is a stylistic preference and not a normative linguistic
imperative, because I detest such things. But it's a very common one.

------
abstractbill
_Kerning is the spacing between letters. Again, like leading this seems like
an obvious one, but still needs careful attention. Consider if your typeface
generally needs spacing out more, or if it looks better with tighter kerning._

It sounds to me like the author might actually be talking about _tracking_ ,
rather than kerning. From wikipedia: "While tracking increases the space
between characters evenly, regardless of the characters, kerning increases the
space based on character pairs".

~~~
wgj
The author is definitely talking about tracking. Kerning has to be done within
the font/typeface itself, and yes the standard web fonts in major browsers/OSs
are kerned.

<http://en.wikipedia.org/wiki/Kerning>

~~~
pbhjpbhj
But his example is two letters, rt in Helvetica. Perhaps he's referring to
create text as an image for headings (bleurgh!) like in his very ugly
background graphic.

------
mbrubeck
Fully-justified text can actually be more readable than ragged-right (although
ragged-right is definitely better for some contexts like narrow lines, and can
apparently help readers with dyslexia). I believe this is because justified
text makes it easier for the eye find the end of the next line and then track
back to its start. Here's a reference to one study in which justified
performed better than ragged-right (there are others too):

<http://eserver.org/courses/w01/tc510/hades/kaltenbach1.htm>

The advice to use ragged-right is almost always correct on the web, where it's
not generally possible to reliably hyphenate or manually typeset your pages.
But in print I would use justified text more often than ragged-right. There
are reasons that almost all books and newspapers are set justified.

~~~
ggruschow
You can do a lot better hyphenation than most people realize.. e.g.
<http://code.google.com/p/hyphenator/>

~~~
pmiller2
The main problem with something like hyphenator.js is that to do a proper job,
you first have to detect the language. I can't read Polish, but I imagine
trying to hyphenate Polish text with an algorithm designed to work on English
wouldn't work well at all, and ditto the reverse.

~~~
ggruschow
If that's the main problem, then I've got to use it more often!

I'm guessing most websites know what language they're serving up.. and for
those that don't, you can detect it reasonably well in javascript too (e.g.
<http://whatlanguageisthis.com/>). I'm guessing the cost of misidentification
is a minor one, and if it's not, it seems easy to add a confidence output to a
language identifier.. just don't hyphenate when you're not sure.

I would've said the main problem is you add a big JS file to your requests,
but my web ideas are probably stuck in 1994.

------
jakarta
I feel as if the trend in type size for body text is shifting towards larger
text. I just see it happening all over the internet on websites I visit. A few
years ago, 10-12 pt used to be the norm, but now I often see 14pt being used.

~~~
johkra
Monitors have a much higher resolution these days. When a few years back,
1024x768 on 17″ (75dpi) was the norm, nowadays 1680x1050 on 22″ (90dpi) or
1920x1200 on 24″ (~94dpi) are mainstream. (I'm even at 125dpi with 1280x800 on
12.1″)

No wonder a larger font size is needed to get the same experience as a few
years ago. I find myself scaling the font when reading longer texts, because
too many fonts are just too small.

~~~
nhebb
Decreased readability is a subtle byproduct of the increasing number of
monitors, as well.

I have three monitors, and because of how they're arranged, the distance from
my chair to the monitors is 3-4" back from where my single monitor used to be.
3-4" makes a noticeable difference.

Before that, I had a huge CRT monitor, which sat closer to me by necessity
because of the tube size. Without the tubes, we push monitors back to free up
desk space. This also increases the distance from your eyes to the monitor.

Lastly, there's the issue of laptops versus desktops. What is comfortable for
me to read on a laptop sometimes looks microscopic on a desktop. If you design
web sites on a laptop, make sure you check the look on a desktop.

------
nopal
Maybe I'm getting older, but I much prefer a font size larger than 10-12pt.

~~~
Staydecent
For the web, I strongly agree. I like to site back, a few feet away from my
monitor, when the font is 12pt or any less I have to lean in.

13-14pt are nice, and there a bunch of sites with body copy set in 15pt+.

It's easier to create a visual grid with smaller font blocks tho. But.. that
just benefits looks.

------
goatforce5
Maybe it's just me, but that blog doesn't look right unless the browser is >
1600px wide.

Anyone have a simple rules for good web design link handy?

------
gchpaco
Interesting that he suggests no more than three fonts; the rule when I was
poking around was more like two, one for headlines (if you must) and then a
good proper body font for almost everything.

~~~
pbhjpbhj
What about blockquotes/pull quotes and the like?

~~~
gchpaco
I usually set those in the body text in italics or something, perhaps with the
display version of the typeface if I am so fortunate. But I guess that's not
the way people do it these days.

------
arithmetic
Good post! When you think about it, most of these are brain-dead and so
intuitive, that you'd think everyone follows them by default. Often, I see
over-use of emphasis (italics, bold, or underlined) and abrupt font size
changes without reason.

------
chris123
Seems like there is a contradiction. What set of font sizes meet the two
constraints (3-4 different font sizes and size them according to the Fibonacci
sequence / Golden Ratio) and look great on a web page?

------
ianbishop
The fibonacci sequence sounds good in theory but I can't imagine this actually
looks nice in print. Or notably more 'natural' than using standard sizes, for
that matter.

