Surveying the Big Screen

With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?

It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display.

Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis.

Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors.

Given these conditions, it’s not surprising that many desktop layouts (like this one) are designed to suit a 1024×768 resolution. It’s a leftover from an earlier era, when designs were constrained to the screen resolution that was most prevalent amongst users. Today, with the majority of desktop users on screens that are wider than 1024 pixels, a maximized browser window can turn that carefully considered 960-pixel layout into a monolith in a field of whitespace.

More people are accessing the internet with a mobile device every year, and so it makes sense to concentrate budgets and timelines on creating good user experiences for smaller screens. Mobile layouts can be perfectly usable on larger devices, but the same cannot always be said for desktop layouts viewed on small screens.

But by embracing large screens, designers have the opportunity to work within a larger fold, presenting the user with more content simultaneously, lessen scrolling on longer pages, and create a richer, more expansive user experience. And by using the same practices we developed to adapt layouts to smaller screens and identifying some common patterns for large screens, we need not necessarily introduce extra cost or time to our projects.

Content challenges

As with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways.

Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results.

On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing.

To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type.

Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution.

Working with long reads

The Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered.

The Great Discontent
The Great Discontent uses bold feature art at the top of each article to fill the viewport.
The Roger Ebert site
The Roger Ebert site scales up most page elements, reducing the visible content.

The recently relaunched Roger Ebert site deals with large breakpoints by simply scaling up the maximum width of the page and the page elements proportionately. In theory this might work, but the execution is not entirely successful. Elements such as headers scale up vertically as well as horizontally, meaning the amount of content displayed within the fold is drastically reduced. Inexplicably, main body copy on the more text-heavy pages does not scale up in proportion to the other page elements, so it seems dwarfed in comparison, in addition to being set in a size that is too small for the main column measure.

Medium
Medium places comments contextually, in the extended right margin.

Using the extended margins of larger screens for related or tangential content, such as Medium’s comments layout, is another idea that seems well suited for long-form publishing. When the main content column is maximized on smaller screens, it moves aside to reveal the comments area; on larger screens, the comments are revealed in the available margin space.

I’ve also always liked Grantland’s use of the lower right column for footnotes, which takes advantage of wider screens while maintaining focus on a readable central column. Photographs, figures, asides, quotes, and other related content can be extended out into the margins of wider viewports. This allows a designer to extend the vertical grid outward to create variety while preserving the flow of the main text.

Newer CSS features like columns and regions could be useful tools to enhance long-form reading on wider screens. CSS-based columns are now supported across most new browsers, and could be deployed within sections of an article to maximize screen usage while maintaining a good measure for text readability. If you have a large screen, for example, see my column-based demo of this article.

As a progressive enhancement measure, older browsers that do not support these features could be restricted to a single column of appropriate measure.

Chunking content on large screens

Breaking content into chunks allows users to quickly and efficiently process information on content-heavy pages, and it’s a natural fit for responsive designs, because it allows content to be easily stacked hierarchically or arranged in columns for different breakpoints.

The advantage of this technique for large screens is that each chunk or band of content can use a different layout to optimize for legibility or impact. A good example of this approach is the Manchester City Council site, which uses different groups of modules in restricted widths together with a full-width photography chunk to create impact and emotion. The layout adapts fluidly to different viewports while retaining an appropriate width and layout for the content of each chunk.

Manchester City Council site
Manchester City Council and content chunks.
Juliana Bicycles
Juliana Bicycles treats content chunks more visually.

Juliana Bicycles uses a more visual approach to content chunking, combining horizontal bands with flexible tiles to create a rich and compelling responsive site that also scales to large screen widths. Navigation is recast as a full-window carousel with rich background photographs. Content is presented in modular blocks, and gutters that appear between tiles are removed in tablet and mobile screen sizes. A paper texture background fills in empty tile spaces and also helps fill out the screen at the largest breakpoint. Using image-based modules in this way can be expensive from a bandwidth perspective, but is a great way to get the user to navigate quickly by showing rather than telling.

Tiling modular content

The obvious advantage of a big screen is the ability to see a lot of content at one time.

Google Images
Google Images shows as many images as possible in the viewport.

With collection-based content such as photos, tiling can be an effective way to to fill large screens. We see this every day when searching Google Images—the results spread out to fill the viewport, presenting a large variety to choose from in a single scan.

Pinterest
Pinterest’s tiled pages play to the scrapbooking or collector metaphor.

Pinterest also uses a tiling layout for images, with the addition of text and whitespace to mitigate what could be an overly busy layout. On larger screens the image preview modules seem to tile indefinitely. For a collection site, where the user experience is about quickly collecting and marking favorites, filling the viewport with thumbnails makes it easier to scan and creates a satisfying sense of fullness.

Uniqlo
Uniqlo’s wide view allows shoppers to compare items visually.

Uniqlo uses a wide, tiled-image layout that also looks well-designed and spacious. Items are chunked together with large headers acting as bumpers between sets to add breathing room. Tiling the products across a wide area allows shoppers to quickly compare items visually. At the same time, the whitespace, model photos, and variety in scale add refinement to the overall look and feel and help reinforce the point that design is an important differentiator in Uniqlo’s product line.

Neither Pinterest nor Google Images are responsive or adaptive sites—they both employ a separate site for mobile users. Uniqlo is also only adaptive to larger screens; small screens get the narrowest desktop layout. While these sites may not be complete models for responsive design, we can look at them as examples for expanding this type of content.

Graphic techniques

Another interesting technique for larger screens is based more on classic print design, rather than restructuring or manipulating content to fill the browser.

Institut Choiseul
Elements in the grid extend to edges of the window at Institut Choiseul.

Institut Choiseul confines the content of each page to a structured grid in the center of the window, but effectively stakes out a large screen presence by extending a field of color from the logo and main page content outward toward the left edge of the viewport. The Back to Top link appears in the lower left corner of the viewport when the page is scrolled, a small touch that stakes out the entire window for the page. The strong grid and large fields of color give the site a sober, logical tone that evokes the International Design style of the 1950s and 1960s.

Kanselarij der Nederlandse Orden
Kanselarij der Nederlandse Orden frames a flexible central grid in asymmetrical bands of color.

Kanselarij der Nederlandse Orden has a similar style, with asymmetrical bands of color that provide the background to a centered flexible grid. Because the grid expands as a percentage of the total window width, the content also plays a part in filling the screen, but the boxy color fields add a level of sophistication to what is otherwise a fairly ordinary layout.

Small effects such as a color tone or texture in the background, or removing boxy lines from the edges of a layout, can go a long way toward creating a sense of completeness in the maximized window. Creative use of asymmetry instead of skinny, tower-like layouts can also keep readers from drowning in white margins.

