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

Heron Sans & Serif from Font Bureau

Heron Sans

The design of the Heron series started when Joe Heroun, Art Director of Men’s Health, commissioned a new headline face for the magazine. In response, Cyrus Highsmith drew a compact, straight-sided sans-serif with taut flattened curves inspired by industrial, machine-made letters.

Heron Serif

To expand the scope and versatility of the design, Highsmith added an equally steadfast slab-serif and developed the two families into a full-fledged series of 40 styles: five weights, two widths, plus italics. Heron Sans and Heron Serif are fit for strong headlines as well as space-saving body copy down to 14px in the lighter weights. With its idiosyncratic, industrial atmosphere the series is a great alternative to typefaces like DIN, or geometric square serifs. Scout RE or Ibis RE would make good partners for small sized text.

Like many typefaces on Webtype, the Heron series is rife with OpenType features such as alternate characters and various sets of numerals: proportional and tabular figures, superscripts, subscripts and numerals for fractions. Read more on how to use OpenType features on the web in this post.

Heron Sans is rife with OpenType features such as alternate characters (nine

The impression of Heron Sans is adaptable by the use of its alternate characters via stylistic sets or the general “salt” feature. Also present are the “liga”, “dnom”, “numr”, “tnum”, “zero”, “ornm”, “sups” and “subs” feature.

Features Serif 2

Heron Serif features less alternate characters — I and l have serifs by default — but also the “liga” feature, “dnom”, “numr”, “tnum”, “zero”, “ornm”, “sups” and “subs” numerals.


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

Using OpenType Features on the Web

Serge with the swash feature turned on (left) and off (right).


Did you know that Webtype webfonts are chock full of typographic amenities and OpenType extras you know and love from desktop fonts? Modern browsers support these features — like alternate characters, ligatures or small caps — and they are easy to use in CSS. This post will help you implement them in your designs. (To date, Internet Explorer 10+, Firefox 4+, Chrome 15+ and Safari 6+ are all OpenType feature-savvy, but best check a site like for the latest information on all operating systems and thoroughly test your design across browser versions.)

We designed some specimen sites to illustrate the possibilities of OpenType features:

  • The Monokrom Catalog uses alternates, small caps, different numerals and fractions.
  • Le Jet for Serge shows swash characters in action.
  • The New Web Typography site we developed for Microsoft demonstrates a whole array of OpenType features and how to use them.


The most common way to call OpenType features in CSS 3 is via the “font-feature-settings” property and the appropriate four-letter feature abbreviation for the given feature. For instance, to turn on standard ligatures, use the “liga” property:


Since OpenType features are implemented differently in each browser, you’ll have to use the so-called “vendor prefix” in order to ensure cross-browser support. Firefox/Mozilla has changed syntax with version 14. Add the second variant for backwards compatibility. (We ommit the previously recommended “-o-font-feature-settings” line for Opera browsers since current versions of Opera are based on webkit technology and thus covered by the webkit prefix. Older versions of Opera did not support OpenType features.)

Below you will find a sample set of code for default-features that are supported in most browsers such as contextual alternates, standard ligatures, contextual ligatures, and kerning:

-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-ms-font-feature-settings:"calt", "liga", "clig", "kern";
-webkit-font-feature-settings:"calt", "liga", "clig", "kern";
font-feature-settings:"calt", "liga", "clig", "kern";


All Webtype webfonts have kerning and standard ligatures like fi and fl. These can also be activated via the CSS property “text-rendering: optimizeLegibility” for webkit browsers, but this is not standard CSS and may cause problems. More sophisticated OpenType features like alternates are only supported in those modern browsers mentioned above. For example, to turn on the alternate characters in stylistic set 1, use the “ss01” property; for old style figures, use the “onum” property:

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



Shift’s stylistic sets: 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.


The Most Common Features

The features below are the ones you’ll most frequently find in webfonts. For a more complete inventory, see the standard OpenType features, though technically a font manufacturer can make up their own four-letter tags.

  • salt: Stylistic Alternates. Enables alternate glyphs when only one set of alternates is included in the font.
  • ss01 to ss20: Stylistic Sets. Enables alternate characters according to the group specified by the typeface designer (1 to 20 are possible). Sometimes these sets include several stylisitically matching alternates, sometimes only one glyph. Please check the glyph overview for more information, or the type portrait on our blog. (See the three stylistic sets of Shift for instance)
  • calt: Contextual Alternates. Alternate shape for a character used in context of specific other characters nearby.
  • liga: Standard Ligatures. Typically fi and fl, often also ff, ffi, ffl. (See Trilby)
  • dlig: Discretionary Ligatures: Optional ligatures like st, et, Th. (See Big Moore)
  • clig: Contextual Ligatures. Ligatures used in context of specific other characters nearby, mostly in script fonts. (See Savanna)
  • onum: Oldstyle Numerals. Webtype offeres lining figures as the default numerals. Several typefaces include optional old style figures that fit more harmoniously into body copy. (See Planet)
  • tnum: Tabular Numerals. Numerals of uniform width, as opposed to proportional numerals, where the 1 for instance is more narrow. (See Helsinki)
  • smcp: Small Caps. Specifically designed small capital letters instead of lowercase. (See Farnham)
  • unic: Unicase. Lowercase forms enlarged to uppercase letter size. (See Hermes)
  • swsh: Swashes. Turn on to use a swash variant of a character (best used together with cswh).
  • cswh: Contextual Swashes. Swash letters used in context of specific other characters nearby.
  • zero: Slashed Zero. Useful where the 0 could be confused with an O. (See Helsinki)
  • sups: Superscript. Specifically drawn superscript numerals. (Not to be confused and not to be use together with the <sup> HTML superscript tag.)
  • subs: Subscript. Specifically drawn subscript numerals.

For feature-rich fonts, it may be advisable to strip unused features and/or limit the character set of a font to reduce the file size, for instance if loading time of a webfont is an issue (see the subsetting options in your project settings). Our support pages have more detailed information on how to implement webfonts on your site. If you have any additional questions, feel free to contact us.


Planet’s Light and Book weight with old style figures (onum) and the default lining figures.



Hermes’s unicase alternates for A, E, M, N and U are accessible via stylistic set 8 (ss08) or the “unic” property.


Helsinki use

Helsinki with and without alternate characters in stylistic set 1 (J with short terminal, potbelly-a, double-story g), tabular figures (the alternate 1 with bottom serif), and the slashed-zero compared.


Nitti Grotesk from Bold Monday


Fresh from Bold Monday comes Nitti Grotesk, the proportional companion to the monospaced family Nitti and part of a larger collection of Grotesque-inspired typefaces by Pieter van Rosmalen. The series originates in his sans-serif Capone from 2003, which evolved into the display family Stanley and a monospaced version that became Nitti — named after Francesco Raffaele Nitto, one of Al Capone’s henchmen. In 2014 van Rosmalen added Nitti Grotesk.

Nitti Grotesk has its roots in the early English Grotesques, with their quirky and idiosyncratic shapes, which lend it humanity and warmth. At the same time van Rosmalen focussed on versatility and developed his model into a coordinated family of seven weights. The relatively short uppercase letters make Nitti Grotesk particularly suitable for applications with frequent use of caps, like title case and abbreviations. Alongside Nitti, the new sans became already widely known through its use in the Writer Pro application and on the accompanying website that launched in December 2013, underlining the clear, straightforward approach of Writer.

Nitti Grotesk as used on the Writer.Pro website.

Nitti Grotesk as used on the Writer Pro website.


Nitti Grotesk is optimized for text sizes down to 14px, and comes with OpenType features, such as alternate characters for a and g and true fractions. It is easy to combine with just about all serif faces, for instance Turnip RE and Benton Modern RE for small text, or Belizio, Farnham Display, and Shift if you need a companion for larger sizes.

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

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 on Twitter