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

Georgia Pro & Verdana Pro: The Web’s Favorite Typefaces Get an Upgrade

Posted November 9, 2011

Georgia and Verdana rule the web. Designed by Matthew Carter, these fonts have been used on billions of pages. Now, through a partnership with Font Bureau, Carter & Cone, and Monotype Imaging, these families have been expanded as Georgia Pro and Verdana Pro, enhancing their functionality for print, web, and mobile use.

To introduce the new fonts, we’ve put together a Georgia Pro & Verdana Pro demo page, showing off their extended features, including:

  • Condensed widths
  • Light, Semi Bold, and Black weights
  • Small caps
  • Oldstyle & lining numerals, both with proportional and tabular width variations
  • Extended WGL language support, including Greek and Cyrillic characters
  • Improved kerning
  • All with extensive hinting, so they look good at any size on any platform

As with all fonts on Webtype, the new fonts can be tested free of charge for 30 days. Check out the Georgia Pro and Verdana Pro demo page to learn more, or go straight to the Georgia Pro and Verdana Pro pages on Webtype.

New font addition: Amplitude

Posted October 14, 2011

Now available for the web: Amplitude - 7 weights x 5 widths

Designed by Christian Schwartz and released by Font Bureau, the Amplitude typeface family is now available for the web, exclusively from Webtype.

Originally released in 2003, Amplitude derives inspiration from the “ink traps” found in typefaces designed for printing at small sizes on absorbent newsprint. Traditionally, these notches help prevent letterforms from filling in with ink, but Schwartz adapted the technique to create a dramatic effect at large display sizes.

The large family of 7 weights in 5 widths, provides for a wide palette of typographic hierarchy. With roots in “agate” print typefaces for small sizes, Amplitude’s decidedly squarish forms help reduce irregularities on the course pixel grid of the screen. However, care must be taken with the especially bold or condensed members of the family, which perform best at the largest sizes.

As with all fonts on Webtype, Amplitude can be tested free of charge for 30 days. Take a closer look here.

The New Web Typography: AIGA Chicago, October 6th

Posted September 26, 2011

AIGA Chicago has organized a panel discussion, moderated by Bill Davis of Monotype Imaging, to provide background on webfonts, the problems they solve, and the various options they offer designers. Webtype’s Nick Sherman will join David Demaree of Typekit, Erik Vorhes of VSA Partners and Typedia, and Jackson Cavanaugh of Okay Type.

The event takes place at 6:15pm on Thursday, October 6th, at Illinois Institute of Technology’s McCormick Tribune Campus Center. To attend, register online now.

GOOD/Corps uses multiple webfont vendors for their uniquely typographic website

Posted September 2, 2011

GOOD/Corps is a creative consultancy focusing on projects with positive social impact. An offshoot of the GOOD media platform, the organization helps companies put their resources toward good causes.

The GOOD/Corps website was designed by Atley Kasky and Keith Sharwath, and developed by Jon-Kyle of Cargo. The site is an excellent example of how one design can successfully make use of typefaces from multiple webfont services—a possibility many people don’t necessarily consider as an option when building their typographic palette.

To maintain the existing GOOD brand typography, the site uses Sabon from Webtype and Trade Gothic from Fonts.com Web Fonts. Complementing that is FontFont’s FF Bau (served via Typekit) which Kasky describes as striking “the right balance of irregular and modern”.

Sharwath noted a newfound sense of typographic versatility from the growing number of webfont options available today:

… This was the first project I’ve worked on where I felt we had the freedom to choose fonts in the same way we would on a print project. There’s finally a sufficient number of fonts available, and more coming out everyday.

He also explains that webfonts make the site faster:

Using web fonts to do most of the graphic heavy lifting also allowed us to come up with a design where all the content exists on a single plane. This would have meant heavy load times had we try to do the same design using antiquated methods like image-based type or flash.

The GOOD/Corps site is a single long-scrolling page (see partial zoom-out at right), a simplification which Kasky says allows for a more directed user experience:

The linear navigation and layout told [GOOD/Corps’] story best, you can take it all in by scrolling or you can bounce around for quick reference. It’s all right there on the table for the viewer to consume as they please.

To maximize on the simplified structure of the site, the team opted for bold, blatant typography and graphic elements. Kasky concludes:

We wanted it big, we wanted to be overt and obvious, we wanted to be simple and we wanted those things propped up by the details.

RegioBank Summer Tour

Posted August 5, 2011

Dutch financial institution RegioBank will be touring the Netherlands this summer, visiting various community-oriented events. Design studio Vandejong Amsterdam created a fun but simple map-based website to publicize the tour, pairing colorful illustrations and simple animation (mouse over the fish!) with clean and effective typography.