Finally

By simply extending common techniques for adapting content to smaller breakpoints, we can see plenty of opportunities for larger breakpoints as well. Sites that use a strong grid will have an easier time of it, as a well-structured grid should have no problem expanding into a wider space.

Obviously the most important consideration in any design is the content, and so that must be the basis for any effort to expand a design to fill a wide screen. For long reads, it’s more important to create a good rhythm and flow so that the text can be read without distraction. For photographs or graphics, space and scale contribute directly to impact. Government and service-oriented sites must provide easy access to tasks and information. Ecommerce sites need to make it easy for consumers to evaluate and purchase products. A layout’s density should reflect the site’s tone—more density for a more active experience, less for a slower, more thoughtful tone. Much like framing a photograph, filling out the viewport can make a design seem bigger and bolder, just as framing a design in generous whitespace can make it seem more elegant or precious.

It may be true that desktop users have the luxury of resizing the browser window if all that whitespace makes them uncomfortable, unlike users of smaller devices. It may be also be true that not all desktop users browse with large or full-screen windows. But as with mobile, we shouldn’t make assumptions about which devices are used to view our content now, and especially in the future. Large screens, in some cases, can provide both enhanced usability for users and a richer palette for designers. It’s up to us to take advantage of these expanded borders.

Gå till webbsidan »

Surveying the Big Screen

With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?

It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display.

Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis.

Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors.

Given these conditions, it’s not surprising that many desktop layouts (like this one) are designed to suit a 1024×768 resolution. It’s a leftover from an earlier era, when designs were constrained to the screen resolution that was most prevalent amongst users. Today, with the majority of desktop users on screens that are wider than 1024 pixels, a maximized browser window can turn that carefully considered 960-pixel layout into a monolith in a field of whitespace.

More people are accessing the internet with a mobile device every year, and so it makes sense to concentrate budgets and timelines on creating good user experiences for smaller screens. Mobile layouts can be perfectly usable on larger devices, but the same cannot always be said for desktop layouts viewed on small screens.

But by embracing large screens, designers have the opportunity to work within a larger fold, presenting the user with more content simultaneously, lessen scrolling on longer pages, and create a richer, more expansive user experience. And by using the same practices we developed to adapt layouts to smaller screens and identifying some common patterns for large screens, we need not necessarily introduce extra cost or time to our projects.

Content challenges

As with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways.

Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results.

On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing.

To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type.

Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution.

Working with long reads

The Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered.

The Great Discontent
The Great Discontent uses bold feature art at the top of each article to fill the viewport.
The Roger Ebert site
The Roger Ebert site scales up most page elements, reducing the visible content.

The recently relaunched Roger Ebert site deals with large breakpoints by simply scaling up the maximum width of the page and the page elements proportionately. In theory this might work, but the execution is not entirely successful. Elements such as headers scale up vertically as well as horizontally, meaning the amount of content displayed within the fold is drastically reduced. Inexplicably, main body copy on the more text-heavy pages does not scale up in proportion to the other page elements, so it seems dwarfed in comparison, in addition to being set in a size that is too small for the main column measure.

Medium
Medium places comments contextually, in the extended right margin.

Using the extended margins of larger screens for related or tangential content, such as Medium’s comments layout, is another idea that seems well suited for long-form publishing. When the main content column is maximized on smaller screens, it moves aside to reveal the comments area; on larger screens, the comments are revealed in the available margin space.

I’ve also always liked Grantland’s use of the lower right column for footnotes, which takes advantage of wider screens while maintaining focus on a readable central column. Photographs, figures, asides, quotes, and other related content can be extended out into the margins of wider viewports. This allows a designer to extend the vertical grid outward to create variety while preserving the flow of the main text.

Newer CSS features like columns and regions could be useful tools to enhance long-form reading on wider screens. CSS-based columns are now supported across most new browsers, and could be deployed within sections of an article to maximize screen usage while maintaining a good measure for text readability. If you have a large screen, for example, see my column-based demo of this article.

As a progressive enhancement measure, older browsers that do not support these features could be restricted to a single column of appropriate measure.

Chunking content on large screens

Breaking content into chunks allows users to quickly and efficiently process information on content-heavy pages, and it’s a natural fit for responsive designs, because it allows content to be easily stacked hierarchically or arranged in columns for different breakpoints.

The advantage of this technique for large screens is that each chunk or band of content can use a different layout to optimize for legibility or impact. A good example of this approach is the Manchester City Council site, which uses different groups of modules in restricted widths together with a full-width photography chunk to create impact and emotion. The layout adapts fluidly to different viewports while retaining an appropriate width and layout for the content of each chunk.

Manchester City Council site
Manchester City Council and content chunks.
Juliana Bicycles
Juliana Bicycles treats content chunks more visually.

Juliana Bicycles uses a more visual approach to content chunking, combining horizontal bands with flexible tiles to create a rich and compelling responsive site that also scales to large screen widths. Navigation is recast as a full-window carousel with rich background photographs. Content is presented in modular blocks, and gutters that appear between tiles are removed in tablet and mobile screen sizes. A paper texture background fills in empty tile spaces and also helps fill out the screen at the largest breakpoint. Using image-based modules in this way can be expensive from a bandwidth perspective, but is a great way to get the user to navigate quickly by showing rather than telling.

Tiling modular content

The obvious advantage of a big screen is the ability to see a lot of content at one time.

Google Images
Google Images shows as many images as possible in the viewport.

With collection-based content such as photos, tiling can be an effective way to to fill large screens. We see this every day when searching Google Images—the results spread out to fill the viewport, presenting a large variety to choose from in a single scan.

Pinterest
Pinterest’s tiled pages play to the scrapbooking or collector metaphor.

Pinterest also uses a tiling layout for images, with the addition of text and whitespace to mitigate what could be an overly busy layout. On larger screens the image preview modules seem to tile indefinitely. For a collection site, where the user experience is about quickly collecting and marking favorites, filling the viewport with thumbnails makes it easier to scan and creates a satisfying sense of fullness.

Uniqlo
Uniqlo’s wide view allows shoppers to compare items visually.

Uniqlo uses a wide, tiled-image layout that also looks well-designed and spacious. Items are chunked together with large headers acting as bumpers between sets to add breathing room. Tiling the products across a wide area allows shoppers to quickly compare items visually. At the same time, the whitespace, model photos, and variety in scale add refinement to the overall look and feel and help reinforce the point that design is an important differentiator in Uniqlo’s product line.

Neither Pinterest nor Google Images are responsive or adaptive sites—they both employ a separate site for mobile users. Uniqlo is also only adaptive to larger screens; small screens get the narrowest desktop layout. While these sites may not be complete models for responsive design, we can look at them as examples for expanding this type of content.

