BLOG

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

New from Font Bureau: Apres

Apres Specimen

Apres is an extensive sans-serif series by David Berlow originally designed for the Palm Pre smart phone in 2009 (now HP WebOS) for use both on screen and in their printed material. Initially, Berlow developed a family of six fonts for the Palm user-interface, which were subsequently expanded with the help of Richard Lipton and Dyana Weissman into a versatile family of 40 styles: five weights, four widths, plus italics.

The simple, open letterforms of Apres provide a clear and inviting experience for UI navigation, app development and readability on screen. For small-sized body copy or captions, Berlow drew a special version of Apres — Apres RE. It has a larger x-height and wider proportions for excellent rendering in font-sizes down to 9px across all platforms and browsers. (You can see the two families in action as typefaces for body copy on Slate if you change the window size: normal Apres for large viewports, Apres RE for phone and tablet screen sizes.) Read more about the history of Apres and Apres RE on the Font Bureau blog.

Apres and Apres RE (right) on Slate.

Apres and Apres RE (right) both in 15px on Slate. Apres RE has a much larger image on the body to stay legible in the smallest font-sizes.

Naturally, Apres is an ideal choice for complex user interface design, but the series is also well-suited for other applications such as editorial or shopping websites. Its modest nature makes it very easy to combine with other typefaces. For example, you can dress Apres up with elegant serif typefaces such as Harriet or Whitman, go casual by combining it with a sporty script like Mascot, or follow the forthright route and pair it with plain-spoken Brando.

As with all fonts on Webtype, Apres can be tested free of charge for 30 days. For more details, see the Apres and Apres RE family pages.

Apres as seen on ScientificAmerican.com, which also uses the typeface in its print edition. For more examples of Apres and Apres RE in the wild, check out Fonts In Use or the Webtype Gallery.


New from MVB Fonts: Mascot

Mascot

Even if sports aren’t your thing, you might find script varsity lettering from years past to have a certain appeal, perhaps conjuring simpler times. Naive and uneven, jaunty and legible — such casual scripts, with their requisite underline swooshes, were standard equipment for baseball teams from one-horse towns to the major leagues. To bring this aesthetic to the digital arena, Mark van Bronkhorst began with a vintage iron-on alphabet, redesigning the flocked, overlapping letters to behave as a script typeface, and expanding the character set to support all Latin-based languages. Despite its professional skill set with many ligatures and OpenType features, MVB Mascot retains the unvarnished spirit of its inspiration.

MascotOT

Alternate glyphs, e.g. for G, J, p and þ, as well as many ligatures (activated via the “liga” property) contribute to Mascot’s lively appearance. A set of swooshes can be added at the end of a word via the “ornm” feature. For a full overview see the Glyphs tab on the Mascot family page.

Mascot plays well with all text typefaces, certainly with sans-serifs with a slight retro touch. Try van Bronkhorst’s Sweet Sans for a bit of added calmness, or Nitti Grotesk, or Scout RE for body copy. As with all fonts on Webtype, Mascot can be tested free of charge for 30 days. For more details, see the Mascot family page.


New from Ludwig Type: Riga and Riga Screen

Riga

Riga by Ludwig Übele is a space-saving humanist sans-serif series, designed to work particularly well onscreen. Its personality is clear and practical; small caps and true italics give it a warm, somewhat sophisticated touch. Economical proportions, large x-height and open letter forms make Riga fit for long body copy, narrow columns and compact headlines. The family is suited for a wide variety of applications such as complex corporate design projects, editorial, information graphics, and branding.

Riga Screen

The four styles of Riga Screen, optimized for sizes down to 9px.

Riga Screen has been adjusted and optimized to complement the Riga family in font-sizes down to 9px. It is slightly lighter to compensate for the often richer rendering with subpixel-antialiasing, and wider than Riga to provide better legibility in body copy. Complex letter forms like the lowercase g have been simplified.

Riga comparison

A comparison of Riga (top) and Riga Screen (below)

