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

Introducing TypeManufactur, Georg Salden and his typeface Planet

We are very excited to welcome German type design veteran Georg Salden and his foundry TypeManufactur as a new partner on Webtype. Not only has Salden been creating typefaces for over 50 years now, but he was also one of the first designers to offer his fonts directly to customers, first under the GST (Georg Salden Type) label and, since 2003, as TypeManufactur. In 2009, he teamed up with type designer Ludwig Übele who helps with production and distribution. Please check out their first release on Webtype: Planet.


Georg Salden has designed more than 40 type families, each with its own character. But he always put legibility first. Planet is no exception. It is an all-purpose sans-serif with a humanist touch, practical and without affectations. Round letters are circular with diagonal terminals opening up counters, while straight-sided characters are comparably narrow. This allows for a compact letterfit with good readability. The result is a restrained, coherent family in six weights with lively details such as snappy descenders that lend it a certain charm. The italics, available in four weights, are narrow and dynamic, creating an interesting contrast to the roman while staying readable enough to be used on their own.

The Light and Book weight with old style figures (accessible via the onum font-feature-setting) and the default lining figures. The flat top 3 and the 5 are very distinctive.

Planet is a great choice for body copy as well as labels and headings, rendering clear down to a font-size of 14px. Adaptive in design, it feels at home in corporate and editorial environments, as well as on retail sites. Try to combine it with humanist serif faces such as Poynter Serif RE, Proforma or Marat for a warm atmosphere, or a display face like Freight Display and Whitman Display for added classiness.

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

Make sure to also visit What a Character, spotlighting some of the beautiful glyphs Georg Salden has been creating.

Farnham Text and Display from Font Bureau

Farnham Display

Farnham Display in five weights, Light to Black, with italics and small caps.


Font Bureau’s Farnham is a lively transitional serif series that adds personality to editorial text and display applications. Christian Schwartz based his design on the work of German-born punchcutter Johann Fleischmann, a contemporary of Baskerville and Fournier. He was an expert in advanced tools and materials, and pushed beyond the frontiers of his time, cutting typefaces famous for their “sparkle”. For Farnham, Schwartz looked at Fleischmann’s exuberant angularity, carrying it to all weights of his series. Pronounced notches and sharp corners distinguish the design in large sizes and let small text stay clear.

Farnham Text

Farnham Text in three weights, Regular to Bold, with italics and small caps.

The Farnham Text styles feature lower stroke contrast than the Display and are optimized for sizes down to 12px, yet distinct details like ball terminals and the energetic mix of vertical and angled stress are present in both families and make Farnham flavorful and elegant. The British cloth­ing company S.E.H Kelly created a sophisticated and classy website with the minimalist set of just two styles: Farnham Text Regu­lar and Italic.


Farnham comes with an ample set of OpenType features — small caps, old style figures, ligatures and alternate characters — accessible via font-feature-settings. The series harmonizes with almost all sans-serif text faces, for instance Fort, Marat Sans, Aften Screen, or Schwartz’s Amplitude. Try any free of charge for 30 days. For more details, see the Farnham webfont pages.

Fort from MCKL


During his years working as a graphic designer, Jeremy Mickel was constantly looking for sans-serifs with a flexible voice and durable performance. Fort is his answer to this brief — a resilient, contemporary grotesk in an ample range of weights. The squared shoulders and counterforms in round characters are tending towards super-elliptic shapes and give Fort personality and firmness. Subtly redrawn slanted italics and a consistent texture across all weights add to coherence. The family is neutral enough to take on information design and branding tasks of all kinds and sizes.

But Fort offers room for flavor-enhancing adaptions. Using the round alternates for a and y for instance softens the tone of the grotesk, making it less formal or rigid.


Alternate characters for a, k, y, G and K, are accessible via stylistic set 1 to 3, and a set of old style figures via the “onum” feature. (Supported by Internet Explorer 10+, Chrome 21+, and Firefox 15+.)

