Here are four approaches to styling phone numbers. Which looks best to you?

Lately I’ve been thinking about formatting phone numbers. Of course, there are plenty of options in addition to the ones above, but these are some common ones, although the thin spaces option is perhaps not too common. I added it because I’ve been wondering about the value of the separator characters, and if we can just not use them in favor of a little white space.

Here is some of the thinking.

1. The conventional formatting of (123) 456-7890 will obviously be a phone number to most Americans.
2. I’m no fan of the dashes.
3. I’m okay with the periods. However, are they needed?
4. Which led me to try the version with thin spaces between each set of digits.

I like the thin spaces, but I don’t dislike the conventional version. So, for obviousness, I lean towards the convention. For aesthetic, I lean towards the thin spaces.

But part of the decision of which approach to go with will depend upon the context. For instance, is the phone number labeled with an obvious word like Telephone or Phone? If so, I might opt for the thin spaces version.

However, if the context is unclear, say in the absence of clear cues about what that number is, the conventional approach would be best. Otherwise, the number could be misinterpreted as some other number, or it might simply take the reader too much mental effort to recognize it as a phone number. No need for that sort of rudeness.

Clearly, this is all just my opinion. Do you have a preference for how phone numbers ought to be styled?

Let’s say you had an abbreviation, like CSS, that you wanted to put into small-caps, say with a little extra tracking. You might think you could use the CSS property font-variant: small-caps, and you’d be good to go. Not so.

Here’s why. Because for small-caps to work, you need to start with lowercase letters.

However, when you’re simply typing your thoughts out before you’ve decided on small-caps for abbreviations, acronyms, etc., you probably typed those abbreviations in uppercase.

So, when you tried small-caps, it simply didn’t work. For example, see this web page from 2005 that Joe Clark wrote to test small-caps. Note how the small-caps versions are more like regular capital letters. Not cool. It makes the hack look good, which is bad.

So, here’s what you can do (and what I think browsers ought to be doing automatically anyway):

1. First apply text-transform: lowercase
2. Then apply font-variant: small-caps

That ought to do it.

Here’s a more specific example of the CSS.

abbr, acronym {
text-transform: lowercase;
font-variant: small-caps;
letter-spacing: 1px;
}

"P" for Parking sign in Owosso, MI. The P is pulled out of proportion.

The first time I noticed the green P sign in Owosso, MI, I thought it was trying to tell me that the road was going to make some weird loop back onto itself.

After a few seconds I suspected it might actually have to do with parking (which, of course, it does).

It was one of those mini lessons in typography, and yesterday I finally got around to taking a picture of it (thanks Tom for letting me use your phone).

The problem with the sign is that whoever designed it stretched the letter “P,” malforming it just enough where I, as someone new to this area, failed to immediately recognize it for what it is.

This photo was worth taking because it showed a standard “P” in the stop sign next to the malformed “P” in the parking sign.

Anyway, Adam commented that it’s crazy I noticed the difference. So, here’s an image to show why it isn’t crazy to notice the difference between the two.

Comparison of Helvetica vs Arial. Note the capital G, R, and lowercase e, r, a, and t.

The giveaway for me is the capital letter R. Helvetica’s capital R has some nice curves on the leg of the R, compared to Arial’s fairly angular stroke. I really like Helvetica’s.

Okay, so…when I first glanced at this text, I did a triple-take because I thought it read, “The best way to stay updated with the Design Encyclopedia is through our ass…

It’s actually “RSS,” not some kinky techie-mojo. Just thought I’d share.

(It’s from The Design Encyclopedia, which is actually a cool project.)