The choice of Benton Sans for a supporting typeface works well with the simple graphic style of the illustrations, achieving a friendly overall feeling without being cheesy or garish.

The site uses a combination of HTML, CSS, JavaScript, and Webtype to achieve what probably would have been done with Flash in previous years. Because the typography is live text, it can be easily indexed by search engines and translated to other languages while maintaining the same design – both significant advantages over a Flash implementation.

Original Dutch site (left) and automatic English translation.

Calendar of all events for the Summer Tour

Realosophy benefits from a wide range of Benton webfonts

Posted July 28, 2011

The site for Toronto-based realty broker, Realosophy, couldn’t be a better example of typeface combination done right. The designers at Elsted Communications employed Benton Modern Display beautifully in large sizes, with Benton Modern RE and Benton Sans RE for smaller body type – the very uses for which they were designed. The standard Benton Sans family rounds out the typographic palette, filling in for medium-to-large heads and subheads.

It’s refreshing to see special features and interfaces built around the unique fonts. The Neighborhood Match tool demonstrates what can be done when a designer has specific typefaces in mind while creating a site.

One aspect which sets Realosophy’s site apart is the design’s sense of scale and whitespace. By allowing type and graphic elements to grow apart from each other in size and placement, they increase their range of effective hierarchy. The combined effect opens up the page for more comfortable reading.

Though the site is specific to the Toronto area, the well-polished design by Elsted Communications puts it on par with an international operation. It’s a testament to the benefit of combining multiple fonts that serve specific purposes – a standard approach in traditional publishing that can serve web designers just as well.

New font addition: Garage Gothic

Posted June 30, 2011

Now available for web use: Garage Gothic, a condensed sans-serif in 3 weights

Font Bureau’s ever-popular Garage Gothic family of typefaces is now available for the web, exclusively from Webtype. Designed in 1992 by Tobias Frere-Jones, Garage Gothic was derived from numbered tickets given at city parking garages. The clean, condensed design works great at large sizes, for headlines and other other settings where an impact is needed but space is tight.

As with all fonts on Webtype, Garage Gothic can be tested free of charge for 30 days. Take a closer look here.

More flexible webfont browsing

Posted June 22, 2011

As the Webtype catalog continues to grow, we want to keep it easy for people to find the fonts they want as quickly and easily as possible. As such, you can now browse our catalog of webfonts with any combination of checkbox filters, based on stylistic categories, intended sizes, and foundries. People who have used our Font Swapper tool may be familiar with this interface for flexible browsing.

For some examples, you can now narrow your search down to all the webfonts intended for small sizes from Font Bureau, or all the sans-serif webfonts from Microsoft. In the future we look forward to adding more options like language support filters as well.

If you have any other ideas for improving the site, feel free to let us know in the comments below, via e-mail, or on Twitter.

Next Monday: Type@Cooper webfonts panel in NYC

Posted June 8, 2011

Next Monday, June 13th, join Webtype’s own Nick Sherman with Tim Brown of Typekit and Scott Kellum of Treesaver for a panel discussion on webfonts. Jessica Hische will moderate the conversation on the benefits, limitations, tips, and tricks related to type on the web. Get your questions ready ahead of time to ask at the event, or submit them on Twitter with the hashtag #cooperwebfonts.

The event will take place at Cooper Union’s Rose Auditorium (41 Cooper Square, at the corner of 7th Street) starting at 6:30pm.

This event is free and open to the public, but space is limited, so please RSVP.

Ford Technology stays on brand with Webtype

Posted May 18, 2011

Ford Motor Company recently launched a new area of their website showcasing their developments in automotive technology. The new Ford Technology section, which was designed by TeamDetroit, makes impressive use of webfonts served by Webtype.

Ford has been using Font Bureau’s Antenna as one of their primary corporate typefaces for a few months now, so the ability to use it on their website with Webtype allows them to maintain the same brand identity consistently online as well as they have in print and other media.

TeamDetroit made especially good use of the Antenna webfonts for the dynamic interface of the electric vehicle technology pages. Not only does the typeface serve as the backbone for displaying a rich hierarchy of information, it also keeps the site on brand with a unique visual style.

In addition to being a great example of design with webfonts, the Ford Technology site is notable as coming from a major corporation. We thoroughly enjoy seeing Webtype implemented on the sites of savvy designers and developers, we also look forward to seeing more and more larger companies taking advantage of all the benefits of webfonts.

Categories

Webtype on Twitter

Browse fonts by intended Size

Browse fonts by Category

Keep in touch with Webtype

More info about Webtype