A sample set of CSS code to access stylistic sets and features:

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

The extreme styles of Fort’s seven weights — the delicate Extralight and stout Black — are especially expressive and eye-catching in large display uses. Fort would certainly play well with Mickel’s serif family Shift we released a few month ago. For body copy, consider combining it with sturdy serifs such as Benton Modern RE, Turnip RE or Giza RE.

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

The Complete Benton Modern Series

Specimen combo2

All together at last. With the release of Benton Modern’s core text styles and new additions to Benton Modern Display, we now offer the full line of Font Bureau’s popular serif series. It is comprised of Benton Modern RE for small body copy or captions, Benton Modern for medium-sized text, and Benton Modern Display for the grandest applications.

Benton Modern RE is the typeface you are reading right now. It is specifically designed for the smallest sizes on screen and our choice for body copy on our blog. Being part of Font Bureau’s Reading Edge series, Benton Modern RE has a very large x-height and generous spacing and proportions. It features the typical design details of the Benton Modern series in a somewhat exaggerated form so they are still discernible — and above all, readable — even at a font-size of 9 pixels. David Berlow designed this interpretation of Benton Modern in 2010.

Benton Modern Display, Benton Modern, and Benton Modern RE set at the same nominal size to illustrate the difference in proportions and detailing.

Benton Modern and Benton Modern RE as rendered at 9px on Mac OSX.

Benton Modern (left) and Benton Modern RE (right) as rendered at 9px in Mac OS X, demonstrating the value of screen-specific design variations.

BM Text

The Benton Modern text styles were originally undertaken by Tobias Frere-Jones in 1997 to improve text at The Boston Globe newspaper. He later adapted the face for the Detroit Free Press by widening the proportions to match ATF’s Century Expanded, Morris Fuller Benton’s great news text type from around 1900. The italic, based on Century Schoolbook Italic, was designed by Richard Lipton and Christian Schwartz, who also added the Bold. (The four styles of Benton Modern are each available in four different grades for print. The default weight on Webtype is Grade Two, the second lightest variant. If you require graded webfonts for Benton Modern, please contact us.)

BM Display

Benton Modern Display is made for compact headlines and splendidly large display typography where it can fully express its charm. The normal and condensed widths were already available on Webtype. Newly added are the extra condensed and compressed styles, and two heavier weights of the normal width to give you even more options for distinct and flexible typography on the web. The family now covers 36 styles: six different weights, four different widths, from delicate Light to punchy Ultra Black, each with italic. Benton Modern Display was designed by Dyana Weissman and Richard Lipton in 2008.

BM widths

Whether you use the full spectrum of the series or just one family on its own, you can’t go wrong with Benton Modern. It conveys the atmosphere of traditional text faces with modern proportions and a classy twist. Geared to the needs of fine editorial design, the series covers styles for extended reading, headlines, and captions alike. If you need a sans-serif companion for Benton Modern, the Benton Sans series would be the natural match. Or you can pair it with a more contrasting sans and lead your design in different directions: open and approachable with a humanist sans like Solitaire or Aften Screen, slightly retro with a grotesque like Bureau Grot or Trio Grotesk, or contemporary clean with Scout Condensed or Helsinki.

As with every font on Webtype, all styles of the Benton Modern series can be tested free of charge for 30 days. For more details, see the respective webfont page.

Webtype in use: Saint Lucas University College of Art and Design Antwerp


The website for Saint Lucas University presented a web design challenge for Dennis Kestelle and Bart Rylant. The complexity and sheer volume of information the College of Art and Design has to offer could be difficult to wrangle. But, along with the hefty content demands, the local Antwerp designers (and Saint Lucas grads) were also given a healthy dose of creative freedom. In return, they gave the school an online presence that is inviting and exciting — vital attributes for any institution looking to attract talented youth.

The school’s events listing is set with color-coded text on a black background, offering a break from the rest of the site’s content.