Graphic techniques

Another interesting technique for larger screens is based more on classic print design, rather than restructuring or manipulating content to fill the browser.

Institut Choiseul
Elements in the grid extend to edges of the window at Institut Choiseul.

Institut Choiseul confines the content of each page to a structured grid in the center of the window, but effectively stakes out a large screen presence by extending a field of color from the logo and main page content outward toward the left edge of the viewport. The Back to Top link appears in the lower left corner of the viewport when the page is scrolled, a small touch that stakes out the entire window for the page. The strong grid and large fields of color give the site a sober, logical tone that evokes the International Design style of the 1950s and 1960s.

Kanselarij der Nederlandse Orden
Kanselarij der Nederlandse Orden frames a flexible central grid in asymmetrical bands of color.

Kanselarij der Nederlandse Orden has a similar style, with asymmetrical bands of color that provide the background to a centered flexible grid. Because the grid expands as a percentage of the total window width, the content also plays a part in filling the screen, but the boxy color fields add a level of sophistication to what is otherwise a fairly ordinary layout.

Small effects such as a color tone or texture in the background, or removing boxy lines from the edges of a layout, can go a long way toward creating a sense of completeness in the maximized window. Creative use of asymmetry instead of skinny, tower-like layouts can also keep readers from drowning in white margins.

Finally

By simply extending common techniques for adapting content to smaller breakpoints, we can see plenty of opportunities for larger breakpoints as well. Sites that use a strong grid will have an easier time of it, as a well-structured grid should have no problem expanding into a wider space.

Obviously the most important consideration in any design is the content, and so that must be the basis for any effort to expand a design to fill a wide screen. For long reads, it’s more important to create a good rhythm and flow so that the text can be read without distraction. For photographs or graphics, space and scale contribute directly to impact. Government and service-oriented sites must provide easy access to tasks and information. Ecommerce sites need to make it easy for consumers to evaluate and purchase products. A layout’s density should reflect the site’s tone—more density for a more active experience, less for a slower, more thoughtful tone. Much like framing a photograph, filling out the viewport can make a design seem bigger and bolder, just as framing a design in generous whitespace can make it seem more elegant or precious.

It may be true that desktop users have the luxury of resizing the browser window if all that whitespace makes them uncomfortable, unlike users of smaller devices. It may be also be true that not all desktop users browse with large or full-screen windows. But as with mobile, we shouldn’t make assumptions about which devices are used to view our content now, and especially in the future. Large screens, in some cases, can provide both enhanced usability for users and a richer palette for designers. It’s up to us to take advantage of these expanded borders.

Gå till webbsidan »

Designing Offline-First Web Apps

When it comes to building apps, we often assume our users are very much like us. We picture them with the latest devices, the most recent software, and the fastest connections. And while we may maintain a veritable zoo of older devices and browsers for testing, we spend most of our time building from the comfort of our modern, always-online desktop devices.

For us, a connection failure or slow service is a temporary problem that warrants nothing more than an error message. From this perspective, it is tempting to think of connectivity, mobile or otherwise, as something that will solve itself over time, as we get more network coverage and faster service. And that works, as long as our users stay above ground in large, well-developed—but not overly crowded—cities.

But what happens once they descend into the subway, board a plane, travel over land a bit, or go live in the countryside? Or when they stand in the wrong corner of a room or simply find themselves part of a huge crowd? Our carefully constructed app experiences become sources of frustration, because we rely so fully on that ephemeral link back to the servers.

This reliance ignores a fundamental truth: Offline is simply a fact of life. If you’re mobile, you’ll be offline at some point. It’s okay, though. There are ways to deal with it.

Taking stock

Web apps used to be completely dependent on the server: it did all the work, and the client just displayed the result. Any disruption in your connection was a major problem: if you were offline, you couldn’t use your app.

That problem is solved, in part, by richer clients, where more of the application logic runs in the browser—like Google Docs, for example. But for a proper offline-first experience, you also want to store the data in the front end, and you want it to sync to the server’s data store. Happily, in-browser databases are maturing, and there are an increasing number of solutions for this—like derby.js, Lawnchair, Hoodie, Firebase, remotestorage.io, Sencha touch, and others—so solving the technical aspects is getting easier.

But we have bigger, and much weirder, fish to fry: designing apps and their interfaces for intermittent connectivity leads to an abundance of new scenarios and problems.

There are of course a few precedents for offline-first UX, and one of them is especially prevalent: your email inbox and outbox. Emails go into your outbox, even when you’re offline. Once you’re online, they get sent. It’s simple and unobtrusive, and it just works.

For incoming email, the experience is similarly smooth: once you reconnect, new emails from the server appear at the top of your inbox. In between, you’ve got a more or less complete local copy of all your emails up to this point, so you’re never stuck with an empty app. All three scenarios (client push fails, client pull/server push fails, availability of local data when offline) are well handled.

Emails, as it turns out, are easy. They’re un-editable, easily listable, text-based, and conflict-free, and the notion of having local copies is already well established with email users. But there are so many more possibilities. How do we handle these scenarios, for example, in a collaborative drawing app? What if we’re not dealing with immutable items like email, but map markers with changing attributes, midi tracks, issues, tasks, or actions? The browser is the new application runtime of choice, and if we take Atwood’s Law into account (“Any application that can be written in JavaScript, will eventually be written in JavaScript”), what other previously unheard-of things will we be doing in browsers in a couple years? Do we really still want to treat offline as an edge case and resort to failing features, irritatingly empty templates, and panicky error messages?

The experience of using a website or app when offline should be a lot better, less frustrating, and more empowering. We need the UX equivalent of responsive web design: a strong catalog of guides and patterns for a disconnected, multi-device world.

The connectivity lifecycle

Most web apps have two connectivity-related points of failure: client push and client pull/server push. Depending on what your app does, you might want to

  • communicate or explicitly hide the connectivity state and its changes (for instance, a chat client would inform users that any new messages typed are not sent immediately);
  • enable client-side creation and editing features even when offline, and reassure users that their data is safe and will eventually make it to the server (think of a photo sharing app that lets you take and post pictures under any circumstances); and
  • disable, modify, or possibly even hide features that cannot work offline, instead of letting people fail at using them (imagine a “send” button that knows when to turn into a “send later, when online” button).

Other issues arise when the connectivity state changes during use, e.g., the server wants to push a change to the object or view that the user is currently looking at, or even editing. This would require you to

  • notify the user that newer, possibly conflicting data is available; and
  • give the user a pleasant conflict-resolution tool, if necessary.

Let’s take a look at some real-world examples.

Problematic connectivity scenarios

Losing local data

