Browsers Design Typography


If you are responsible for text marked up in HTML, please learn about character entities. Of late, I’ve noticed prominent companies sloppily using two hyphens where they should be using an em dash, which is —. This is particularly irritating when the text comes from a company that purports to know about design.

A Google page about the Nexus 7:

Double hyphens on Google's Nexus 7 product info page

A Fast Company story:

A Fast Company story using double hyphens

An Atlantic post discussing future mobile technology. The Atlantic is not a design publication, but surely they have people on staff who care about typography:

An Atlantic blog post using double hyphens

If you really want to get fancy, the double hyphens can be replaced with an em dash with thin spaces ( ) on either side. The difference between a standard space and thin space is subtle, but it is noticeable in Safari, Firefox, and Opera.

Like many things in typography, there is variation in the use of dashes, but no respectable typographer thinks two hyphens are the way to go. I should figure out how to insert thin spaces around em dashes in my existing posts…

Another common web typography problem is quotation marks. Setting up a regex to enclose quotes properly using “ and ” might be trickier, but it should also be done.

Apple gets these details right. See the press releases for the latest announcements.

NDP Software’s &what; is a nice search-based entity reference lookup.

By Daniel J. Wilson

I am a designer, drummer, and photographer in Brooklyn, NY.

1 reply on “Emprovement”

The thing that’s been driving me nuts lately is the misuse of John Gruber’s Smartypants script. It turns plain quotes into “smart quotes.” The problem is that it turns quotes that follow numbers into prime marks, on the theory that when you write ‘5″‘ you mean ‘five inches’. Unfortunately, this means you get absurdities like the “iPhone Five inches” and the like. In retrospect, I think Gruber should have just left that functionality out entirely and assumed that those who need prime marks would know how to get them.

Comments are closed.