Both Riga and Riga Screen combine well with a variety of serif families on Webtype, for instance Brando, the Harriet Series, or Übele’s Marat. As with all fonts on Webtype, Riga can be tested free of charge for 30 days. For more details, see the Riga and Riga Screen webfont pages.


Brand Everywhere: NYC Central Park

Continuing our Brand Everywhere series, we feature another exemplary execution of typographic consistency across platforms, from print to web to mobile.

central-park-welcome-signage

Green and friendly is the new face of New York City’s Central Park, and FB Titling Gothic is its new typeface. The comprehensive rebranding by mcgarrybowen met the Central Park Conservancy’s goal of making the 778-acre landmark richer and more welcoming. Three years after its introduction, the park’s identity is still going strong, and is now extended to all digital and print media for a seamless visitor experience.

Print & Signage

titling-gothic-for-central-park

central-park-identity

The core visual of the identity comes from the park itself: a long, green rectangle derived from an overhead map view. This is reflected in the logo and promotional materials, like the flyer and banner above. These narrow dimensions are also evident in mcgarrybowen’s choice of Titling Gothic Skyline, an ultra-condensed set of type that echoes the shape of the park, yet still reads comfortably.

central-park-sign

For informational and wayfinding signs throughout the park a less extreme width of Titling Gothic is used, but the color, portrait orientation, and typography remain consistent. See more photos of park signage and read more about it on the Font Bureau blog.

Web

Homepage---The-Official-Website-of-Central-Park-NYC

Following the lead of these print branding guidelines, the official Central Park website takes advantage of Titling Gothic’s recent availability on Webtype.

The size of the Titling Gothic family is highly unusual among webfonts, weighing in at 25 styles. That’s a lot of choice, especially for a web world that is still just getting used to having more than just regular, bold, and italics.

events

Of course, it’s not the opportunity to deploy two dozen styles on one web page that makes Titling Gothic so useful — it’s the breadth of weight and width options that the designer has at their disposal. With a multi-dimensional palette to choose from, the centralparknyc.org team selected a handful of contrasting yet compatible styles that serve the diverse needs of their site, from individually stylized homepage graphics, to event calendars, to site-seeing guides, to longer narratives.

history

Our only advice for smaller running text would be to bump up the size and letter-spacing, which we’ve done for the screenshot above. Bingo — this “Titling” type can deliver readable text, too.

Mobile App

central-park-app-screenshots

On every screen, the Central Park app is a natural extension of the print and web look. The Conservancy acknowledges and celebrates the fact that visitors will seek info from a variety of platforms, and the congruent identity makes it easy to move from the website to the phone you’re carrying with you in the park.

With an office in New York City just a few minutes away, Central Park is close to Webtype’s heart. We’re honored to be part of a comprehensive visual design that does justice to the park’s role as an urban oasis. Visit the park soon and experience the calm clarity for yourself.


New from Font Bureau: Giza

Giza specimen

The five weights of Giza’s normal “Five” width.

Font Bureau’s Giza series brings back the colorful power and variety of the original Egyptian letterforms of the Victorian era. Designer David Berlow based the family on showings in Vincent Figgins’ specimen of 1845, the triumphant introduction of this thunderous style. Giza’s 16 styles range from compressed to wide and bold to ultra fat, almost completely eliminating any white between and within the letterforms. The first number in the style name indicates its weight and the second number the width, with Nine Five being the heaviest.

Giza grid

Five widths — One, Three, Five, Seven, Nine — in five weights, with the ultra fat “Nine” styles in the bottom row.

GizaRE

Giza’s small-sized relative Giza RE, available in four styles for text as small as 9px.

 

While Giza is all about presence and punch in large sizes and display applications, Giza RE — its small-sized relative from the Reading Edge Series — complements the family for texts down to a font-size of 9px. With such a variety of styles at your disposal, Giza is a great choice for editorial sites, from striking compact headlines to the boldest banners. See the masthead of our blog for instance. And remember, you can test all font on Webtype free of charge for 30 days. For more details, see the Giza family page.