Going offline while using Google Docs in a browser other than Chrome can be quite frustrating: you can’t edit your document. And while reading is still possible, copying parts of it isn’t. You can’t do anything with your text or spreadsheet—not even copy it to another program to continue working there. And yet, this is actually an improvement over past versions, where a large overlay would notify you of the offline state and prevent you from even seeing your work.

This is a common occurrence in both native and web apps: data you’ve only just accessed suddenly becomes unavailable when you lose your connection. If possible, apps should retain their last state and make their data available, even if it can’t be modified. This requires keeping local data to fall back to if the server can’t be reached, so your users are never stranded with an empty app.

Treating offline like an error

Stop treating a lack of connectivity like an error. Your app should be able to handle disconnections and get on with business as gracefully as possible. Don’t show views you can’t fill with data, and make sure error messages hit the right tone. Take Instagram: when a person can’t post a photo, Instagram calls it a failure—instead of reassuring the user that the image isn’t lost, it’s just going to be posted later. No big deal. You might even want to reword your interface depending on the app’s connection state, such as turning “save” into “save locally.”

You might sometimes need to block whole features completely, but more often, you won’t need to. For example:

  • If you can’t update a feed, show the old feed and a corresponding message. Don’t throw out the old data, then attempt to fetch the new data, fail, and end up with an empty, useless view.
  • If your app lets users create data locally, let them do so, and inform them it will be saved and sent later. Optionally, ping them for confirmation before you do send it. Again, Instagram comes to mind: it knows where a photo was taken, but, when offline, can’t ask Foursquare what the place is called. Instagram could, however, ask users to come back to a picture and pick the Foursquare location once they’re online.

Handling conflicts

If your app offers collaborative editing or some other form of simultaneous use on multiple devices, you will likely create conflicting versions of objects at some point. We can’t prevent this, but we can provide easily usable conflict-resolution UIs for people who might not even understand what a sync conflict is.

Take Evernote, whose business is heavily based on syncing notes: conflicts are resolved by simply concatenating both versions of the note. On anything longer than a couple of lines, this requires an inordinate amount of cognitive effort and subsequent editing.

Draft, on the other hand, has managed to make conflict resolution between collaborators simple and beautiful. It shows both versions and their differences in three separate columns, and each difference has an “accept” and an “ignore” button. Intuitive and visually appealing conflict resolution, at least for text, is definitely possible.

Detailed change-by-change resolution isn’t always necessary. In many cases you just need to provide a nice interface for highlighting differences and allowing the user to choose which version wins in this specific conflict.

There are other types of conflicts awaiting us, however, and many of them won’t be text based: disputed map marker positions, bar chart colors, lines in a drawing, and endless other things we haven’t even thought of yet.

But not all technical problems need technical solutions. Consider two waiters with wireless ordering devices in a large, multi-story restaurant. One is connected to the restaurant’s server. The other is on the very top floor, where his connection fails temporarily. Both wait tables that order the same bottle of rare, expensive wine. The offline waiter’s device cannot know about this conflict. What it can do, however, is be aware of the risk of conflict (low stock number, its own offline state) and advise the waiter to give an appropriate reply to the table (“Oh, exquisite choice. Let me see if that’s still available”).

Preempting users’ needs

In some cases, apps can preemptively take low-overhead action to give users a better experience later. When Google Maps detects I’m on wifi in a different country than usual, it could quickly cache my surroundings for the likely case of later offline or roaming use.

In many cases, however, content is too large to preemptively cache it—for example, a video from a news site. In these cases, users must make the explicit decision to locally sync, which would require them to download the video to their device and view it in a different application. Any context that video had online—like related information or relevant comment threads—is now lost, as is the opportunity for users themselves to comment.

Refreshing chronological data

All of these examples were client push, but there’s the server push aspect as well: what can we do when the server updates a user’s active view, and pushes data that can’t conveniently be added to the top of a list? Chronological data often causes this problem.

For example, if you use iMessage on several devices, messages are sometimes displayed out of chronological order when syncing. iMessage could sort them in the correct order—they are timestamped, after all—but instead it shows them in the order in which they arrived on the device. This makes them highly noticeable, but is also terribly confusing.

Imagine the more intuitive way of doing it: messages are always shown in chronological order, regardless of when they arrive. This sounds more sensible at first, but means you may have to scroll back in time to read a message that just arrived, because it was sent in response to something much older. Worse, you might not even notice it, since it pops into existence somewhere you’re probably not looking.

If you display data chronologically and the sequence of the data itself is meaningful, like in a chat (as opposed to email, which can be threaded), offline capabilities pose a problem: the most recently transmitted data is not necessarily the newest, and may therefore appear somewhere users won’t expect it. You could maintain context and sequence, but your interface also needs to let users know where in time the new content is.

Preparing for diverse data types

Many of these examples are text based, and even if they aren’t (like a map marker), some of them could conceivably have a text-based helper (like a list of map markers next to the map), which can simplify sync-related updates and notifications.

However, we know the amount, diversity and complexity of web applications will continue to increase, as will the types of data that are handled by their users. Some will be collaborative, most will be usable on multiple devices, and many will introduce new and exciting syncing issues. It makes sense to study them, and to develop a common vocabulary for offline scenarios and their solutions.

Offliners Anonymous

As we started asking developers from all over the world about these issues, we were surprised at how many people suddenly opened up about their tales of offline woe—realizing they’d had similar problems in the past, but never spoken to others about them. Most battled it out alone, gave up, or put it off, but all secretly wished they had somewhere to turn for offline app advice.

We don’t need to be anonymous, though. We can look to John Allsopp’s call, 13 years ago, to embrace the web as a fluid medium full of unknowns, and to “accept the ebb and flow of things.” Today we realize this extends beyond screen sizes and aspect ratios, feature support and rendering implementations, and holds true even for our work’s very connection to the web itself.

In this even more fluid and somewhat more daunting reality, we’ll all need each other’s help. We should make sure that we, and those who follow us, are equipped with reliable tools and patterns for the uncertainties of the increasingly mobile world—both for the sake of our users and for our own. Web development is complicated enough without wasting extra time reinventing wheels.

To help each other and future generations of designers, developers, and user interface experts, we are inviting you to join the discussion at offlinefirst.org. Our eventual goal is to create an offline handbook that includes UX patterns and anti-patterns, technology options, and research on user’s mental models—creating a repository of knowledge to draw from and contribute to, so our collective efforts and experiences don’t go to waste.

For now, we need to hear from you: about your experiences in this field, your knowledge of tools, your tips and tricks, or even just your challenges. Solving them won’t be easy, but it will improve our users’ experiences—wherever and whenever they need our services. Isn’t that why we’re here?

Gå till webbsidan »

FontFonter replaced by WebFonter

