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

Icebox from Font Bureau

Icebox specimen

In 1997 Cyrus Highsmith bought a box of magnetic letters from a variety store. The colorful, plastic shapes inspired him, and he imagined a type family that didn’t need a refrigerator. Icebox has since evolved beyond its playful origins, taking inspiration from new things, like a manhole cover, to become an angular and compact sans serif with serious undertones. It is available in three weights suitable for display typography and branding, heads and titles, and short texts in larger sizes.

The caps of the bold style are closest to actual magnet letters while the lowercase is freely imagined to match, all decidedly square with rounded corners. Some forms vary quite a bit across the weights, from the bold lowercase with retracted descenders for compact headlines, to the slimmed down Light. Like ice-cubes partially melted in your drink.

Icebox fits the world of sports, retail, foods, beverages, or any other application that calls for a catchy, informal display face — winters and summers. It’s easy to combine with many sans or serifs and works particularly well with other Highsmith designs such as Antenna, Scout, Ibis RE or Dispatch RE. Like all fonts on Webtype, Icebox can be tested free of charge for 30 days. For more details, see the Icebox webfont page. If you need further type advice, feel free to contact us.

E-mail: The Next Frontier for Web Standards

Today is the 7th annual celebration of Blue Beanie Day, a yearly effort to support web standards. These days it is hard to imagine a world before strong web standards were the norm – building websites was infinitely more tedious, messy, and inefficient.

Luckily, we now live in a world where browser support for web standards is largely the reality. For the most part, the experience of building a universally accessible website today is decidedly less maddening than it was during the Browser Wars.

Web Standards Support (and the Lack Thereof) for E-mail

On this 7th annual Blue Beanie Day – more than 15 years after the start of the web standards revolution – the state of HTML-based e-mail design is dismal. Image slicing and table-based layouts are still the norm, despite the universal understanding that such practices are bad. Inline styling is standard practice to prevent design instructions from being stripped away in many places. Support for media query functionality which is fundamental for most new websites today isn’t even close to reliable. And if that weren’t bad enough, e-mail designers still can’t use webfonts and expect all their audience to be able to enjoy the results.

The Vicious Circle of Non-Standard E-mail Design

The unfortunate reality of the situation is a cyclical conundrum: If everyone keeps bending over backwards to compose e-mails that will work with non-compliant e-mail clients, we will be stuck doing so forever. Naturally, every designer wants their e-mails to be seen as intended in as many places as possible, but the makers of e-mail clients don’t have much incentive to become standards compliant unless their product fails to be usable otherwise.

In essence, the support for web standards in e-mail clients is still stuck somewhere in the late 1990s. This is not OK. Something needs to change.

Embracing Web Standards in E-mail

Earlier this month, we launched the inaugural edition of Webtype News, our e-mail newsletter about new webfonts, site updates, examples of webfonts in use, etc. When it was time to discuss the format and composition of the e-mail, we came up against the same questions that most e-mail designers do: How much time should we spend working on hacks for non-compliant e-mail clients? How much can we rely on media queries? When people’s e-mail clients don’t support modern web standards, what are the implications of encouraging them to read the e-mail as a separate stand-alone web page?

Eventually, after much deliberation, we decided that the best way to encourage support for web standards in the realm of e-mail was to embrace the standards ourselves. Inspired partly by Jeffrey Zeldman’s exclamation of To Hell With Bad Browsers from 2001, we decided it was about time to say “to hell with bad e-mail clients” too. We composed our new e-mail using modern web standards, including media queries, proper cascading stylization, and — most importantly for us — webfonts.

This approach to e-mail design is admittedly progressive, but at the end of the day we thought it would be much more rewarding to see what is possible when you compose e-mail around web standards instead of code hacks and design compromises. Some e-mail clients do in fact support a majority of web design standards, giving us hope for what is possible. (Sign up for the newsletter if you want to see what we do in the future.)

We don’t expect that every e-mail designer in the world will be able to take the same approach that we’ve taken right away, but we’d like to encourage more people to at least consider how they might start experimenting with e-mail design in ways that will encourage a broader adoption in e-mail clients. Such a change is long overdue.

