It’s a pretty epic offering but I assure you, it’s worth it.

http://www.smashingmagazine.com/[...]/technical-web-typography-guidelines-and-techniques/

Enjoy!

It is worth noting that Wordpress’ editor has stripped some of the semantic and (ironically) typographical niceties from the post. I have a semantically rich original copy knocking about that I drafted the article up in (in HTML)

Spaced and indented—allegedly wrong

A spaced and indented paragraph would use the following CSS:

p{
  margin-bottom:20px;
}
p+p{
  text-indent:2em;
}

Spaced only—looks and works fine

If you just want a spaced paragraph it’s just as simple as p{ margin-bottom:20px; }. Job done. If you want spaced paragraphs then that’s all you need:

p{
  margin-bottom:20px;
}

Indented only—doesn’t work

If you want an indented paragraph, simply:

p{
  margin:0;
}
p+p{
  text-indent:2em;
}

However, as you can see, the problem here is that anything following a paragraph with margin:0; will be butted up against that paragraph. There will be no space between any element following a paragraph.

Spaced and indented fixed—perfect

To fix this, give those paragraphs their margin-bottom:20px; back, meaning you have the spaced and indented look once again, but then on the p+p apply a negative margin-top equal to that of the regular margin-bottom:

p{
  margin-bottom:20px;
}
p+p{
  text-indent:2em;
  margin-top:-20px;
}

Here we have the ideal, every paragraph after the first (in a block) is indented and unspaced. The last in a block is spaced meaning a gap between a paragraph and its following element. Easy.

Me

[…] Certainly on the meanness font [typo of front]

Suze

Haha, typography on the brain?

Me

Em, maybe, yeah… [typo of erm]

Suze

Em, who’s she? ;)

Me

It was another pun, as in ‘em dash’. You obviously didn’t get it though, it’s like your humour has slipped into a comma…

Suze

Hahaha, that is terrible!

Me

[…] I can’t wait tilde dinner later on!

Suze

I kern’t wait either!

And on that note, I think Suze won with ‘kern’. Bless her ;)

Too much time on my hands!

Thai • Po • graph • e

I hope Type Tips comes in useful for you, and that the information in there is of some notable value. If you do like it, please share it by tweeting the link, I’d appreciate it. Any other thoughts? Just drop me a comment…

Many hands make light work

There are lots of contradictions in sayings and phrases. Like this one, if many hands do make light work, then how does this next one work?

Too many cooks spoil the broth

A stitch in time…

While the cat is away…

Absence makes the heart grow fonder vs. time is a great healer

This one is another glaring contradiction, so I decided to combine the two into one poster.

Out of sight, out of mind

Two wrongs don’t make a right

This one doesn’t really follow the code paradigm, but I thought I’d include it anyway.

Got any more that would work in this way? Leave any suggestions in the comments.

Also, I do realise that, programmatically, not all of these posters make perfect sense. For example, $cooks > 'enough' doesn’t really work in a programming sense… It’s just a bit of fun!

The em dash —

The em dash (—)—so named because it is the width of a capital ‘M’—is used to delimit a separate clause in a sentence—rather like this—or similar sub-clause structures. Often used in its place however is the hyphen (-). Looking at the two side by side the difference is quite clear:

Proper em dashes:

The em dash (—), or m dash, m-rule, etc., often demarcates a parenthetical thought—like this one—or some similar interpolation.

Improper hyphens:

The em dash (—), or m dash, m-rule, etc., often demarcates a parenthetical thought – like this one – or some similar interpolation.

Spaces around em dashes

The proper setting of em dashes seems somewhat unclear. The ideal way to set them is with hair spaces ( ) either side — like this. However, IE6 doesn’t support the hair space leaving the options of either fully spaced — like this, or unspaced—like this.

The en dash –

The en dash (–)—so named because it is half the width of a capital ‘M’ (an ‘n’)—has altogether different uses to the em dash. The en dash is used in ranges, for example:

• 6 – 10 years
• July 10 – August 1 2009
• pp. 40–42
• §§ 12–13

Read more specific guidelines on Wikipedia.

The hyphen

The purpose of the hyphen (-) is to join two words—for example ‘front-end’—and to separate syllables when splitting a long word over two lines. As previously mentioned, the hyphen is often misused in place of both the above.

The minus

There is also a separate dash for the minus symbol. The proper entity for a minus symbol is simply −.

More reading

A reader of the old CSS Wizardry left me with a link to one of his own articles covering a few further variations of each.