huzza

Yes! Punchy Giza Seven Three unmistakably getting the message across on represent.us.

Danilo home

Daniloblack.com is using Giza Five Five to great effect throughout their website.

Danilo

Danilo3

Danilo2


Webtype in use: Northwestern University Knight Lab

Knight-Lab-home

The goal of Northwestern University Knight Lab is to “promote quality journalism on the internet … through new prototypes, projects, and services”. Their work involves a lot of writing about the development of these projects and blogging about the issues that surround them. This, of course, amounts to a lot of text. And a text-heavy website can feel static and dull. But the design team avoids this through the savvy use of interesting, underused typefaces: Salvo Serif, Apres RE, and Turnip RE.

Northwestern_University_KnightLab_Logo1 Webfonts aside, the first thing that strikes you when you visit the site is the Lab’s lively logotype. It’s a bit unexpected. The mark does not follow the typographic tropes so common in journalism — classic newspaper serifs, plain gothics — signaling visitors to the Lab’s modern methods, combining news and technology.

The logo is also completely unique, a custom modification of Turnip with details borrowed from another Font Bureau face, Quiosco. It’s an example of how Font Bureau’s staff of designers can tailor their fonts available from Webtype (and the rest of the Font Bureau library) to suit specific needs.

Not only was the source foundry part of this customization, but it’s especially advantageous when the work can be done by the designer responsible for the typeface being adjusted. In this case, it was David Jonathan Ross who designed Turnip in 2012, imbuing it with some fairly unorthodox forms that emphasize the tension between inner and outer shapes. The Knight Lab designers liked Turnip overall, but found the curves in the ‘n’, ‘h’, and ‘b’ a little too unusual for their logo.

David Jonathan Ross describes the differences between Turnip’s and Quiosco’s curves.

David Jonathan Ross describes the differences between Turnip’s and Quiosco’s curves.

Ross reworked Turnip in response to this request, and also made the individual letters work as a group for this particular word.

I softened it up, and give it more of a true old-style stress, where the northeast corners are thickest. Then it was a matter of narrowing things slightly, tightening up the spacing and particular letter pairs … turns out that “knight” is a tricky word!

The final tweaks introduce the diamond symbol from Knight Lab’s logo into the dot of the ‘i’ and ear of the ‘g’.

Turnip for the Knight Lab logo, before and after customization.

Turnip for the Knight Lab logo, before and after customization.


New from Font Bureau: Tick and Tock

Tick&Tock

New releases Tick (top, with interspersed unicase glyphs) and Tock (in the two bottom lines)

Tick and Tock are two new stencil display faces by Cyrus Highsmith — individual but related. They play on a similar theme but with different details and in a different tone. Tick was born on a casually lettered book cover design by Highsmith. One can sense the fun he has in coming up with nonchalant letterforms made up of just a few parts. Tock later grew out of lively Tick. It is more restrained and regular, recalling vernacular industrial stencils, but an equally cool choice for informal display text, splash pages and banners.

Both typefaces, but especially Tick, come with nifty OpenType features for even more feistiness. Several lowercase and uppercase letters in Tick are joined by unicase forms. Fractions, standard ligatures, tortoises, slashed zeros and alternate quotation marks for Tock round out the character set. (If you want to know more about using OpenType features on the web, check out this blog post.)

OT features

As with all fonts on Webtype, Tick and Tock can be tested free of charge for 30 days. For more details, see the Tick and Tock family page or check out this fun webfont specimen we designed using CSS masks and more to demonstrate some of Tick and Tock’s unique talents.

site1
site2


Brando from Bold Monday

brando

Brando by Mike Abbink is a new contemporary serif exploring the balance between mechanical and egyptian forms. It was originally inspired by a bank logotype proposal, then subsequently developed into the robust typeface it is today. The light styles of Brando assume the shape of a humanist slab-serif, while the heavier weights feature just the right amount of contrast to give it a harmonious texture in text. The Italics strike an interesting balance between true italics and oblique.