Nick Sherman

Webtype in use: Heimat Berlin


Heimat Berlin, one of Germany’s most renowned creative agencies, recently launched a new website designed by Scrollan and built by null2. The site is built around a simple column structure that easily accommodates a range of content, including videos, campaign announcements, and tweets, allowing the agency to update the site with minimal effort. This gallery layout is also naturally responsive, accommodating narrow viewports, such as those on mobile screens, without loss of content or degradation of design.

The site responds elegantly to various viewport widths.

The site responds elegantly to various viewport widths.

A design this fluid requires a solid typographic palette to keep everything cohesive and coherent. Webtype’s Scout and Ibis RE imbue the brand with a personality that is human and sincere — yet with a knowing wink to the agency’s unconventional culture and ideas. Scout Bold Condensed reflects the strength and density of the Heimat logotype (set in Compacta).

Scout Bold Condensed conveys Heimat Berlin’s headlines and the “Play” button on ad videos.

Scout Bold Condensed is used Heimat Berlin’s headlines and the “Play” button on their videos.

Ibis RE shares that hand-wrought squareness, but has the necessary width and screen optimization to deliver all the body copy on the site. While the rugged and crunchy Reading Edge version of Ibis is meant for small text, Scrollan punches up Heimat’s semi-strangeness by using Ibis RE at mid-range sizes for Twitter posts and sub-navigation.

Heimat Berlin - agentur

All site text is set in Ibis RE. The family is also used for navigation and other supplementary text at various sizes. A page with nothing but text becomes a little more interesting in a typeface like Ibis.

Besides running text, Ibis RE is also used for navigation and other supplementary text at various sizes. A page with nothing but text becomes a little more interesting in a typeface like Ibis.

We talked with Peter Bünnagel, one member of the three-person team at Scrollan, about these typographic choices and his experience with the Heimat Berlin project.

What was your role in the design process?
I did the concept for the website together with Barbara Kotte and was responsible for the design of the digital media as the website and the keynote templates. Anne-Lene Proff was responsible for the more corporate design parts of the job. (She also did the initial Heimat design when the company was founded.) But we always work together as a group, and everyone is involved in everything.

Why did you choose these typefaces?
When Heimat asked us to do a redesign for them, it soon turned out that we are basically talking about digital presentations plus business cards. 14 years ago there were tons of printed matter, but no such thing as a website. So we were looking for fonts that would look good on the screen as well as on paper.

Scout is a typeface that transfers the specific feel (or smell?) of Heimat into type. If you type a headline in keynote with Scout, it looks like a real Heimat sentence.

Ibis Text, as the name states, is for reading. Nobody wants to read texts in a condensed sans.

Though Heimat are famous for striking, sometimes weird advertising, they think a lot and work in a very strategic way. We wanted to have both sides of Heimat in a very simple typographic system so the chance would be quite high that it is actually used. Add some color and you get a — very basic — visual system that is quite hard to destroy by people not interested in reading design manuals.

The navigation and text of Heimat Berlin’s many portfolio pages are set in Ibis RE, the screen version of Font Bureau’s Ibis Text.

What feature was most important to you (rendering, availability, extensiveness of family in weights or widths, design feature, etc.)?
Foremost it was the character of the typefaces. Heimat doesn’t need 24 weights of a typeface. (I don’t, either.)

How did you go about determining font-sizes, line-spacing, and other typographic parameters?
We started quite old-fashioned with Photoshop layouts. After null2 (the fantastic guys who did the front- and backend) did a first version of the site, we made some adjustments — also to solve some problems caused by the responsive design. We had some problems with light text on dark background — Scout’s counters nearly disappeared in the beginning; everything looked much bolder than intended. But after some tweaks it worked fine.

How was your experience with licensing and implementing the fonts?
I wasn’t involved. The licensing was done by Heimat, the implementing by null2. The only thing I can tell is that it was very cool that you provided Scout as a webfont for testing as it wasn’t in your library at that time.

Introducing the Monokrom Type Foundry

