Adfonting

It’s the start of the Christmas season. I know it’s the start of the Christmas season, not just because Brighton is currently blanketed in snow, but also because 24 Ways—the advent calendar for geeks—has kicked off with its first article. Hurray! And this year, all of the articles will be available as a book from Five Simple Steps for a mere £8, with all the proceeds going to charity. Grab a copy before the end of December because this is a time-limited offer.

This year, 24 Ways isn’t the only advent calendar for geeks. While I was off galavanting up and down the west coast of the US last month, my cohorts at Clearleft were scheming up a little something special: an advent calendar for fonts. Every day, for 24 days, release a Fontdeck font for one year’s free use.

When they told me, I thought “great idea!” …then they told me they were going to call it an “adfont” calendar and there was much groaning and gnashing of teeth.

The Adfont Calendar 2010 (groan) is now live.

The lovely visual design comes courtesy of Michelle, the latest addition to the Clearleft team, and it mimics a type case; just like the one we happen to have in the office. Every office needs a type case.

Originally, the interface was going to be one looooong type case with some JavaScript layered on top to allow smooth horizontal navigation. But when Rich asked me for some advice on implementing it, I steered him down a different path. Instead of displaying everything horizontally, why not use media queries to show just enough drawers to fit the user’s browser window and allow the rest to stack vertically?

I didn’t think he’d take my challenge seriously but he’s only gone and bloody done it!

Adfont Calendar — 480 Adfont Calendar — 960 Adfont Calendar — 1280 Adfont Calendar — 1680 Adfont Calendar — 2320

Have a poke around and see what’s behind drawer number one.

Have you published a response to this? :

Related posts

Media queries with display-mode

I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.

Ethan Marcotte: The Responsive Designer’s Workflow

Liveblogging Ethan’s talk at An Event Apart in Boston.

Tweaking Huffduffer

An oEmbed nip here, a responsive design tuck there.

Responsive enhancement

A responsive refresh of adactio.com that takes progressive enhancement to the next level.

Responsive refresh

Giving the UX London site some extra flexibility.

Related links

Adfont Calendar 2010 | A free font every day from Fontdeck

It's a type drawer that's also an advent calendar. Responsive too. Check it every day between December 1st and 24th.

Tagged with

Thoughts on Exerting Control With Media Queries - Jim Nielsen’s Blog

Some thoughts on CSS, media queries, and fluid type prompted by Utopia:

We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?

In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.

Tagged with

Can we have custom media queries, please?

I knew that custom properties don’t work in media queries but I had no idea that there was such a thing as custom media queries, which effectively do the same thing.

But this is not implemented in any browser. Boo! This would be so useful! If browser makers can overcame the technical hurdles with container queries, I’m sure they can deliver custom media queries.

Tagged with

Concise Media Queries with CSS Grid

‘Sfunny, this exact use-case (styling a profile component) came up on a project recently and I figured that CSS grid would be the right tool for the job.

Tagged with

Lynn Fisher

This homepage is media-querytastic. It’s so refreshing to see this kind of fun experimentation on a personal site—have fun resizing your browser window!

Tagged with

Previously on this day

16 years ago I wrote Iron Man and me

The story of how one of my Flickr pictures came to be used in a Hollywood movie.

17 years ago I wrote Dripping

Oozing liquid goodness.

20 years ago I wrote Back from Baltimore

I’m back in Brighton after a fairly short and painless jet-stream aided journey from Baltimore.

21 years ago I wrote Bad web whuffie

Here’s a message I sent earlier through the contact page at Macoholics:

21 years ago I wrote Renaissance theme

One week ago I was in Bologna. I was walking through cobblestoned streets lined with red-roofed old buildings. Many of the buildings were painted in the typical Renaissance style of yellows, browns and oranges.

22 years ago I wrote Puerto Muerto

Another weekend, another concert organised by The Gilded Palace of Sin.

23 years ago I wrote The Science Museum

As of today, there is no admission price for the Science Museum or the Natural History Museum.