BLOG

News and information related to Webtype, including new fonts, technology, and general observations on the state of online typography.

Shift from MCKL

We are delighted to welcome MCKL as a new type foundry on Webtype. The Minneapolis-based studio, run by Jeremy Mickel, offers retail fonts, custom typeface design, lettering, and logo development. We’re looking forward to a number of unique, eye-catching designs from MCKL, of which the first one is Shift:

Shift specimen2

No, it’s not monospaced, although it hints at the aesthetic. Shift is inspired by American slab-serifs from the late 19th century. The lighter weights take on the personality of a typewriter face, with flared terminals and prominent pointy serifs. Yet there is a notable change from the gradual transition between Extra Light and Medium to the beefier Bold and Black. The heavier styles act more like an Egyptian for titling use, with smaller counters and only thin spaces between characters.

Shift’s unique flavor makes it a great choice for a solo appearance on your website when all you need is one strong typeface. But it also plays well with other fonts — as body copy in sizes down to 14px or as a display face in the spotlight. The popular lodging website Airbnb uses Shift in both ways to great effect: on its own on their annual report page, and in combination with Helvetica on the main site.

air3
air1
air2

Try Shift with an American gothic or a restrained sans-serif, for instance Scout RE, Titling Gothic or Marat Sans. You can also customize its flavor by using Shift’s stylistic alternate characters (supported in OpenType-savvy browsers such as IE10+, FireFox 4+, or Chrome 22+.)

alternates

Alternate numerals for extra charm in stylistic set 1 (ss01), letters with bottom serif in ss02, and simple “schoolbook” forms for a, g, and y in ss03.

Here’s a sample set of CSS-rules to access the stylistic sets, for instance ss01:

-moz-font-feature-settings: "ss01=1";
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
font-feature-settings: "ss01" 1;

 

As with all fonts on Webtype, Shift can be tested free of charge for 30 days. For more details, see the Shift webfont page.


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.


Helsinki from LudwigType

Helsinki specimen

Our second release from Berlin-based LudwigType is the sans-serif Helsinki, a family inspired by Finnish road signs. Ludwig Übele designed the initial first style during a long winter in the North of Finland in 1998. Like other classic wayfinding typefaces such as Highway Gothic or DIN, the Finnish signs feature rather crude, constructed letterforms. Attracted by its unaffected charm, Übele developed the font into a family of seven weights, balancing out its kinks but maintaining the vernacular nature. In 2013 he expanded the character set, revised the weight range and added italics.

Helsinki is a typeface of narrow proportions. The light styles are optimized for text sizes down to 10px, while the bold and black weights are geared for high-octane headlines of a contemporary spirit. It suits retail and editorial sites, as well as user interfaces (as in the celebrated weather app Partly Cloudy). Helsinki is a great alternative to typefaces like DIN or Interstate. If you want to combine it with a Serif, try the sturdy Freight Micro, Ibis RE or Proforma.

Helsinki use

For OpenType-savvy browsers such as Internet Explorer 10+, Chrome 22+, and Firefox 4+, you can make use of Helsinki’s stylistic alternates — for instance a “potbelly-shaped” a, double-story g, a J with vertical terminal, and a Q with simplified tail (Stylistic Set 01). Also available are a tabular 1 with serif, and a slashed 0. These can be accessed in CSS3 via feature-settings like in this sample set of CSS-rules:

-moz-font-feature-settings: "ss01=1, tnum=1, zero=1";
-moz-font-feature-settings: "ss01" 1, "tnum" 1, "zero" 1;
-ms-font-feature-settings: "ss01" 1, "tnum" 1, "zero" 1;
-webkit-font-feature-settings: "ss01" 1, "tnum" 1, "zero" 1;
-o-font-feature-settings: ""ss01" 1, "tnum" 1, "zero" 1;
font-feature-settings: "ss01" 1, "tnum" 1, "zero" 1;
Feature-settings: Stylistic Set 1 (ss01), Tabular Figures (tnum), Slashed-Zero (zero)

 

As with all fonts on Webtype, Helsinki can be tested free of charge for 30 days. For more details, see the Helsinki webfont page and make sure to pay LudwigType’s neat little demo site a visit to see the fonts in action.