MonokromWe are excited to introduce a new type foundry on Webtype, all the way from Norway: Monokrom. Sindre Bremnes and Frode Bo Helland founded the young company in December 2012 to focus on high-quality retail typefaces and custom type design. Monokrom joins Webtype with their full typeface catalog all at once — five small, well-considered families, all with a certain nordic touch.

The elegant Vinter, designed by Frode Helland, is the jutting display face in Monokrom’s current catalog. Although sans-serif and extremely light, it has visible stroke contrast that emphasizes downstrokes and lends a sparkle to the letterforms. Vinter dares you to use it as large as possible to embrace its charm. We recommend sizes above 60px. Suitable for editorial design and striking display applications.

Sindre Bremnes designed his Satyr as a text face for reading sizes. Yet with its modulated asymmetric serifs and interesting edged and angled curves, it deserves much larger exposure. The italic is especially engaging. Its hearty flavor lets Satyr stand out as a solitary typeface on a lucid website. Nonetheless, you can also combine it with a clear sans-serif such as Aften Screen, Solitaire or Freight Sans.

Faunus, also designed by Bremnes, started as a display cut to Satyr but evolved in a slightly different direction with different detailing. The two still make a perfect pair. We recommend using Faunus in a medium or large size in short texts, editorial design or display settings.

Aften Screen
Frode Helland drew Aften Screen to perform especially well in small sizes and on low resolution displays. Stylistically it sits between the open, dynamic humanist sans and more rigid grotesks. The clear letterforms have broad proportions and are generously spaced, but feature only a moderate x-height. This helps Aften Screen look less crude at larger sizes, compared to other classic screen fonts, and gives accents above lowercase letters more room. Aften Screen combines well with a wide range of text or display faces. (Be daring, we offer a free 30-days trial for all fonts.)

Telefon is the “revival” in the current Monokrom catalog, in the wider sense of the term. The lettering of the word TELEFON on old Norwegian phone booths gave Sindre Bremnes the idea for a geometric typeface. He incorporated the “low waist” of the capitals and spiky vertices of his model into his design, but all other characters are drawn from scratch to fit the style of constructed letterforms from the 1930s.

Telefon lettering

We recommend Telefon for short texts in medium sizes or display typography. As a typeface for small body copy to go with it, try Apres RE or Giza RE.

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

Herald Gothic from Font Bureau

Harald Gothic Specimen2Squarish, tall and all caps — Herald Gothic is an incisive typeface for headlines and display typography, designed by Matthew Butterick. The family is based on a single condensed ATF sans-serif from the late 19th century. Butterick added two more weights, and for each weight an alternative style of capitals, and small caps.

The caps mapped to the uppercase characters on the keyboard feature bevelled corners, a practice common for news heads in the 1870s. An alternate set of capitals with less chamfered, more diagonal forms (third line of the specimen) are on the lowercase letters of the keyboard. Additionally, Butterick included small caps that match this second design of capitals. Here’s a sample set of CSS code to access the small caps font-feature on the web (viewable in OpenType savvy browser such as Internet Explorer 10+, Chrome 21+, and Firefox 15+):

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

Herald Gothic is a strong design that combines with a variety of temperate text faces such as Ibis RE, Scout RE, or Giza RE. Like all fonts on Webtype, it can be tested free of charge for 30 days. For more details, see the Herald Gothic webfont page.

Hermes FB from Font Bureau

Hermes Specimen

Matthew Butterick’s Hermes FB is inspired by Hermes Grotesk, an early 20th century typeface by the Berlin type foundry Woellmer. Like Berthold’s Block it resembles German jobbing type of everyday printing around the 1910s and ’20s. Blunt corners suggest the wear and tear of rough presswork. The first styles of Hermes FB date back to 1995. In 2010, Butterick added more weights, italics, and glyph variants to expand the family’s versatility.

Just like its ancestors, Hermes FB lends itself as a typfaces for branding, display typography or headlines. It is of rather narrow proportions but generously spaced and therefore also suitable for body copy down to 14px in the lighter weights. As a titling font, it combines well with text faces such as Ibis RE or Giza RE.


Hermes FB in use on, the website for the Swedish steel prize.