The family’s eight weights — Hairline to Black — make Brando fit for display settings as well as the demands of continuous text. As such, it is great for editorial and identity design work and complex tasks that need typographic distinction and flexibility. The fonts come with OpenType amenities such as small caps (smcp), an alternate g with less pronounced ear, alternative currency symbols (ss01), fractions and a variety of numeral styles: proportional lining numerals (pnum, standard), oldstyle numerals (onum), tabular numerals (tnum) and a “slashed” zero with dot (zero). Read all about how you can use these on the web in this blog post.
features
Brando is a good-natured design that combines well with many sans-serifs, for instance Alright SansAften Screen or Marat Sans. Like all fonts on Webtype, it can be tested free of charge for 30 days. For more details, see the Brando webfont page.


Webtype in use: MFA Design Program at the School of Visual Arts NYC

MFA-Design-Mission

When it comes to presenting themselves online, design schools often tend to push the usability envelope in an effort to show off the innovative spirit of the institution. Amid this flurry of websites that are dazzling but confounding, the home for the School of Visual Arts MFA Design Program, designed by The Original Champions of Design (OCD), is refreshingly straightforward. The pages are a reflection of the maturity of the SVA MFA program itself, which was launched “as an alternative to programs that emphasize form over content”.

The MFA Design homepage’s simple structure allows for practical adaptations at various viewport widths.

A simple site structure allows for practical adaptations at various viewport widths. Note how the navigation reformats and resizes to remain accessible.

The homepage is deceptively simple, with two main columns divided into four main topic rows, but each section contains a wealth of content once you start digging. Heads and text are all presented by one typeface, Titling Gothic FB. While there are an astounding 25 styles of the sans serif family on Webtype to choose from, OCD practiced restraint, limiting themselves to just a few weights of one width.

MFA-Design-Faculty

This “Normal” width of Titling Gothic is actually quite broad. Its stoutness echoes Joe Finocchiaro’s custom lettering for the MFA Design logotype and — compared to the relatively condensed fonts we’re accustomed to seeing online — gives the site a distinctive look without resorting to flashiness or pretension. When set in bold and all-caps, Titling Gothic builds assertive bricks of clear labeling and clickable navigation.

MFA-Design-Apply

The designers even use Titling Gothic for text throughout the site, turning a blind eye to the assumption (found right in the typeface’s name) that it only be used for headlines. In many cases, this works just fine, especially with the font size is large.

MFA-Design-Events

For longer paragraphs of smaller type, however, one wonders if a stout, screen-optimized text face like Benton Sans RE or Giza RE might be a more prudent choice. But we’ll let you be the judge.

Text type quibbles aside, we salute the SVA team for this design. Rather than rely on visual gimmickry, they had confidence in their content. The result is understated but bold, and a fitting voice for the program.


Parkinson from Font Bureau

The Parkinson display family was designed in 1976 by Jim Parkinson for Rolling Stone magazine. Roger Black, back then its art director, was looking for an edgy, idiosyncratic style and found Parkinson to be the right lettering artist for this assignment (see this short video of Black on their collaboration). “It’s a crazy melding of the magazine’s original logo by San Francisco poster artist Rick Griffin and ATF Jenson,” says Parkinson, “I think of it as Nicholas Jenson on acid.” Following the rise of the magazine, more styles were added year after year up to the current 10 styles in four weights with italics and condensed.

Parkinson is a peculiar venetian oldstyle full of character. It is optimized for onscreen use down to 14 px, yet the sometimes wonky details best come into picture at display sizes. At Rolling Stone, the family has long been used to great effect alongside Titling Gothic — a contrasty and exciting combination. Or try Parkinson with Antenna or Scout, or our latest petite-sized serif family Custer RE.

RS montage

The different styles of Parkinson in use at Rolling Stone magazine

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


Categories

Webtype on Twitter