The school’s events listing is set with color-coded text on a black background, offering a break from the rest of the site’s content.

Armed with various weights of Salvo Sans and Alright Sans Kestelle and Rylant played with typographic scale and a flexible grid to bring freshness and appeal to what might otherwise be an overwhelming and monotonous deluge of text. We talked to the team about the role type played in their successful design.

What was your role in the design process?

We both studied graphic design at Saint Lucas and felt it was a big honor they asked us to design their website. Their corporate identity is very low-key (actually there is only a logo), so we could do whatever we wanted, which is of course a great starting point for a designer. We had several meetings during the design and development process, but apart from some minor details, they went with everything we proposed. It was a great experience getting this freedom, and working together with people that really understand the importance of design. We spent quite some time finding a concept and graphical identity for the website that would stand out and capture the philosophy of Saint Lucas. It had to have an edge to it, something unconventional, but at the same time it had to be very legible and simple. Oh well, that sounded like Jony Ive in an Apple commercial.

How did you choose these typefaces?

For the headlines we were looking for a very bold/black font, but not anything too mainstream or neutral. Salvo has some interesting details and we wanted to make sure the visitors would notice this. So we blew up the headlines, sometimes causing the titles to flow offscreen, but that didn’t matter. It really works well as a header with the many great pictures they provided us.

The body copy had to be different, for contrast. Alright Sans seemed to be just right: different enough, but very good friends with Salvo.

Extra large section headlines are allowed to run off the page.

Extra large section headlines are allowed to run off the page, serving as design cues rather than literal titles meant to be read.

What feature was most important to you (rendering, availability, extensiveness of family in weights or widths, design feature, etc.)?

The website is very text-heavy. They have lots and lots of general information about the different programs, about applying, about the university itself, but they also post information about every event they organise and everything that is in some way related to the students or teachers. So we needed a font that was very legible and worked for short navigation words as well as very long texts. We also looked for a font that had many weights. Not to use them all, but we feel sometimes a text looks better with a semilight and a semibold, instead of using a regular and bold weight. The type is really important on the website since we also didn’t create any graphics or icons that would interfere with the images of student work featured on the website.

How did you go about determining font-sizes, line-spacing and other typographic parameters?

All graphical hierarchy, and there was a lot of it, was established with only type and colour. There is a lot of variation, but consistent throughout the website. Starting with largest and smallest sizes and then giving everything in between it’s appropriate place and size was the way to go. To be honest, we just did this by looking at the type, testing lots of options and just deciding what looked best. For instance, we tried to do the submenus on the left with indents, different weights, different sizes, etc. But in the end making the whole menu the same size and weight, and just using some grayshades made the menus look clear and non-disruptive to the rest of the site.

Nav menus are set in Alright Sans Bold with rectangular backgrounds. When the menus are invoked, the main content dims and the black-background logo is hidden for clearer contrast.

Nav menus are set in Alright Sans Bold with rectangular backgrounds. When the menus are invoked, the main content dims and the black-rect logo is hidden for clearer focus.

How was your experience with licensing and implementing the fonts?

We are not very big fans of subscription services. We like to invest in buying a font, and being able to use for as long as we like instead of having to pay every year. We also feel there could be more options between the 10,000 and 250,000 pageviews plan. The Saint Lucas Antwerp website has about 25,000 pageviews a month (a 250% increase compared to their previous website by the way, we are very proud of that), so we are closer to the cheaper account but have to go with the more expensive account. But we like the fact that Webtype has a big collection of quality fonts, instead of other services often having the more mainstream and generic fonts in their library.

Implementing the fonts was easy as pie. Being able to make a trial collection let us give the client some real-life examples with different fonts, and we could really check what different fonts would do to the design. The fact that we can just include a CSS, and don’t have to rely on JavaScript makes a big difference for us, because now we can also use the same type in the Saint Lucas Antwerp email campaigns as well.

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.


Webtype on Twitter