By using the alternate forms for a, g and other key glyphs you can change the character of the typeface significantly. With the (standard) single story a and g it radiates a straightforward atmosphere with hints at geometric typefaces of the 1920s. The double story a and g stylistic alternates make Hermes FB more timeless and adaptable as a text face (used in the third specimen line). For even more experimental variations, try the unicase alternates.


Unicase alternates for A, E, M, N and U are accessible via stylistic set 8 (ss08) or the “unic” feature, supported by Internet Explorer 10+, Chrome 21+, and Firefox 15+.

A sample set of CSS code that can be used to access stylistic sets and features:

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


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


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

Brand Everywhere: Lizzie Skurnick Books

This case study marks the fourth in our Brand Everywhere series in which we talk to designers who use consistent print and screen type to build a comprehensive identity.

home 1060

The first thing you read on the recently launched site for Lizzie Skurnick Books is this clear mission statement: “devoted to bringing back the very best in young adult literature, from the classics of the ’30s and ’40s to the thrillers and novels of the ’70s and ’80s.” With these historical periods as touchstones, default typography simply would not do for this brand. Knowing that a modern publisher couldn’t settle for system font replacements, Lizzie Skurnick’s designer Eric Gordon made a savvy choice in Harriet Display for both print and web.

Mid-century young adult paperbacks informed the typography of the LS Books covers.

Mid-century young adult paperbacks informed the typography of the LS Books covers.

Family showingOkay Type’s Jackson Cavanaugh designed Harriet as a contemporary reflection of the typefaces popular in mid-20th-century American and English design. Sparkling serifs with high stroke contrast (like the large display versions of Baskerville, Century, and Caslon) were commonly used on paperback covers throughout the era. Harriet nods to these styles but has its own personality, unburdened by any particular model. This was certainly in Gordon’s mind when he selected the typeface for the brand. Quoting from his interview on the LS Books blog:

“Lizzie Skurnick Books is reissuing novels from the past few decades, so it was important that the type acknowledge that history but also look fresh. Had we been designing for just, say, ’70s-era books, they might have had a very specific look, evocative of that period. Since the catalog spans multiple decades – each with their own distinctive design trends – the goal was to come up with a design structure that could feel appropriate for any of those time periods. Not quite retro, but retroish. The primary typeface we used (Harriet) really does a great job of being able to slip between eras, and the different color schemes and photo treatments can help push the covers to be more vintage-y or more contemporary.”



Harriet Display is used within a common layout for all Lizzie Skurnick book covers, building a strong identity that varies only in photography and color. Harriet Text, a sturdier variation designed for small sizes and longer passages, is used along with H&FJ’s Whitney for the synopses on the back covers.


We asked Gordon to tell us more about how the covers define the Lizzie Skurnick brand.

“Because this series of books spans such a range of decades and design styles, we’re trying to evoke the past without really being specific. Lizzie’s photo archive of vintage young adult fiction covers informed many of the design decisions – such as type treatment and the slightly distressed cover stock – but the color schemes are more punchy and current. Some readers might have originally checked these books out from the library, so we’ve also incorporated elements like the colored spine texture and cover stamp as a little nod to that history. For the cover images, when we can, we’re trying to use photography from the authors themselves. On Lois Duncan’s Debutante Hill, for instance, that photo features the author herself and was taken by her father.






On the web, Harriet is paired with Freight Sans, a Garage Fonts release designed by Joshua Darden. Gordon tells us that this choice was another effort to keep the look relevant to today’s readers:

“We wanted to acknowledge the stories’ history but also use a typeface that looked fresh. Combining the more flowery Harriet with a modern sans like Freight really helped achieve that.”

Both the Harriet and Freight Sans families are served to the site by Webtype. Gordon put our 30 days of free testing to good use:

“Working with Webtype was seamless. The trial licenses really allowed us the flexibility to test out various weights and determine what worked best on screen.”

The effort paid off. From paperback cover to online catalog, Lizzie Skurnick Books presents a cohesive identity that pays homage to the literary history the imprint represents, and appeals to new, young readers while treating them like adults.

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.


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+.)


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


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.


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.


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.


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


Webtype on Twitter