What would The New York Times look like set in FF Dora? Or Kickstarter in FF Mark?

A few years ago, we in collaboration with Tim Ahrens and FontShop created FontFonter as the first free tool to allow anyone to try and preview webfonts on any website.

With the completely new and more flexible WebFonter, you can now try and test Web FontFonts together with the 15,000+ webfonts available from FontShop.com in any existing site. You can replace headline or body text, specific fonts, or, using custom CSS selectors, anything you want with a typeface of your choosing.

FontFonter becomes Webfonter

WebFonter can be used during the design and development process – a critical time for font choice. The target website does not need to be publicly accessible in order to test-drive webfonts. This hugely important feature marries well with the current web design trend towards designing directly in the browser.

Available for free as a Chrome extension, browser bookmarklet or by entering a URL directly at webfonter.fontshop.com, this new tool will succeed FontFonter to make the web design process even better and as seamless as possible.

Gå till webbsidan »

Organize that Sass!

One of the many beauties of working with Sass is how easy it is to get organized. In the past, importing different CSS files wasn’t good practice and in fact made for more HTTP requests. With Sass, you can have many different partials which allow you to isolate styles in a logical way.

What is a partial? The Sass Documentation explains it pretty well:

If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file.

Organizing Sass files in this way, then allows you to create a sort of “table of contents” with a global.scss. I create about 13 partials; one for forms, icons, type, mixins, images, etc. Each partial has only the styles that belong, making styles easily findable.

stylesheets/
  _bits.scss
  _forms.scss
  _icons.scss
  _images.scss
  _mixins.scss
  _type.scss

Once you’ve created your files, you then import them into your master stylesheet. I like putting comments to remember what each partial is doing.

/*
VARIABLES
---------------
Setting up variables. Bringing in Colors and Spacing.
--------------- */

@import "bits";

/*
BASE STYLES
---------------
Setting up the base. Bringing in Type, Images, Forms, and Icons.
--------------- */

@import "type";
@import "images";
@import "forms";
@import "icons";

Organizing yourself like this can be difficult to adopt at first, but I can’t tell you how much time I’ve saved. On large projects, knowing where to look is half the battle. Gone are the days of 3000 line stylesheets. Instead we can work in small, specific, and more importantly, manageable files.

Gå till webbsidan »

This Week in Fonts

A geometric sans from Positype, a contemporary grotesk by Josh Finklea, a carefree sans from Kyle Wayne Benson, a bold brush script by Fenotype, a lively face from Fontsmith, a hand drawn family by PintassilgoPrints, a friendly sans from FaceType, and a happy script by Wiescher Design.

Positype: Clear Sans

Designed by Neil Summerour

Clear Sans is a rational geometric sans serif — clean, geometric and precise.

Incubator: Post Grotesk

Designed by Josh Finklea

A contemporary version of the traditional grotesk sans serif. Post Grotesk reduces the typical rigidness of a grotesk through subtle additions of personality and uniqueness.

Kyle Wayne Benson: Tide Sans

Designed by Kyle Benson

Tide Sans’ fresh, carefree, look makes you almost forget that you’re staring at a monitor and not on the beach.

Fenotype: No. Seven

Designed by Emil Karl Bertell

No. Seven is a bold brush style script family of three weights.

Fontsmith: FS Matthew

Designed by Jason Smith

A clear, stylish and structured sans serif with swooping curves of openness which create a lively, flavourful character.

PintassilgoPrints: Undersong

Designed by Ricardo Marcin & Erica Jung

Undersong brings 13 fancy hand drawn stackable fonts which can be combined in many, many tasty ways.

FaceType: Adria Grotesk

Designed by Marcus Sterz

Adria Grotesk is a friendly sans serif that comes in 7 weights & charming upright italics.

Wiescher Design: Felicità

Designed by Gert Wiescher

Felicità was designed with happiness in mind.



Sponsored by H&FJ.

This Week in Fonts

Gå till webbsidan »

Drawing Line

In the spring of 2012, Stefania Malmsten became the new Creative Director of Swedish fashion & culture magazine Rodeo. Stefania was living in New York at the time, working with Swedish and American clients from the collaborative workspace Studiomates in Dumbo, Brooklyn. She had decided to move back to Sweden where she had started her career with designing iconic magazines like Pop and Bibel.

Stefania is known for the attention to typography in her design work:

“I’m very passionate about photography and I’m very passionate about typography. I never wanted to choose between being a graphic designer and an art director and that’s why I love working with magazines and titles for film. Working with Göran on this project has been very luxurious, creating almost like a main character for the magazine.”

Line Passion

For the redesign of Rodeo Magazine Stefania chose Lyon and Benton Sans, two stylish yet traditional text faces. In contrast, she needed something more expressive for headlines, drop caps and graphic elements.

“I created a strict 12 column grid and nice legible styles for the main typography but I felt I needed something to interfere with this. Rodeo wanted to keep it’s big format (245 x 330 mm) and there was something about these big pages… I got this idea of a line that went through the whole magazine, like someone had been writing with a thin pen over the grid system.”

To explain her ideas, she made a mood board which became the creative brief for the typeface. The plan was to create a monoline script, but definitely not a traditional one.

Brief

Monoline letters, Arabic shapes, scribble, graffiti & tags, lettering, swashes, and different types of handwriting — all of this became inspiration for the new Rodeo Magazine typeface.

Line ornament

When the project started Göran Söderström was on parental leave and had limited time to work with the project, but this was a rare opportunity he couldn’t pass up. Göran explains:

“I’ve always admired designers and art directors who have the courage and vision to not settle for existing type and instead work towards something new. This is quite uncommon in Sweden, but suddenly it happened.”

Göran jumped at the chance to work with Stefania, whose work he holds in high regard. In the beginning he received photo updates with inspiration Stefania had found on the streets of New York.

Inspiration from the streets of New York.

Inspiration from the streets of New York.

After some time Göran responded with some sketches he thought could work. Stefania, who was still in New York, replied with more sketches and comments — the collaboration was in motion.

Sketch

One of Göran’s first drawings.
Sketch

Swashes had to look different from traditional script typefaces. Stefania made this and it became a point of departure for more.
Sketch

Sketch for the type composition on the cover.
Rodeo Magazine

Testing how thin the lines should be.
Rodeo Magazine

The result on the printed magazine.
Rodeo Magazine

Inside the first issue.

This project needed a font editor where the letters could be drawn with open contours (rather than closed shapes) and with a possibility to test different line thickness live while editing. The new font editor Glyphs had a function that could work but it was not behaving quite like Göran wanted. Amazingly, Georg Seifert (the inventor of Glyphs) added the missing functionality in a matter of days and suddenly the whole project became more concrete. Now letters could be drawn with just a single stroke and exported with varying stroke weight.

