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

New from Sweet: Sweet Sans

Posted January 7, 2013

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. Also, unlike other revivals of this model, Van Bronkhorst has 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

Posted January 3, 2013

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

Posted December 21, 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

Posted December 18, 2012

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 Couture, and 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

Posted December 10, 2012

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

New Release: Serge

Posted November 28, 2012

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.

Introducing the Webtype Gallery

Posted November 21, 2012

Did you notice the new tab in our navigation? We added another section to Webtype.com: the Gallery. There we’ll regularly post examples of Webtype fonts in the wild so you can see yourself how they perform under real life conditions. Check back frequently as we add new sites almost daily.

The best part is, by teaming up with Fonts In Use, you can also contribute use-cases of fonts from Webtype yourself. Read about how to post to Fonts In Use here, then simply include “Webtype” in the tag field and they will be added to the Gallery page.

New Release: Salvo Sans & Salvo Serif

Posted November 13, 2012

We are happy to introduce Webtype’s most extensive type series to date — Salvo Sans and Salvo Serif. The exceptionally comprehensive and versatile families count as many as 60 fonts altogether: sans and slab-serif styles in five weights and three width plus italics, ranging from Black to Light and Normal to Extra Condensed.

Cyrus Highsmith originally designed Salvo Sans and Salvo Serif for the American Association of Retired Persons (AARP) to visually tie together their varied set of publications and prove that design for the elderly does not have to be stale. It has since then become a favorite in editorial design, now finally also available for screen applications.

What makes the Salvo series especially multi-talented is that the fonts are available in different widths. While distinct letterforms, like the prominent lowercase a and g, give flavor and vigor to text set in the normal width, the condensed styles are more restrained and very adaptive. The bold weights of both, Salvo Sans and Serif, make for forceful headlines but remain as legible as possible thanks to open apertures and a large x-height. The lighter weights extrude more sophistication and are suitable for body copy down to 14px. Salvo also combines well with other serifs such as Poynter Old Style, Benton Modern or Ibis.

As with all fonts on Webtype, Salvo Sans and Salvo Serif can be tested free of charge for 30 days. For more details, see their webfont pages.

New script on Webtype: Tangier

Posted November 9, 2012

Need an elegant script for display typography on the web? The charming Tangier is now available on Webtype. The family was designed by Richard Lipton, a master in exploring the possibilities of Spencerian penmanship. Inspired by the lettering on a catalog cover, Lipton developed a lively four-weight series, with a black style that pushes the boundaries for contrast in a script.

Tangier is the first script from Font Bureau exclusively available on Webtype, and is especially well suited for the screen due to its large x-height, an attribute that is rare in formal scripts. Use it for beautiful headlines or other extra large applications together with your body font of choice. It combines well with almost all roman typefaces.

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

Webtype in use: Smokeybones.com

Posted October 3, 2012

Over on Smokey Bones’ website you can see burgers stacking, glasses emptying, gift cards and billiard balls moving around. And of course Interstate Condensed and News Gothic Condensed in action.The website was revamped by design studio Push and the interactive design consultancy Welikesmall in summer last year, but it feels just as fresh, especially now the applied parallax effect for scrolling on websites is getting more and more popular. Fonts by Webtype are used across all platforms — desktop, mobile sites and app — with Interstate Condensed for strong headlines and News Gothic for the body copy.

Continue reading →

Categories

Webtype on Twitter

Browse fonts by intended Size

Browse fonts by Category

Keep in touch with Webtype

More info about Webtype