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

The Harriet Series from Okay Type

Family showing

On this day for type lovers, we are delighted to announce webfonts for the especially lovable Harriet Text and Harriet Display by Jackson Cavanaugh at Okay Type. The elegant serif series draws inspiration from text faces of 19th and 20th century American and English design, but is unburdened by any particular historic model. With rational form and a good portion of grandeur, Harriet manages to combine exuberance with practical versatility.

Harriet Text and Display

The series is comprised of a stalwart text family and a sophisticated display family. The text styles with their moderate stroke contrast and stability are suitable for copy sizes down to 12 px. The display styles, on the other hand, play out their refined detailing in headlines and other large applications — from the sparkling Thin to the vigorous Black, with particularily enticing italics.

Comparison between Harriet Display and Harriet Text

Top: Harriet Display has finer features and elaborate forms which shine at large sizes. Bottom: Harriet Text is more rugged, with more simplified forms that stay clear at smaller sizes.

If you need to cover a large variety of content but don’t want to stick to one type series only, Harriet combines well with almost all sans-serif typefaces, for example Alright Sans or Nobel. For extra-small font sizes try Benton Modern RE. To experience the Harriet Series in all its webfont glory first hand, be sure to also check out Okay Type’s splendid specimen site.

The Harriet Series demo site

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

Heart

Savanna Script from Font Bureau

Savanna Script

We are pleased to announce Savanna Script, the latest work from Richard Lipton and the Font Bureau. Demonstrated in his earlier typefaces such as Avalon, Sloop, and Tangier, Lipton is a master of transforming the elegance and spontaneity of calligraphy into beautiful, functional fonts. With Savanna he created a very condensed roundhand script that dances with rapid, effortless energy.

For moden web browsers that fully support OpenType font features, Savanna comes with three sets of capitals and variety of alternates and ligatures, allowing it to adapt to the desired space and tone. These, along with the three weights, give the family a versatility that is rare in formal scripts.

Use Savanna Script as an accentuating display face in extra large sizes. It combines well with almost all serif faces such as Poynter Serif RE, Benton Modern, Bulmer, Bell or Whitman. As with all fonts on Webtype, Savanna Script can be tested free of charge for 30 days. For more details, see the Savanna Script webfont page.

Savanna Script Standard Caps

The caps for Savanna Script are tall by default, with shorter options available for browsers that fully support OpenType font features. Examples are shown below with the CSS settings for each option.

Savanna Script Mid Caps

To enable the Mid Caps in OpenType-savvy browsers, turn on stylistic set #1 using the following CSS settings:
-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;

Savanna Script Short Caps

To enable the Short Caps in OpenType-savvy browsers, turn on stylistic set #2 using the following CSS settings:
-moz-font-feature-settings: "ss02=1";
-moz-font-feature-settings: "ss02" 1;
-ms-font-feature-settings: "ss02" 1;
-webkit-font-feature-settings: "ss02" 1;
font-feature-settings: "ss02" 1;

 


Titling Gothic from Font Bureau

Titling Gothic Family

We are happy to announce that David Berlow’s popular Titling Gothic is finally available for the web.

The roots of this series are in ATF’s Railroad Gothic, a condensed all-caps headline face from the late 19th century. While Titling Gothic started out as a relative of Rhode, it soon took its own more squarish and less idiosyncratic direction. Berlow designed a lowercase, introduced subtle curves and more regular proportions, and expanded it into a coherent 49-style family, giving print designers near infinite options for headlines and display typography.

25 versatile styles are now made available as webfonts: five weights (Light, Regular, Standard, Medium and Bold), each with five widths (Extended, Wide, Normal, Narrow and Condensed). Use it for headlines and similar display applications. The light condensed lends elegance, the strong and punchy bold weights are especially striking in all-caps. Titling Gothic combines well with other rational typefaces and serifs with vertical stress such as Benton Modern, Ibis or Giza.

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


Trilby from Font Bureau

May we introduce our latest release Trilby, a jolly slab serif from Font Bureau by David Jonathan Ross.

Trilby specimenThe distinctive, contemporary design tips its hat to the slightly unorthodox model of the reverse contrast slab serif, where — unlike typical typefaces — horizontal strokes and serifs are thicker than the vertical stems. Trilby’s designer, David Jonathan Ross, has long been fascinated with the topsy-turvy quality of this style, the French Clarendons, popular in the 19th century and usually associated with wood type, playful circus broadsides, and the Wild West.

In Trilby, Ross avoided the decorative excess of this type genre and reined in the eccentricities. The result is a surprisingly versatile typeface with generous and subdued letterforms. It is suited for a variety of uses — from short paragraphs of text to headlines, banners, and other display applications, exuding just the right amount of ease. Trilby is available in eight styles: four weights, from Regular to Black, plus italics and extended language support. It combines well with text faces such as Ross’ latest design Turnip RE, or Giza RE, as well as sans serifs like Benton Sans RE, or Amplitude.

Left: Trilby with standard characters in Safari. Right: Trilby with feature-settings active in Firefox.