Stroke weights in Glyphs

Left: open contours. Right: closed.
Stroke weights in Glyphs

Glyphs made it possible to draw with just a single stroke.

The letter P

Every idea was tested, but somewhere the line had to be drawn; was it supposed to be a typeface or a set of illustrations? Naming this typeface was also bit tricky, but in the end it was named after what it was – lines.

Stroke weights combined

The formula.

Line comes in 5 super thin styles. With the formula 100, 65, 40, 25, 20 it’s easy to create compositions with same stroke weight across different point sizes. This was also a feature from Rodeo. Stefania was working with three styles in three different sizes, looking as if they were coming from the same pen.

Stroke weights combined

The 5 styles in Line.

We deliberately avoided making an OpenType showcase out of this font. There’s an exquisite joy in unpacking a new font, similar to that of a Lego set. Rather than large, extravagant glyphs, the final typeface consists of a basic character set with some alternate letters, plus a large number of modular embellishments which attach to letters in different ways. The embellishments (or krussiduller in Swedish) are perfect for starting or finishing words, and some are flexible enough to do both. And just like the possibilities with Legos, this brings huge variation to the typeface.

Embellishments

Rather than hundreds of alternate letters, these are simply kerning pairs.
Four different s

How alternate versions of ‘s’ connect to ‘a’.
Four different s

Lowercase h, m and n also have “normal” versions (stylistic set 04).

Line

Letters from Sweden has a new website in the works and Line will be available from our new webshop very soon. Until then you can send us an email if you’re interested in licensing Line for desktop, web or apps.

Follow us on Twitter, Facebook or signup for our Newsletter to stay updated.

Line

Stefania Malmsten is an art director and a graphic designer with clients mainly in the fields of art, fashion and film. She was one of the founders of Pop and Bibel magazines in Sweden and is a former art director at Vogue Hommes International in Paris. Stefania Malmsten received The Berling Prize, Swedens most prestigious graphic design-prize, for 2006. On the fourth of July 2013 Stefania founded the new design studio Malmsten Hellberg together with designer Ulrika Hellberg. Stefania is currently the Creative Director at Rodeo Magazine in Sweden.

Göran Söderström is the founder of Letters from Sweden and has been designing type since 2006. He is self taught and has previously published his work through Psy/Ops, Fountain and Font­Font. At FamiljenPangea Göran has designed custom typefaces for ATG, ICA, LO, SEB, WyWallet and others. His commercial typefaces are used pretty much all over the world by companies like Red Bull, Pitchfork, The New Republic, SVT and Expressen. One of Göran’s typefaces has been carved in stone.

Text, photos and illustrations: Copyright © 2013 Stefania Malmsten & Göran Söderström. All rights reserved. No portion of this article may be reproduced without the authors written approval.



Sponsored by H&FJ.

Drawing Line

Gå till webbsidan »

The 2014 Letterform Archive Calendar: Historical Work, New Type

Rob Saunders has spent most of his life in publishing. He founded Picture Book Studio in 1981 which published dozens of award-winning children’s books from authors like Eric Carle and Jane Goodall. He ran Alphabet Press, producing titles by or about graphic artists like Friedrich Neugebauer, Hans Eduard Meier, Lance Hidy, and David Lance Goines. Saunders’ career veered into designing, teaching, and consulting, but he has never diverted from one pursuit: collecting. For over 35 years, Saunders has amassed an astounding assortment of historically significant design books and periodicals, graphic arts ephemera, and specimens of 20th-century metal typefaces.

This photo captures just a slice of Rob Saunders’ book and ephemera collection, which is the basis of the Letterform Archive.

This photo captures just a small portion of Rob Saunders’ book and ephemera collection,
which is the basis of the Letterform Archive.

I met Saunders earlier this year through our mutual friend, Tânia Raposo, who was helping to organize the material. I gladly accepted his offer to visit the collection. The breadth and depth of what he had to show was overwhelming. He would ask me what I wanted to see, and for every designer or foundry or typeface I tossed out, he delivered the goods. I returned many times and each visit was a pleasure and education. I always left with only one regret: that the stuff wasn’t accessible to more students, researchers, professional designers, all other lovers of type and lettering.

Saunders feels the same way. While most private collections are limited to their owners and a few friends, Saunders has committed to sharing his collection in ways that even most libraries and museums cannot. It was a few months ago that ideas about digital publication began to form. Saunders explains:

“I was somewhat clueless about what to do with the collection until I began to understand the breadth of the interested constituencies and the weaknesses of traditional institutions in meeting their needs. The other tipping points were two very recent technical developments:

  1. The advent of affordable photographic equipment capable of capturing printed material in high fidelity.
  2. The advent of broadband connections, larger image file sizes (Twitter substantially increased their image size at the beginning of August, as one example), and Retina displays. Many more people can now access and view high res captures.”

So Saunders recruited the help of digital reproduction expert E.M. Ginger, designer Tânia Raposo, printing enthusiast and bookbinder Nicky Yeager, type designer Sun Helen Isdahl Kalvenes, and book historian Simran Thadani to catalog and produce a digital representation of his collection. The Letterform Archive was born. Its first steps into the public are a web gallery of high resolution captures from the collection and a 2014 calendar that features 12 rare masterworks and 232 birthdays of notable personalities in the letter arts.

A 1964 book cover by Ben Shahn graces the month of October in the 2014 Letterform Archive Calendar.

A 1964 book cover by Ben Shahn graces the month of October in the 2014 Letterform Archive Calendar.

Start the year off right with A M Cassandre’s 1956 poster for Foire de Paris.

Start the year off right with A M Cassandre’s 1956 poster for Foire de Paris.

In August, a sample by Paul Renner from the first specimen of Futura.

In August, a sample by Paul Renner from the first specimen of Futura.

For the calendar Saunders wanted to accompany the 12 main images with newly released typefaces. He asked Isdahl Kalvenes and me to suggest candidates. I liked his approach of contrasting the historical pieces with contemporary type. It represents a continuum of lettering and typographic design and demonstrates that the Letterform Archive is not just about ogling incredible old work, but also supporting new designers. Here’s how Saunders describes the selection criteria:

“The aesthetic goal was to find a good complement to the artwork, not necessarily match it. Rudy first suggested Oakland, the pixelated font featured in his press sheet, but I pushed him to go another way. Obviously we were also looking for recent, excellent, underexposed faces.”

For October, the Letterform Archive Calendar features an uncut press sheet from Emigre magazine by Rudy VanderLans. The month’s accompanying dates and birthdays will be set in Program by VanderLans’ partner, Zuzana Licko.