Helsinki minisite


Brand Everywhere: REI

This is the third installment of our Brand Everywhere series highlighting excellent executions of typographic consistency across various kinds of media.

rei-seattle-ranger-station

For many campers, hikers, climbers, kayakers, runners, skiers, and other outdoors enthusiasts, Recreational Equipment, Inc. (REI) is the first stop in preparation for their next adventure. Founded in 1938, the Seattle-based company is one the most well-respected corporations in the world, due in large part to its unusual setup as a “consumer cooperative”, in which the customers own and run the show. It’s the largest such organization in the US, with over 5.1 million active members.

rei-store-member-sign

Under the helm of Creative Director Jason Sutherland, REI’s visual identity has grown as solid as is its reputation. The look is grounded in two strong, American-made typefaces: the bolder weights of Rockwell, which has long been part of the company’s identity, and more recently, Interstate, a straightforward, workaday sans that sits well atop REI’s heavy slab foundation. Clarendon is also part of the brand’s legacy, found on store exteriors and other branding.

Interstate was introduced to the brand a few years ago, with the goals of readability and utility in mind, but Sutherland also sought to build on REI’s unique qualities and heritage. “Because Interstate is a modern adaptation of the highway fonts developed from around REI’s founding era, it had what I was looking for in terms of readability, history, and authority,” Sutherland says. “In terms of quick read for headlines, nothing beats a font designed to be read from a speeding car! I also thought that the unconscious association with highway signs everywhere would encourage more spontaneous road trips of cars packed full of camping gear and good friends.”

Sutherland also reminds us of the diverse personalities that a typeface can reveal depending on how it’s set. “I liked the way Interstate balanced history with modernity, with those characteristics expressing themselves differently between uppercase and lowercase uses of the type.” This versatility manifests itself in Interstate’s various weights, as well. A loosely-spaced lowercase Regular can instantly evoke vintage road signs, while the hefty all-caps Black (as used on REI’s homepage and in the printed catalog below) is decisively modern, effectively promoting the latest helmet cam or hi-tech running shoe.

rei-catalog-shoes

Beyond typography, REI’s core branding elements include a refined and limited color palette and excellent nature photography, but another key component is the tone of their communication. Sutherland says his primary mission is to recreate the great experiences customers have in REI stores. “Because these experiences are based on person-to-person interactions, our tone is conversational, friendly, and imparting the knowledge of the outdoors. Language is very important to us.”

That sense of membership and community is echoed throughout the company’s materials, and even back to the stores themselves where the walls sometimes feature snapshots of members at play in the great outdoors.

Photo by Callison, the firm responsible for the SoHo, NYC store.

Photo by Callison, the firm responsible for the SoHo, NYC store.

rei-member-wall_REI-1164px

Despite the informal, scrapbook style of this display, the REI brand is still apparent. A deft touch of all-caps Interstate is all that’s needed. This balance of humanity and professionalism demonstrates the effort Sutherland and the designers at REI have put into their corporate identity.

Retail Signage & Displays

The REI retail experience is perhaps at its best at two of their landmark locations: the flagship in Seattle, and the historical restoration that recently opened its doors in SoHo, New York. We stopped by these locations and took some photos that show how Interstate promotes, informs, and points the way throughout the stores.

rei-seattle-take-climb-to-next-level
rei-seattle-yogarei-store-clearance_REI-1164px
socks-product-tag_REI-1164px
rei-seattle-cashier

Print

REI prides itself not just on selling stuff, but also on providing guidance on the increasingly complex array of recreational gear. Product info sheets are available in the stores to help members make more informed purchase decisions. Their design naturally mirrors the look of the in-store displays, for a cohesive shopping experience that instills confidence in REI’s expertise.

product-info-sheet-2
And that sense of continuity holds for every printed piece in the store, including this credit card offer for members.
REI-Visa-2

REI doesn’t send a lot of direct mail (they are, after all, as environmentally conscious as retailers get), but when members receive their occasional catalogs the familiar typographic tone immediately reminds them of their last trip to the store. Color cues are cohesive too: in the REI brand vocabulary, red means “you’re going to save some money”. Just as red banners call out the clearance section in the retail space, catalogs (like the one below) with red accents highlight sales. Discounted percentages and prices are all set in crimson Interstate.

