Week notes: Web Fonts and the Woods

Another busy week at Lanyrd HQ. Some exciting non-product developments and a couple of late night programming episodes powered by take-out sushi. Plus, a day running around in the woods with 30 other web folk.

We crossed an important item off our todo list earlier this week, though I doubt you even noticed it. Our font replacement from FontDeck now loads asynchronously using the Google WebFont loader. I also found a more sensible fallback font for the replaced Eigerdals.

When implementing any font replacement service or technique you have to decide if you let the browsers do their variety of haphazard behaviour or if you engineer a consistent experience. The consistency choice for web fonts then comes down to emulating the flash-of-unfonted-content (like Firefox) or a flash-of-invisible-content like WebKit. Jake Archibald gave a very thorough presentation about these choices at DIBI in Newcastle earlier this year, and Richard Rutter has a useful article about the WebFont Loader on 24ways.

We are now using the Google WebFont Loader and have decided to go with a flash of unfonted content. It came down to a decision between immediate readability and design, and readability was more important to us.

Using the WebFont Loader to load the font asynchronously also has two other side-effects: the fonts are no longer replaced if the browser has JavaScript disabled, which is not so good. However, the content is available to read straight away, even before the fonts have finished being downloaded. This dramatically improves the experience for people on slower connections.

There is another downside. Even once the browser has cached the font, subsequent page loads take moments to font up because the JavaScript on that page hasn't yet executed. Until I find a better solution, we're using an additional class added to the body which is removed 350ms after the page has started to load. This has the effect of a flash of invisible content, hiding just the headers that use the custom font until the JavaScript has had a chance to execute.

Once the font has loaded, the WebFont loader adds the class wf-active which prompts the change in font-family on the affected elements. This allows us to fine-tune adjustments such as line-height, letter spacing and margins to compensate for the different font x heights etc.

Some other changes that you probably didn't see: I've tidied up the design for the currently selected filters on our search results pages, for example this search for coverage of typography in 2010. We've also moved from using the 24 hour clock to the 12 hour clock site-wide, so 16:00 is now displayed as 4pm. This came out of an interesting discussion at our SxSW focus group where we discovered that Americans outside of the military don't use the 24 hour clock, which is common here in England.

We are working on and testing internally some larger projects which aren't quite finely tuned for public release yet, but we think you'll like them.

On Friday, team Lanyrd plus our occasional collaborator Ben tried out a new type of event: Activate, which gives small web companies and freelancers a go at the kind of fun activities that larger companies justify as "team building". 30 web people running around in the woods, climbing poles, crawling through things, driving fast buggies and performing hair-raising lake crossings.

Our team didn't win but we met some great people and had an awful lot of fun. I discovered that in addition to butterflies I'm also afraid of heights. Sophie however managed to both scale and jump off a telegraph pole nearly 30 metres high! As the tallest member of the team, Ben did a fantastic job climbing, jumping and crawling through tunnels. Temporary team Lanyrd adoptee Alex was the real hero of the piece, as the only team member brave enough to take on the high wire lake crossing finalé.

Team Lanyrd at Activate

Andrew Hayward commented…

Have you considered making the time display an option for logged-in users? As a Brit, I'm quite partial to my 24 hour clock.

Commented at 8:19pm on 7th August 2011

Natalie Downe commented…

Interesting idea, we could do, but for now i think we are going to stay with the one format, preferences would make things more complicated for the user, I'm also partial to the 24hr clock but everyone understands am/pm

Commented at 10:13pm on 7th August 2011

Alex Hansford commented…

Great to hear the challenges you're coming across when dealing with the little things on the design. Keep up the good work!

And of course, if you ever need a high-wire lake crossed - you'll know where I am!

Commented at 7:53pm on 9th August 2011


Time 7:22pm

Date 7th August 2011


Stay in the loop

Subscribe to our blog

Stay in the moment

Follow us on Twitter