For October, the Letterform Archive Calendar features an uncut press sheet from Emigre magazine by Rudy VanderLans. The month’s accompanying dates and birthdays will be set in Program by VanderLans’ partner, Zuzana Licko.

With a couple exceptions, most of our selections also come from type designers or models that match the nationality of the featured artist. Of course, 12 typefaces are far too few to represent what’s happening in type right now, but I think our picks offer a nice slice of the best in contemporary type design. Here’s what we picked:

mislab-cassandre
Mislab

Mislab is by French designer Xavier Dupré, one of my favorite type makers, whose work for FontFont, Font Bureau, Emigre, and now Typofonderie represents some of the most characterful text faces of the 2000s. Xavier Dupré typefaces on Typographica.

london-johnston
London

There are already many reinterpretations of Edward Johnston’s design for the London Underground, but Henrik Kubel’s fresh take for London shows that the model is still worth exploring. Henrik Kubel typefaces on Typographica.

palmoares-meseguer
rumba cut-1

Laura Meseguer is a lettering artist and typeface designer from Barcelona whose 3-font Rumba (a Typographica favorite) explores the idea of typeface variations optimized for a specific range of sizes, but also degrees of expressiveness.

dwiggins-metro-nova
Metro Nova

All revivals of metal type are limited to some extent by the quality of the source material, the specific size chosen for digitization, the flawed interpretation of the designer, etc. Linotype’s digital rendition of Dwiggins’ Metro No. 2 is limited even more than most because it only represents a narrow shadow of the original work. It misses the funky glyphs from Metro No. 1. Although I admire Akira Kobayashi’s Metro Office, it’s a completely different design, so for years I’ve been wishing someone would bring back the funky shapes of Metro’s first version. Toshi Omagari did that (and more) with Metro Nova.

bradley-shift
Shift

It was a little difficult to imagine something contemporary that could accompany Will Bradley’s distinctly turn-of-the-century feel. But Jeremy Mickel’s Shift (a Typographica favorite) felt just right. Not only is it inspired by type of the same era, but Shift shares the warmth, ruggedness, and slightly off-kilter personality of Bradley’s work.

renner-mark
FF Mark

Any “Germanetric Sans” owes something to Futura, so it’s obvious to pair FF Mark with Paul Renner. But this FontFont collaboration reaches back to other German geometric roots including Erbar and Neuzeit Grotesk, exploring territory that is surprisingly uncharted within an increasingly crowded category.

shahn-turnip
Turnip

Ben Shahn’s lettering — especially the stuff on the book cover featured in the calendar — is rough and square, with counter shapes that often contradict the outlines. The blatantly obvious typeface pairing would be FF Folk, the 2003 fontification of Shahn’s style, but David Jonathan RossTurnip (a Typographica favorite) is a newer release with much more subtle and interesting similarities.

vanderlans-program
Program

There is no other new typeface more fitting to accompany Rudy VanderLans’ work than the most recent release of his partner in Emigre (and life), Zuzana Licko. Program has a much more refined finish than the grungy bitmappery of the early Emigre piece shown in the calendar, but the rule-bending is still there: Program “mixes different structures, stem endings, and weight distributions not usually employed in a single family of fonts”.

ladislav-ladislav
Ladislav

Ladislav is Czech designer Tomáš Brousil’s tribute to the modular character of Sutnar’s work. How could we not pick it? Tomáš Brousil’s typefaces on Typographica.

marinetti-enquire
Enquire

Filippo Marinetti was an Italian poet and founder of Futurism, a movement that broke free from the conventions of art. Antonio Cavedoni is an Italian designer and founder of the fantastic Enquire, a typeface that breaks free from the conventions of contrast, putting the weight where it isn’t supposed to be. Cavedoni’s as-yet-unpublished typeface was initiated while earning his MA in Typeface Design at the University of Reading. I love it. I’m glad he authorized use of this pre-release version for the calendar.

The other two typefaces can’t be revealed yet, but I’ll add them here as soon as they’re announced.

You can pre-order the 2014 Letterform Archive Calendar by backing the Kickstarter campaign which ends on Monday, November 18. The $10,000 goal is just enough to produce a reasonable run and ship it at break-even cost. Any earnings beyond that will support the programs of the Letterform Archive, including sharing more of this rare work with the world.

Letterform Archive 2014 Calendar Gameboard as of 11 08

Also, for a bit of fun during the fundraising period, Saunders is running a trivia game, challenging players to guess the creators of the artwork he posts to Twitter and Facebook. It’s a multiple choice test: all the answers — the personalities whose birthdays are listed in the calendar — are shown on the game board. It’s also a demonstration of the image quality standards set for the digital incarnation of the archive: the zoomed-in and cropped details show paper texture, halftones, ink squeeze, brush strokes, even compass pinholes. These are not your standard scans. These are revealing reproductions that inform and enchant.

Gå till webbsidan »

The 2014 Letterform Archive Calendar: Historical Work, New Type

Rob Saunders has spent most of his life in publishing. He founded Picture Book Studio in 1981 which published dozens of award-winning children’s books from authors like Eric Carle and Jane Goodall. He ran Alphabet Press, producing titles by or about graphic artists like Friedrich Neugebauer, Hans Eduard Meier, Lance Hidy, and David Lance Goines. Saunders’ career veered into designing, teaching, and consulting, but he has never diverted from one pursuit: collecting. For over 35 years, Saunders has amassed an astounding assortment of historically significant design books and periodicals, graphic arts ephemera, and specimens of 20th-century metal typefaces.

This photo captures just a slice of Rob Saunders’ book and ephemera collection, which is the basis of the Letterform Archive.

This photo captures just a small portion of Rob Saunders’ book and ephemera collection,
which is the basis of the Letterform Archive.

I met Saunders earlier this year through our mutual friend, Tânia Raposo, who was helping to organize the material. I gladly accepted his offer to visit the collection. The breadth and depth of what he had to show was overwhelming. He would ask me what I wanted to see, and for every designer or foundry or typeface I tossed out, he delivered the goods. I returned many times and each visit was a pleasure and education. I always left with only one regret: that the stuff wasn’t accessible to more students, researchers, professional designers, all other lovers of type and lettering.

Saunders feels the same way. While most private collections are limited to their owners and a few friends, Saunders has committed to sharing his collection in ways that even most libraries and museums cannot. It was a few months ago that ideas about digital publication began to form. Saunders explains:

“I was somewhat clueless about what to do with the collection until I began to understand the breadth of the interested constituencies and the weaknesses of traditional institutions in meeting their needs. The other tipping points were two very recent technical developments:

  1. The advent of affordable photographic equipment capable of capturing printed material in high fidelity.
  2. The advent of broadband connections, larger image file sizes (Twitter substantially increased their image size at the beginning of August, as one example), and Retina displays. Many more people can now access and view high res captures.”