Left: Trilby with standard characters in Safari. Right: Trilby with feature-settings active in Firefox.

If you design for modern browsers such as Internet Explorer 10, Chrome 22, and Firefox 4 or later, you can make use of Trilby’s stylistic alternates — for instance a single-story a and g, a non-kerning f, a barred A, and a Q with a looped tail — as well as oldstyle figures, numerous ligatures and other features. These can be accessed in CSS3 via feature-settings. Here is a sample set of CSS-rules that will cover all OpenType-savvy browsers:

-moz-font-feature-settings: "salt=1, onum=1, ss01=1, liga=1";
-moz-font-feature-settings: "salt" 1, "onum" 1, "ss01" 1, "liga" 1;
-ms-font-feature-settings: "salt", "onum", "ss01", "liga";
-webkit-font-feature-settings: "salt", "onum", "ss01", "liga";
-o-font-feature-settings: "salt", "onum", "ss01", "liga";
font-feature-settings: "salt", "onum", "ss01", "liga";
Feature-settings: Stylistic Alternates (salt), Oldstyle Figures (onum), Stylistic Set 1 (ss01), Ligatures (liga)

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


Sweet Sans from Sweet

Following the addition of Okay Type last year, we’re pleased to bring another like-minded foundry into the Webtype fold: Sweet.

Mark van Bronkhorst’s Sweet® label encompasses charming and useful typefaces inspired by historical models of early 20th Century America and infused with his tasteful style and practical experience. Van Bronkhorst is a typographer’s type designer. Drawing from his years of branding and publication design — his resume includes several issues of the beloved U&lc — Van Bronkhorst makes the sort of fonts he would want as a type user.

The first release from this new library is Sweet Sans, a masterful revival of an old classic: the engraver’s sans serif. The model — strikingly similar to drafting alphabets of the early 1900s — has been one of the most widely used stationer’s antique lettering styles. Its open, simple forms are universally appealing and offer legibility at fairly small sizes. There are digital fonts based on this style, but none come near the versatility of Sweet Sans with its 18 webfonts: nine weights, from Hairline to Heavy, each with a true italic. Unlike other revivals of this model, Van Bronkhorst has also drawn original lowercase forms to harmonize with the caps. While rich in history, Sweet Sans is made for contemporary use. It is a handsome and functional tribute to the spirit of unsung craftsmanship.

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


Brand Everywhere: Ally Bank

Today, the Webtype Blog launches a new series of articles about type, branding, and the value of a consistent, comprehensive identity. Brand Everywhere will present case studies of organizations who present a strong, seamless brand experience by standardizing their typography across all media, from print to web to mobile.

In 2009 the financial institution GMAC renamed its banking unit “Ally Bank”. The streamlined direct bank came out of the gate with a stark, no-nonsense identity capped with the slogan “straightforward”. The main element of nearly every ad was type, and the typeface they chose was fitting: Benton Sans. The descendent of a classic workhorse, News Gothic, Benton Sans is everything you want your bank to be: forthright, competent, hardworking, and devoid of pretense or gimmickry.

Laura Bollerman, one of the executives responsible for the rebranding confirmed the importance of Benton Sans to Ally’s new look and feel. “We believe that every touch point with a customer is an opportunity to reinforce our brand’s essence. We use the typeface whenever possible to ensure the consistent look.” There is certainly a lot of truth in that last statement. Ally has one of the most dependable and disciplined identities we’ve seen, especially in the financial industry and it has achieved strong brand recognition in the three years since it was lauched. Let’s take a look at how they execute the typography in various types of media.

TV Advertising

BBH New York created Ally’s debut campaign, including a batch of amusing and memorable television spots featuring children confounded by the draconian behavior of traditional banks. Watch “Pony” and “Toys” and note the sign-off branding.

Ally tv ad "Pony"

Ally tv ad "Pony" - final frame

Print Advertising and Documents

Other than the stylized ‘a’ from the main logo, Benton Sans is truly the face of Ally, as shown in the outdoor and print ads below.

Ally print ad, February 2012

Ally’s signature plum color is an important part of its look, but this newspaper ad (below) demonstrates that a brand with a strong typographic identity is always recognizable, even in black and white.

Ally newspaper ad, October 2011

A seamless brand experience is obviously ideal in any organization, but it’s especially important in banking, where any inconsistency can endanger the customer’s confidence in the institution. Ally’s identity execution doesn’t miss a step, even when it comes to something as seemingly mundane (but just as vital) as a deposit form. Benton Sans is used throughout the PDF form, enabled by an embedding license from Font Bureau.

Web

Ally’s transition from print to screen goes off without a hitch thanks to the same Benton Sans fonts available via Webtype. All headlines and body text are set in the identity typeface, even the type in tables and forms on interactive account pages. Click any image for a full-size view.

Ally.com - about page

Ally.com - careers

Ally.com - pay bills

It wasn’t long ago that employing a typographic identity online meant locking text into images or Flash, or downgrading to web-safe default fonts. Fortunately, those days are past. Webtype offers hundreds of screen-ready fonts along with a 30-day free trial period, giving you the chance to experiment before making a commitment.

