Typography spotted in the Big Apple

While in New York City recently for the National Stationery Show, we found that not everything inspiring was happening just inside the Javits Center.  With a sharp eye, there was some appealing typography in signage that was spotted during our travels.  We all can appreciate a well turned font and a clever capital that gets the message across.  Shown here are just four images we snapped, but we also recommend checking out the artful NYC Type, a site that reveals some of the classic lettering hidden high and low along the streets of New Y0rk City.  Click on each picture on the NYC Type website for the location of each photo.

Clockwise from the top: Harrington’s Bar & Grill on 7th Avenue | Classic serifs on 42nd Street with Madame Tussauds | Houndstooth Pub on 8th Avenue | More serifs grace the Regal Theatre marquee.

CSS @font-face flickering in Firefox, somewhat solved

OK this is off the beaten track, but I’ve been trying to get one of our websites free from the Georgia/Verdana death grip through using CSS @font-face and Typotheque web fonts. I had some problems getting a CSS @font-face formatted text to look right in Firefox because it first loads in the fallback font; this is a Firefox issue that’s well documented, and I’m comfortable with how Safari and IE are loading the page. Since there are a lot of images on the page, it can take a few seconds before the text “jumps” into the right typeface. None of these tricks really improved the situation, so I decided to hide the content until the page loaded. Here is the code I’d used.

(all the examples assume that you're loading the jQuery javascript library)


Since the body was hidden while other scripts were running, though, other elements of the page broke (specifically a jQuery plugin and a YUI component). This wasn’t ideal either because the browser screen had to go blank between every page for every visitor. This code affects all visitors to the site when I’m really only worried about the 30% who use Firefox. So I came up with this solution which only affects Firefox users and which doesn’t hide the body elements (so that nothing breaks):

$("body").css("-moz-opacity","0"); //this css is only used by Mozilla browsers like Firefox

It doesn’t seem to be working when I use this “-moz-opacity” style in a “loading” CSS class (and then use $("body").addClass("loading") and $("body").removeClass("loading") to change the styling). Perhaps this is because Mozilla has deprecated this style. I also don’t like reading that Gecko 1.9.1/ Firefox 3.5 and later do not support -moz-opacity. By now, you should be using simply opacity. However, it seems to be working when jQuery applies this style with css. Just to make sure this trick works in the future, I’ll instead use the css opacity style after doing a jQuery browser detect:

In the stylesheet:

In the javascript:
$(window).load(function() {
$("body").removeClass("loading",500);//I'm using the jQuery UI animation here to fade content in, omit the ",500" if you aren't loading jqueryui.1.7.2.js.

Ah. This appears to be working and only will affect the Firefox users with the screen going blank. But once the fonts are formatted, the body will gracefully fade in. Your thoughts or suggestions are appreciated!