CSS Wizardry » Typography

Thai-po-graph-e

Harry Roberts — Thu, 04 Mar 2010 09:22:15 +0000

This is just a silly little something I threw together yesterday. A small pictogram using a map of Thailand, children’s TV character Po, a graph and the letter e to represent, well, Typography.

Too much time on my hands!

Thai • Po • graph • e

Type tips—quick tips on all things web typography

Harry Roberts — Wed, 24 Feb 2010 09:42:13 +0000

Yesterday I released Type Tips, a collection of short and simple tips to take your web typography to the next level. The project has been some time in the making, with me first mentioning it back in early January. For one reason or another I only got started on the project last night, but I ploughed through and released a first version within a few hours.

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…

Typographic phrases (or: how to turn sayings geeky)

Harry Roberts — Fri, 19 Feb 2010 09:46:28 +0000

A while ago I had the idea to express some old sayings in a silly, geeky way, using code and logic to express logically, the meaning behind some well known phrases. I got Illustrator fired up last night and decided to finally got a few made. They’re kind of obvious really, even a non-developer brain can make sense of them, and deciphering the saying is pretty simple, but I think they’re cool nonetheless.

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 three types of dash

Harry Roberts — Sat, 30 Jan 2010 17:07:43 +0000

Unbeknown to many, there are ~~three main~~ many types of dash, and one of the most common typographical mistakes is to use the wrong dash for the wrong job. There are actually ~~three~~ several different types of dash and each have their own uses. The ‘dash’ you see on your keyboard is actually a hyphen which is used as a ‘catch all’ glyph which is used for several purposes. The only reason for this is that there’s just not enough room on a keyboard for so many different dashes.

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.

Various means of spacing em dashes
Fully Spaced	Hair Spaced	Un Spaced
This — is an em — dash.	This — is an em — dash.	This—is an em—dash.

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 −.