Mobile

Ally mobile app check deposit

The final link in Ally’s identity chain is the mobile app for iPhone and Android. Because Ally is essentially an online, tech-savvy bank, it’s crucial that the mobile banking experience is as feature-rich and visually consistent with the website, advertising, and other materials.

Ally iPhone app

Benton Sans fonts are embedded in the app, delivering the same clear and branded text as the website. Normally, this use requires a special upgrade, but Webtype and Font Bureau offer a single, universal license, making it simple to deploy a house typeface across all media — including broadcast, print, web, and mobile apps. Are you looking for this kind of comprehensive solution? Just get in touch.


Auld Lang Syne 2012

It has been an exciting year for webfonts, and an exciting year at Webtype. 93% of all browsers are now supporting webfonts via @font-face. (The site Can I Use offers good compatibility tables for HTML, CSS and other web features.) All but the Android browser and Opera support the WOFF font format, which is now officially a W3C recommendation.

Among the new typefaces that 2012 brought to the Webtype catalog are families from The Font Bureau and Okay Type, suitable for almost every application – fonts for beefy headlines, highly readable text faces as well as charming scripts.

We launched an extensive website explaining the ideas behind our Reading Edge Series of fonts for small sizes on screen, with specimens and paring samples. Also, make sure you don’t miss the vibrant Serge feature-site Le Jet offering essential must-haves for the modern-day folks.

As a prosperous finale we recently joined Typecast app as font partner to make it even easier to try out Webtype fonts and design with them directly in the browser.

So, for those who didn’t get the Future Goggles from Le Jet, what’s ahead at Webtype in 2013? More Fonts of course. Many new high-quality typefaces for a beautiful, readable web are in the pipeline, with new type foundries to join in. Keep an eye on this site. Happy holidays and a splendid new year!


Le Jet — Propulsion Systems & Haute Couture

Remember our latest release, Serge? We made a little demo site to show the snappy, high-flying fonts in action. And because we were always looking for a purveyor of quality jet packs. Check out Le Jet – Propulsion Systems & Haute Coutureand get some last minute gift ideas for your advanced peers.

The site is best viewed with a modern browser such as Internet Explorer 10, Chrome 22, and Firefox 4 or later, because then you can enjoy the alternative swash capitals we used in the headlines. (Safari and Opera don’t support OpenType features yet.)

Headlines with OpenType features turned on in Chrome (left) and off in Safari (right).

To get this to work across a wide range of browsers and prepare for future OpenType feature support, the full CSS rule for the headlines looks like this:

h2 {
 font-size: 96px;
 font-family: "Serge Black";
 -moz-font-feature-settings: "swsh=1";
 -moz-font-feature-settings: "swsh" 1;
 -ms-font-feature-settings: "swsh";
 -webkit-font-feature-settings: "swsh";
 -o-font-feature-settings: "swsh";
 font-feature-settings: "swsh";
}

The first two feature-settings address Firefox browsers (Mozilla changed the syntax with version 14 to the latter), the following are for Internet Explorer, other Webkit browsers, and Opera.


Webtype Joins Typecast App as Font Partner

Typecast is a browser-based app for testing and designing your website’s typography directly in the browser. It makes selecting fonts and styles very easy and prototyping painless and fast.

With Typecast you can now try Webtype fonts live in your browser, on text of any length and with any typography settings. Their easy-to-use controls let you design by eye to create beautiful, detailed type systems. As you work, the browser generates the code behind the scenes. So while you experiment with your favorite Webtype fonts, you produce useful, web-ready outputs simultaneously. When you’re done, just export or copy the CSS and use it on your site. (A license for the selected webfonts has to be obtained directly from us.)

We’re very excited to join this great web typography tool, because we want to help you make the best possible font choices and typographic decisions. Read all about Typecast’s features and advantages on their website. The service is free to use during the beta phase.

Playing around with Webtype fonts and different settings on Typecast.com


From Font Bureau: Serge

Serge Webtype specimen

We are delighted to introduce Cyrus Highsmith’s latest typeface design in a simultaneous release as web and desktop fonts from Font Bureau. Bonjour, Serge!

The lively script in three weights resembles the rich French lettering tradition (think Roger Excoffon’s Mistral) but combines it with a truly contemporary flavor, suitable for screen applications from medium large to extra striking. Some might not even call Serge a script, but rather an informal sans serif. Unconnected and angular, with straight terminals, it is less calligraphic and closer to sign painting and shop-front lettering. Use Serge for headlines and display typography, light or bold, to give your design a casual, cheery feel. It combines well with restrained sans serifs such as Benton Sans or Salvo, but also serifs like Poynter and Ibis.

If you design for a modern browser like Internet Explorer 10, Chrome 22 and Firefox 4 or later, you may want to try the ligatures and swash capitals included in Serge (Safari and Opera do not yet support OpenType features). Compare the specimen above with the one below and see how the replacement of just a few characters can give your text much more vigor and flair.
Serge Webtype specimen

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


Categories

Webtype on Twitter