Webtype in use: Örnsbergsauktionen 2013

oa-home

Stockholm studio Konst & Teknik is often found at the fringes of design, producing books, websites, and identities that are just north of “normal”. Their work for Örnsbergsauktionen 2013, an independent design auction, is no exception. The site is a single, long-scrolling page that contains not only all the information for the event but also the entire catalog of objects on offer. The approach is unexpected but delivered with clarity and confidence, and the support of just one font: Font Bureau’s Nobel Regular.

oa-object

Each object photo is centered on the page and is seamlessly replaced with the next photo as the user scrolls. The text labels move with the scroll, giving a sense of movement and place.

Each object photo is centered on the page and is seamlessly replaced as the user scrolls. The overlaid text labels move with the scroll, lending a sense of movement and place.

We asked Konst & Teknik’s Peter Ström to tell us how this unusual site was born.

What was your role in the design process?
Örnsbergsauktionen is an annual “artist operated auction house for studio produced, independent design and craft in Örnsberg, Stockholm”. As the auction itself is organized by 3 designers/artists the overall budget is limited (think trading economy) so we decided to set up a time limitation: one weekend. The deadline was Saturday for a finished structure and mockup of the site, and Sunday to add all the content. The photos of the objects were taken on the Sunday and were delivered straight from the photo shoot. The site went live on Monday and the auction happened on the following Friday, four days after the site was launched. For these reasons, there is no CMS and the few updates that had to be implemented over the short life-span of the site were done manually and uploaded via FTP, the old school way (a way of working we actually like and do quite a lot, as we can change and adopt the design of the site for every change).

Inspired by a window at the event space, the Örnsbergsauktionen hexagon looms large.

Inspired by a window at the event space, the Örnsbergsauktionen logo looms large.

Why did you choose Nobel?
The identity for the auction was designed by Hanne Lindberg, and included (among other things) Nobel. Hanne’s design was informed by the building where auction takes place — a hexagon-shaped window from the façade, and an old sign by the entrance that is set in a typeface that resembles Nobel.

Since we knew we could find a nice webfont version of Nobel through Webtype we decided the site would use the typeface exclusively.

oa-old-sign

On old sign in the auction house inspired Ström…

Geometric type on an early 20th-century sign at the auction space inspired Lindberg to choose Nobel, a typeface of a similar age and appearance.

What features were most important to you when choosing the type?
In general, when choosing a webfont, the most important criteria for us is the confidence that it will render well across different systems and browsers, without us having to try on each and every system ourselves (a process that just isn’t feasible for low-budget, time-sensitive projects like this one). That’s why we prefer to host our webfonts through a hosting service like Webtype if possible. However, the choice of typeface often comes before knowing what font-hosting solution we can choose, so sometimes that is not possible. In this particular case, as Nobel was used in the identity already, and we knew Webtype hosted the typeface for a reasonable price, the choice was easy. The website is so simple that we could easily implement only one weight of the family, but in more complex situations we probably would have used another weight or complementary typeface.

oa-blue

How did you go about determining font sizes, line-spacing and other typographic parameters?
As we like to keep things as simple as possible, both to save time but also to keep things simple while coding (we are slow coders), we usually aim for as few different font sizes as possible. The size of the imagery was already determined because the photos had to fit within the view of a smaller laptop screen. So we started with a font size that worked well when overlaid on the photos — not so big that it dominates, not so small that it’s invisible. Then we chose the other two sizes to contrast with the first size and also to work in the layout (2/3 / 1/3 column grid) of the top section. Line-height was based on two factors: we had to use underlines for headlines and links (as we only had one weight) and they needed to be 2px thick to harmonize with the typeface — hence the line-height had to “fit” that nicely.

How was your experience with licensing and implementing the font?
Always a pleasure! We use many different hosting services and let’s just say that Webtype is one of the easiest ones we have tried.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>