Typophile

Condensed Web Fonts

Dan Gayle

Achtung! I can't wait for @font-face to actually work in most browsers. It will make finding a decent condensed face much easier.

This is the state of things, as I see them:

Arial Narrow => Horrible, ugly, ugly
Impact => Too black, too overused
Haettenschweiler => Only on Windows, see also Impact
Helvetica Neue => Only on Mac, how the heck do you specify it for anything other than Safari?
Tahoma => Tight fit, not really a condensed font. Just more condensed than Verdana.
Trebuchet => Tighter than Tahoma, still ugly

Am I missing any?

Lucida Grande/Sans is not condensed, but pretty narrow.

There is some benefit to good ole' TNR though. It sits almost as narrow as Impact, without looking unnatural.

The really annoying thing is that fonts are often named differently across different platforms. I couldn't tell you how many times I have had problems with Helvetica Neue and it not being recognized by photoshop because I had a differently named version of it from the creative director. We finally standardized to the Opentype version, which has the same name everywhere (which might help solve your problem Dan), but while it went on, it was rather frustrating.

If you are willing to let go of some control, using font stacks would be a decently good idea. It would allow you to specify which fonts you want to use on windows and macs. It isn't an ideal solution (indeed @font-face would help resolve many an issue), but at least it is something that works now. I'm using it on a site to identify Lucida Sans in its Windows version and Mac version (as they are named differently).

I started a definitive font stack thread a while back, but no one really took the bait. There are a few font stacks that can give a designer plenty to work with. Save for the exception of a decent condensed face. SUX.

Dan, you might be aware of this, but maybe someone else may benefit:

A survey of the most common fonts on all platforms
Same as above, but the complete list

It seems to have been updated this month.

@Florian, +1 re: Lucida Grande/Sans

@Dan B., Good call. Phil's survey results are oft-updated and well reasoned.

@Dan G., The more I browse around Typophile, the more great stuff I see from you. I'm interested in your font stack thread from a while back – can you link to it from here?

Y'all might be interested in this recent post at Nice Web Type:
http://nicewebtype.com/notes/2009/04/23/css-font-stacks/

Why is this listing relevant in presence of @fontface?
or...
>Am I missing any?
Missing any? You're hardly naming any.

Cheers!

Why is it relevant? Because I am expected to make crap work in IE6 by my boss, that's why. Because I am expected to fit hundreds of words "above the fold" regardless of how cramped things might feel, and a decent condensed typeface might make me hate it less.

You figure out a way to get @font-face to work in IE6, and I'll completely scrap this whole exercise and start using Univers 59 on everything :)

>Why is it relevant?
First, you said you couldn't wait for most browsers...at which point you don't have to limit your pick, so I assumed you meant the future, and second, you didn't say you want to publish anything or that you had a boss. ;) I'd start using Univers 59 on everything now, (as graphics), and then when the browsers catch up, you'll be stylistically prepared for da futcha.

Cheers!

Dan G, start using Univers 59 (as a combination of ttf/otf and eot) if you feel like it. IE6+ supports @font-face but you'll need the use the eot format. There are online tools to do this conversion. See http://randsco.com/index.php/2009/07/04/p680 for a some nice CSS to achieve this cross browser.

yea, IE6 really sucks.

Ok, REAL solution:

Pick out a really great condensed face that works well on screen.

Purchase a license.

Sneak into your boss's computer one evening and install it on his system.

Adjust your font-stacks as necessary.

Boss = happy!

Or, you know, uninstall IE6 from your boss's machine. Blame it on a virus or something.

Um, no. Do not set large masses of text as a picture. We can add this to the list of pearls of wisdom from David “Fools!” Berlow that are best avoided.

—
Joe Clark
http://joeclark.org/

Regarding the 'above the fold' mandate, one potential option is to present research to the contrary:

http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_...

A few of the recent "bulletproof @font-face" articles have proven to be quite helpful.

@joeclark Not even using proper image replacement techniques?

@alumium That's a very nice article. Added to my feed reader.

Dan, I am going through the same issue.
Linotype is currently offering a license extension for the use of Cufón, sIFR, Flash and EOT with @font-face. They do not permit using TTF or OTF with @font-face, as this would allow anyone to download and use the font.
Cufón transforms the font on a svg, and draws it with js. But the generator plus the font file in my case were more than 100ks, and the text can not be selected.
sIFR uses flash...
So I'm trying http://webfonts.fonts.com/ which is pretty cool, but isn't perfect either.
After trying all the condensed options they offer, I chose Trade Gothic Next Bold Condensed. Unfortunately, Chrome and Safari renders the fonts way smaller than Firefox and IE.

> Unfortunately, Chrome and Safari render[] the fonts way smaller than Firefox and IE.

So there is that, and the fact that any fall back fonts you define for @ff condensed heads, should they be employed, will blow-up your layout; I'd start using as graphics whatever font you plan on for condensed (actually most web designers are looking to quench a bold condensed thirst), and then... if the browsers catch up, you'll be stylistically prepared to start serving a live condensed. (None of this is recommended below 18-20 px or in large quantities, all of this is recommended for those with stylistic requirements beyond the current sizing and rendering barriers of CSS/OS type).

And in the mean time, I will see what I can do to give condensed and bold cond. families to everyone in the world for free, so sometime in the future, a fall back font won't blow up your layouts using condensed. If you want to change the Russian Doll inside this issue, lobby IE to support CSS: font-size-adjust.

JC>We can add this to the list of pearls of wisdom from David “Fools!” Berlow that are best avoided.

What's the alternative, oh wise leader of da Fools?;)

Cheers!

I spoke too soon when I said http://webfonts.fonts.com/ had fonts rendered in different sizes on Chrome/Safari and on Firefox/IE. It came up that defining the text style as bold was causing Firefox and IE to faux bold them.
The only remark now is that the lack of anti-alias on the text in some xp machines complicates the use of condensed fonts.
http://webfonts.fonts.com/ is a beta service and at some point they will begin to charge. But for those like me who need bold condensed into dynamic text, is the best option I found so far.
Thank you.

>I will see what I can do to give condensed and bold cond. families to everyone in the world for free"

Mr. Berlow, would you care to elaborate on that a bit?

>Mr. Berlow, would you care to elaborate on that a bit?

Elaborate on the "custom font"/"default font" metrics issue, do you want to know what fonts I'm going to give away and when they will be on all the computers in the world, or are you interested in custom condensed custom fonts before they become defaults?

Cheers!

The fonts you are going to give away, and when your diabolical plan for total world domination will begin. And how can I become an evil henchman.

Captured from web.archive.org on 13 Apr 2015. view this capture