rei-fall-2013-sale-catalog
rei-fall-2013-sale-catalog2

Video

REI’s YouTube channel is replete with engaging coverage of their travel programs, product tips, member stories, and short company culture documentaries. Over the last year or so, the videos invariably use Interstate for titles and captions. The type is always white, with just enough subdued drop shadow to separate it from the background.

rei-video-adventures
rei-video-advice

Web

rei.com

REI.com is undergoing an iterative transformation to adopt all the elements of the branding guidelines. Until recently, implementing the corporate typefaces on the website was a complicated matter, requiring images or font replacement hacks. Webtype is helping to bring REI’s online presence in line with the rest of their identity by serving Interstate for homepage features and other headlines. Now that these bits of text are truly text — not images — they are much easier for the REI production team to edit and scale.

Note the green bar at the bottom of the main image, echoing the in-store displays. Even the “Clearance” label matches the retail store look.

Note the green bar at the bottom of the main image, echoing the in-store displays. Even the “Clearance” label matches the retail store look.

rei.com-hero-2

rei.com-product-list

Some of REI’s minisites are fully integrated with Webtype. The REI 1440 Project, a place for members to share photos of the outdoors, is a particularly eye-catching example. Webfonts are critical in this environment where the page needs to work at any size, all the way up to fullscreen.

rei-1440-project-1
rei-1440-project-2
rei-1440-project-7
rei-1440-project-6

The remarkable consistency throughout this broad range of material shows just how effective a strong typographic identity can be when it’s well defined and executed. With its direct and deliberate design approach, tempered by a sincere love of nature, REI makes us want to grab some gear and get outside.


Agency FB from Font Bureau

Agency Specimen

Font Bureau’s popular Agency FB series of rectangular sans-serif typefaces is now available for the web, exclusively from Webtype. The extensive family, designed by David Berlow, harks back to Morris Fuller Benton’s Agency Gothic for American Type Founders. First released in 1932, it was a single all-caps titling style of narrow proportions, accompanied by an outline version, to be used for headlines and advertising.

In 1990, Berlow saw potential in the squared forms of the narrow capitals for a wider range of application. He designed a lowercase and added a bold to produce the initial Agency FB family, which was an immediate hit. Sensing strengths that surpassed the original condensed styles, Font Bureau developed Agency into a major series comprising 25 styles of five weights in five widths.

Agency FB is well-suited as an incisive headline or display typeface in medium to large sizes, according to the particular weight and width. It combines well with strong or squarish serif typefaces like Ibis RE, or an all-purpose sans like Antenna RE.

As with all fonts on Webtype, Agency FB can be tested free of charge for 30 days. For more details, see the Agency FB webfont page.


Stainless from Font Bureau

Stainless specimen
Distinctly contemporary and robust — we are happy to now offer webfonts for Font Bureau’s popular type family Stainless.

Stainless started out in designer Cyrus Highsmith’s sketchbook where he was experimenting with the idea for a sans serif version of his slab serif Dispatch. As he drew strokes and counters, he realized that he had an original family with its own strong character, not just a partner to his Slab. The discreet geometry gives Stainless a reliable presence without feeling overly static or rigid. Wide open forms in letters like c, s, a, e aid readability in smaller sizes and emphasize the horizontal line. The fonts are optimized for use in sizes down to 14px.

Stainless styles

Stainless is available in compressed, condensed, normal width and extended, and in the weights Light, Regular, Bold and Black, each with Italics.

The ample choice between 32 styles in different widths and weights make Stainless perfectly equipped for branding, complex designs, editorial and display typography. While its serifed relative Dispatch is a great, obvious pair for Stainless, try combining it with other serifs like Prensa, Proforma or Rocky. To complement Stainless in very small sizes we’d suggest Scout RE, Antenna RE or Dispatch Mono.

Stainless, or any other typeface on Webtype can be tested free of charge for 30 days. For more details, see the Stainless webfont page.


Brand Everywhere: Myspace

In our continuing series, Brand Everywhere, we look at organizations who present a strong, seamless identity by standardizing their typography across all media. After our first case study on Ally Bank, today we switch gears to social networks, demonstrating the power of consistent typography in the relaunching of a well-known but reimagined brand, Myspace.

