Skip Navigation

Font disparity

Just today I switched this site’s default font to Verdana from (yawn) Arial after years of use… if only because single and double quotes are that much better defined at small sizes in Verdana than Arial. Well, that and the fact that I know squat about choosing fonts. Compare.

Arial
“double quotes” and ‘single quotes’.
Verdana
“double quotes” and ‘single quotes’.

Besides that poor–ass excuse for changing horses midstream, there’s the issue of the ol’ mini–tab navigation. Different fonts, for reasons still unknown, have a nasty tendency to render differently in different browsers. Worse still, the rendering is even more eclectic on different platforms; though that much could be expected. Consider the picture below… in one case the colored tab line sits neatly on the title box’s border, in the other case it hovers a pixel above it. That hovering, for an awfully long time, has been like a clarinet blowing sharp in an otherwise harmonious orchestra. It’s pissed me off.

“in one case the colored tab line sits neatly on the title box’s border, in the other case it hovers a pixel above it”

Using Arial, the hovering would be impossible to predict; in Camino there was no hovering, but in Firefox and Mozilla… hovering! Safari and OmniWeb hovered, Opera didn’t. It was madness, particularly when you consider the disparity between Camino and the other Gecko browsers; they use the same fucking engine! But now, after changing the font to Verdana, almost all of the hovering is resolved… on the Mac.

See, the switch has fixed it so that Safari, Mozilla, Firefox, Camino, Shiira, and Opera all display correctly. This brings me much joy. OmniWeb is still floundering a little, but not with hovering… the tab has sunk down a pixel instead; something I attribute to Omni’s “customized” WebCore engine. But, since they don’t use WebKit, their rendering is somewhat… unique… to Safari and Shiira’s anyway. You’ll note I haven’t mentioned Internet Explorer. The reasons behind this should be obvious.

On Windows, however, the results of this little font–swap aren’t nearly as pleasing. Mozilla and Firefox both hover (at least they have internal consistency), Opera sinks, and Internet Explorer is, well, Internet Explorer. Since it doesn’t render the mini–tabs at all, I consider it to be of little consequence in this experiment.

Perhaps this is an indicator that I should rewrite my tab code; perhaps lifting code from other sources who’ve effectively mastered the concept [read: Dan Cederholm]… which I probably will, but for now I must study. All in good time, people.

Update

Perhaps more frustrating than the seemingly random nature of hovers, flushes, and sinks amongst different browsers and platforms is the bizarre report I received from Julius Mattsson telling me that the tab sinks in Safari on his Mac.

He, exactly like me, is running Mac OS X 10.3.4 with all the latest patches applied, with Safari 1.2.2 (v125.8), and (just to be extra precise) the same copy of Verdana. On both of my Macs I have no such trouble… but Julius’ screenshots certainly confirm it, and I’m ready to tear hair out.

Having the tab sink in Safari is like a big kick in the teeth… worse because I can’t reproduce the problem.

Maybe killing people would be a healthier expression of anger and bewilderment than self–destructive hair pulling. Web design is not for the weak of heart.

Update²

Thanks to Sven’s fine handiwork, it has been discovered that the some–mothers–do–‘ave–em tab sinking in Safari and the “everybody’s fucked! everybody’s fucked!” display problems on Windows are due to custom font sizes. Well, not custom font sizes per se… but default font sizes set at something smaller than the Apple–prescribed 16px.

To be fair, who can blame anyone for changing the default font size to, say, twelve pixels? Not I, certainly… but the interesting part of this lesson is not that the fonts on this site are affected by a browser’s default (they aren’t… all the font sizes are CSS–defined), but that the line height is affected by the browser’s default font.

Think about it for a moment… you define your font-size in CSS thinking everything will be hunky–dory, but unless you define your every line-height as vigilantly you might as well toss your pixel–perfect shit out the window. Consequently, I’ve added a new rule to my nav–bar CSS and (as a handsome side–effect) all modern Mac and Windows browsers now display my shit correctly.

Waves of happiness engulf me.