So Saunders recruited the help of digital reproduction expert E.M. Ginger, designer Tânia Raposo, printing enthusiast and bookbinder Nicky Yeager, type designer Sun Helen Isdahl Kalvenes, and book historian Simran Thadani to catalog and produce a digital representation of his collection. The Letterform Archive was born. Its first steps into the public are a web gallery of high resolution captures from the collection and a 2014 calendar that features 12 rare masterworks and 232 birthdays of notable personalities in the letter arts.

A 1964 book cover by Ben Shahn graces the month of October in the 2014 Letterform Archive Calendar.

A 1964 book cover by Ben Shahn graces the month of October in the 2014 Letterform Archive Calendar.

Start the year off right with A M Cassandre’s 1956 poster for Foire de Paris.

Start the year off right with A M Cassandre’s 1956 poster for Foire de Paris.

In August, a sample by Paul Renner from the first specimen of Futura.

In August, a sample by Paul Renner from the first specimen of Futura.

For the calendar Saunders wanted to accompany the 12 main images with newly released typefaces. He asked Isdahl Kalvenes and me to suggest candidates. I liked his approach of contrasting the historical pieces with contemporary type. It represents a continuum of lettering and typographic design and demonstrates that the Letterform Archive is not just about ogling incredible old work, but also supporting new designers. Here’s how Saunders describes the selection criteria:

“The aesthetic goal was to find a good complement to the artwork, not necessarily match it. Rudy first suggested Oakland, the pixelated font featured in his press sheet, but I pushed him to go another way. Obviously we were also looking for recent, excellent, underexposed faces.”

For October, the Letterform Archive Calendar features an uncut press sheet from Emigre magazine by Rudy VanderLans. The month’s accompanying dates and birthdays will be set in Program by VanderLans’ partner, Zuzana Licko.

For October, the Letterform Archive Calendar features an uncut press sheet from Emigre magazine by Rudy VanderLans. The month’s accompanying dates and birthdays will be set in Program by VanderLans’ partner, Zuzana Licko.

With a couple exceptions, most of our selections also come from type designers or models that match the nationality of the featured artist. Of course, 12 typefaces are far too few to represent what’s happening in type right now, but I think our picks offer a nice slice of the best in contemporary type design. Here’s what we picked:

mislab-cassandre
Mislab

Mislab is by French designer Xavier Dupré, one of my favorite type makers, whose work for FontFont, Font Bureau, Emigre, and now Typofonderie represents some of the most characterful text faces of the 2000s. Xavier Dupré typefaces on Typographica.

london-johnston
London

There are already many reinterpretations of Edward Johnston’s design for the London Underground, but Henrik Kubel’s fresh take for London shows that the model is still worth exploring. Henrik Kubel typefaces on Typographica.

palmoares-meseguer
rumba cut-1

Laura Meseguer is a lettering artist and typeface designer from Barcelona whose 3-font Rumba (a Typographica favorite) explores the idea of typeface variations optimized for a specific range of sizes, but also degrees of expressiveness.

dwiggins-metro-nova
Metro Nova

All revivals of metal type are limited to some extent by the quality of the source material, the specific size chosen for digitization, the flawed interpretation of the designer, etc. Linotype’s digital rendition of Dwiggins’ Metro No. 2 is limited even more than most because it only represents a narrow shadow of the original work. It misses the funky glyphs from Metro No. 1. Although I admire Akira Kobayashi’s Metro Office, it’s a completely different design, so for years I’ve been wishing someone would bring back the funky shapes of Metro’s first version. Toshi Omagari did that (and more) with Metro Nova.

bradley-shift
Shift

It was a little difficult to imagine something contemporary that could accompany Will Bradley’s distinctly turn-of-the-century feel. But Jeremy Mickel’s Shift (a Typographica favorite) felt just right. Not only is it inspired by type of the same era, but Shift shares the warmth, ruggedness, and slightly off-kilter personality of Bradley’s work.

renner-mark
FF Mark

Any “Germanetric Sans” owes something to Futura, so it’s obvious to pair FF Mark with Paul Renner. But this FontFont collaboration reaches back to other German geometric roots including Erbar and Neuzeit Grotesk, exploring territory that is surprisingly uncharted within an increasingly crowded category.

shahn-turnip
Turnip

Ben Shahn’s lettering — especially the stuff on the book cover featured in the calendar — is rough and square, with counter shapes that often contradict the outlines. The blatantly obvious typeface pairing would be FF Folk, the 2003 fontification of Shahn’s style, but David Jonathan RossTurnip (a Typographica favorite) is a newer release with much more subtle and interesting similarities.

vanderlans-program
Program

There is no other new typeface more fitting to accompany Rudy VanderLans’ work than the most recent release of his partner in Emigre (and life), Zuzana Licko. Program has a much more refined finish than the grungy bitmappery of the early Emigre piece shown in the calendar, but the rule-bending is still there: Program “mixes different structures, stem endings, and weight distributions not usually employed in a single family of fonts”.

ladislav-ladislav
Ladislav

Ladislav is Czech designer Tomáš Brousil’s tribute to the modular character of Sutnar’s work. How could we not pick it? Tomáš Brousil’s typefaces on Typographica.

marinetti-enquire
Enquire

Filippo Marinetti was an Italian poet and founder of Futurism, a movement that broke free from the conventions of art. Antonio Cavedoni is an Italian designer and founder of the fantastic Enquire, a typeface that breaks free from the conventions of contrast, putting the weight where it isn’t supposed to be. Cavedoni’s as-yet-unpublished typeface was initiated while earning his MA in Typeface Design at the University of Reading. I love it. I’m glad he authorized use of this pre-release version for the calendar.

The other two typefaces can’t be revealed yet, but I’ll add them here as soon as they’re announced.

You can pre-order the 2014 Letterform Archive Calendar by backing the Kickstarter campaign which ends on Monday, November 18. The $10,000 goal is just enough to produce a reasonable run and ship it at break-even cost. Any earnings beyond that will support the programs of the Letterform Archive, including sharing more of this rare work with the world.

Letterform Archive 2014 Calendar Gameboard as of 11 08

Also, for a bit of fun during the fundraising period, Saunders is running a trivia game, challenging players to guess the creators of the artwork he posts to Twitter and Facebook. It’s a multiple choice test: all the answers — the personalities whose birthdays are listed in the calendar — are shown on the game board. It’s also a demonstration of the image quality standards set for the digital incarnation of the archive: the zoomed-in and cropped details show paper texture, halftones, ink squeeze, brush strokes, even compass pinholes. These are not your standard scans. These are revealing reproductions that inform and enchant.

Gå till webbsidan »