Myspace profile page

The new Myspace, designed by Josephmark, is unlike anything you remember from the infamous user-customizable disarray of the old social network. The new design approach could be considered more authoritarian/top-down, but results in a much cleaner, more sophisticated look. And there are still plenty of opportunities for users to customize pages, it’s just that now they’re offered within a clear structure and functional type.

In fact, the entire experience is driven in large part by typography. A broad variety of views and layouts are all anchored by a single type family, Benton Sans.

The new typographic look is obvious from the start, as Benton Sans welcomes new users and guides them through the process of creating a profile.

The new typographic look is obvious from the start, as Benton Sans welcomes new users and guides them through the process of creating a profile.

Mashable ran an in-depth interview with Josephmark CEO Ben Johnston and Creative Director Jess Huddart about the project, but we wanted to hear more about their approach to the type, of course, so here’s a quick Q&A with the firm:

Why did you select the typefaces? How do they support the brand?
We were heavily involved in selecting, refining and using the Benton Sans typeface. We were looking for a clean, modern, sophisticated font, but most importantly we were looking for something that aided the design, without overtaking it. So Benton Sans, being a fairly neutral font, was the front-runner from the beginning. Having a large family, with a variety of weights and availability of different languages also helped. This was partly why we decided against creating our own typeface.

The complex hierarchy of information on Myspace demands more than the standard regular and bold weights. The site is clarified through the use of variety of styles – from Thin and Light to Bold and Black.

The complex hierarchy of information on Myspace demands more than the standard regular and bold weights. Views are clarified through the use of a variety of styles — from Thin and Light, to Bold and Black.

How was the experience of licensing and implementing the fonts? Did you make any customizations to the typeface?
For such a massive site, licensing naturally took a bit longer to do. We worked with the guys at Webtype to make sure the font was completely web-optimised for both Windows and Mac, especially for sizes 14px and less. For a long time, designers have been limited by web-safe fonts, so we needed to cross-test on multiple platforms (from desktop to television and portable device) to ensure it was truly optimized for a universal audience.

Myspace’s new infographic views give musicians new insight into their fanbase. The clarity but subtle personality of Benton Sans shows, even in the figures.

Myspace’s new infographic views give musicians insight into their fan base. The clarity and subtle personality of Benton Sans is evident, even in the figures.

What other elements — such as color, structures, imagery, language — are key to the brand?
The new Myspace brand is exciting and raw, so we needed to design a platform that could complement this energy and immersiveness. We intentionally made the colour palette simple and neutral so that the emphasis is placed on the content, rather than the structure. During conception, the words “expansive”, “unconfined”, “free” and “full-screen” were used a lot. We wanted profiles to feel like blank canvases, where the user has the freedom and space to express themselves.

Big, bold type makes every search a more engaging experience.

Big, bold type makes every search a more engaging experience.

iPhone App

Myspace’s new look extends to their iOS app where Benton Sans is embedded and used exclusively throughout. The app not only offers a mobile-optimized view of the site but also tosses in the ability to create animated GIFs and listen to personalized radio stations.

myspace-app-content
myspace-app-prefs

Benton Sans replaces iOS’s standard Neue Helvetica for all UI elements, including the controls in the GIF animation creator.

Benton Sans replaces iOS’s standard Neue Helvetica for all UI elements — including content from the site, app preferences, and controls in the GIF animation creator.

TV Advertising

The identity type makes a couple of quick but significant appearances in the first TV commercials to air since the official Myspace debut. The raucous 30-second spots begin with “this is myspace” in the brand’s signature Benton Sans, and end with a list of Myspace URLs for the participants in the ad. These brief bookends are all one needs to associate the commercial with the new site. It’s a testament to the power of a comprehensive typographic brand.

myspace-ad

You can read more about the new Myspace design at Co.design and The Next Web. (Coincidentally, TNW launched a redesign using Benton Sans, too. No wonder they’re a fan.)


Marat and Marat Sans from LudwigType

We are happy to welcome our latest foundry partner Berlin-based LudwigType and designer Ludwig Übele to Webtype. The German type specialist honed his skills at the typeface design masters program at the Royal Academy of the Arts in the Netherlands. Now back in Germany, he designs typefaces for his own label, works on brand development, and collaborates with type design legend Georg Salden under the name Typemanufactur.

Marat Specimen

Our first releases from LudwigType are Marat and Marat Sans — an extensive type series of distinct personality. Marat was originally conceived as a magazine face but evolved into a comprehensive family for general use, combining the best features of all genres. While most letterforms and the swinging italics cite classic book faces, the strong serifs in letters like a, c, or s induce a vertical emphasis that allows the letterforms to become bold and striking (see Marat Fat). This makes Marat interesting for display use and body copy alike. Opening up counters and the moderate proportions contribute to good readability where space is limited.
Marat styles

Marat Sans, designed several years later, is not just a supporting sibling with the serifs chopped off, but a typeface with its own unique identity. It continues the dual personality of Marat — half Humanist, half Rational traits. Ink traps and basic structure hint at the seriffed partner but the design is more tamed down and regular. The x-height is slightly larger, the caps slightly narrower, the letterforms a bit more closed than in Marat, resulting in a cleaner, more adaptable typeface.

Marat Sans is available in nine finely graduated weights — three more than Marat — plus true italics, making it suitable for a very wide range of applications and sizes down to 10px in the lighter weights. Naturally Marat and Marat Sans make perfect pairings, but they also both combine well with other type families. How about Marat and Solitaire for instance, or Marat Sans with Proforma or Harriet?

Marat, Marat Sans, or any other typeface on Webtype can be tested free of charge for 30 days. For more details, see the Marat and Marat Sans webfont pages.


Scout and Scout RE from Font Bureau

Scout Specimen

Scout, our latest release from Font Bureau, is a fresh yet pleasantly familiar sans serif by Cyrus Highsmith. Originally drawn for the redesign of the magazine Entertainment Weekly, Highsmith found inspiration in early 20th century German grotesks such as Venus, DIN, or Cairoli and its doubles, which were ubiquitously popular between the 1910s and 1950s.

Unlike other early sans serifs and neo-grotesques, Scout is less broad and less rationalized. The oval forms fit the angled terminals, opening up counters and making Scout more readable and approachable. This is particularly so in Scout RE — Scout’s specialized companion for small font sizes and a new member of Font Bureau’s Reading Edge series of typefaces, optimized for excellent rendering down to 9 px. Compared to other sans serifs in this series, Scout RE is of more narrow proportions, making it an ideal choice for user interfaces and small labels.

Scout RE text sample

The Scout series consist of 24 fonts, six weights with Italics and Condensed, plus Scout RE in four styles. Use it for body copy for less literary texts, captions, or side notes. The condensed styles lend themselves for punchy headlines. Scout combines well with Ibis RE, Highsmith’s serif of similar proportions and rhythm, and other workhorses such as Turnip or Benton Modern.

Scout styles

As with all fonts on Webtype, Scout and Scout RE can be tested free of charge for 30 days. For more details, see the Scout and Scout RE webfont pages.


Solitaire from MVB Fonts

Solitaire specimen
After the introduction of his Sweet label with us earlier this year, we are happy to welcome Mark van Bronkhorst with his type foundry MVB fonts on Webtype, too. Our first release is MVB Solitaire — a no-frills tempered humanist sans.

Bronkhorst intended the design to blend into the background and let the content speak through the legible, unbiased letter forms; nevertheless, he managed to give them a lively, contemporary character, especially visible in the Light and Black styles as well as the buoyant Italics. MVB Solitaire webfonts are available in six well-attuned weights with the Regular and Book styles comparably close in stroke thickness for cases where consistent color across different font-sizes is desired. The desktop fonts are even more finely graduated into 11 weights with Extra Light and Thin styles, which are available as webfonts upon request.
Solitaire styles
MVB Solitaire’s text weights are suited for body copy down to 10 px. The Bold styles make for strong headlines while the Light shines in large display applications. It combines well with serif faces such as Poynter RE, Turnip RE or characterful Prensa.

As with all fonts on Webtype, Solitaire can be tested free of charge for 30 days. For more details, see the MVB Solitaire webfont page.

Stacked styles_bw


Categories

Webtype on Twitter