BLOG

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

Brand Everywhere: Myspace

In our continuing series, Brand Everywhere, we look at organizations who present a strong, seamless identity by standardizing their typography across all media. After our first case study on Ally Bank, today we switch gears to social networks, demonstrating the power of consistent typography in the relaunching of a well-known but reimagined brand, Myspace.

Myspace profile page

The new Myspace, designed by Josephmark, is unlike anything you remember from the infamous user-customizable disarray of the old social network. The new design approach could be considered more authoritarian/top-down, but results in a much cleaner, more sophisticated look. And there are still plenty of opportunities for users to customize pages, it’s just that now they’re offered within a clear structure and functional type.

In fact, the entire experience is driven in large part by typography. A broad variety of views and layouts are all anchored by a single type family, Benton Sans.

The new typographic look is obvious from the start, as Benton Sans welcomes new users and guides them through the process of creating a profile.

The new typographic look is obvious from the start, as Benton Sans welcomes new users and guides them through the process of creating a profile.

Mashable ran an in-depth interview with Josephmark CEO Ben Johnston and Creative Director Jess Huddart about the project, but we wanted to hear more about their approach to the type, of course, so here’s a quick Q&A with the firm:

Why did you select the typefaces? How do they support the brand?
We were heavily involved in selecting, refining and using the Benton Sans typeface. We were looking for a clean, modern, sophisticated font, but most importantly we were looking for something that aided the design, without overtaking it. So Benton Sans, being a fairly neutral font, was the front-runner from the beginning. Having a large family, with a variety of weights and availability of different languages also helped. This was partly why we decided against creating our own typeface.

The complex hierarchy of information on Myspace demands more than the standard regular and bold weights. The site is clarified through the use of variety of styles – from Thin and Light to Bold and Black.

The complex hierarchy of information on Myspace demands more than the standard regular and bold weights. Views are clarified through the use of a variety of styles — from Thin and Light, to Bold and Black.

How was the experience of licensing and implementing the fonts? Did you make any customizations to the typeface?
For such a massive site, licensing naturally took a bit longer to do. We worked with the guys at Webtype to make sure the font was completely web-optimised for both Windows and Mac, especially for sizes 14px and less. For a long time, designers have been limited by web-safe fonts, so we needed to cross-test on multiple platforms (from desktop to television and portable device) to ensure it was truly optimized for a universal audience.

Myspace’s new infographic views give musicians new insight into their fanbase. The clarity but subtle personality of Benton Sans shows, even in the figures.

Myspace’s new infographic views give musicians insight into their fan base. The clarity and subtle personality of Benton Sans is evident, even in the figures.

What other elements — such as color, structures, imagery, language — are key to the brand?
The new Myspace brand is exciting and raw, so we needed to design a platform that could complement this energy and immersiveness. We intentionally made the colour palette simple and neutral so that the emphasis is placed on the content, rather than the structure. During conception, the words “expansive”, “unconfined”, “free” and “full-screen” were used a lot. We wanted profiles to feel like blank canvases, where the user has the freedom and space to express themselves.

Big, bold type makes every search a more engaging experience.

Big, bold type makes every search a more engaging experience.

iPhone App

Myspace’s new look extends to their iOS app where Benton Sans is embedded and used exclusively throughout. The app not only offers a mobile-optimized view of the site but also tosses in the ability to create animated GIFs and listen to personalized radio stations.

myspace-app-content
myspace-app-prefs

Benton Sans replaces iOS’s standard Neue Helvetica for all UI elements, including the controls in the GIF animation creator.

Benton Sans replaces iOS’s standard Neue Helvetica for all UI elements — including content from the site, app preferences, and controls in the GIF animation creator.

TV Advertising

The identity type makes a couple of quick but significant appearances in the first TV commercials to air since the official Myspace debut. The raucous 30-second spots begin with “this is myspace” in the brand’s signature Benton Sans, and end with a list of Myspace URLs for the participants in the ad. These brief bookends are all one needs to associate the commercial with the new site. It’s a testament to the power of a comprehensive typographic brand.

myspace-ad

You can read more about the new Myspace design at Co.design and The Next Web. (Coincidentally, TNW launched a redesign using Benton Sans, too. No wonder they’re a fan.)


Marat and Marat Sans from LudwigType

We are happy to welcome our latest foundry partner Berlin-based LudwigType and designer Ludwig Übele to Webtype. The German type specialist honed his skills at the typeface design masters program at the Royal Academy of the Arts in the Netherlands. Now back in Germany, he designs typefaces for his own label, works on brand development, and collaborates with type design legend Georg Salden under the name Typemanufactur.

Marat Specimen

Our first releases from LudwigType are Marat and Marat Sans — an extensive type series of distinct personality. Marat was originally conceived as a magazine face but evolved into a comprehensive family for general use, combining the best features of all genres. While most letterforms and the swinging italics cite classic book faces, the strong serifs in letters like a, c, or s induce a vertical emphasis that allows the letterforms to become bold and striking (see Marat Fat). This makes Marat interesting for display use and body copy alike. Opening up counters and the moderate proportions contribute to good readability where space is limited.
Marat styles

Marat Sans, designed several years later, is not just a supporting sibling with the serifs chopped off, but a typeface with its own unique identity. It continues the dual personality of Marat — half Humanist, half Rational traits. Ink traps and basic structure hint at the seriffed partner but the design is more tamed down and regular. The x-height is slightly larger, the caps slightly narrower, the letterforms a bit more closed than in Marat, resulting in a cleaner, more adaptable typeface.

Marat Sans is available in nine finely graduated weights — three more than Marat — plus true italics, making it suitable for a very wide range of applications and sizes down to 10px in the lighter weights. Naturally Marat and Marat Sans make perfect pairings, but they also both combine well with other type families. How about Marat and Solitaire for instance, or Marat Sans with Proforma or Harriet?

Marat, Marat Sans, or any other typeface on Webtype can be tested free of charge for 30 days. For more details, see the Marat and Marat Sans webfont pages.


Scout and Scout RE from Font Bureau

Scout Specimen

Scout, our latest release from Font Bureau, is a fresh yet pleasantly familiar sans serif by Cyrus Highsmith. Originally drawn for the redesign of the magazine Entertainment Weekly, Highsmith found inspiration in early 20th century German grotesks such as Venus, DIN, or Cairoli and its doubles, which were ubiquitously popular between the 1910s and 1950s.

Unlike other early sans serifs and neo-grotesques, Scout is less broad and less rationalized. The oval forms fit the angled terminals, opening up counters and making Scout more readable and approachable. This is particularly so in Scout RE — Scout’s specialized companion for small font sizes and a new member of Font Bureau’s Reading Edge series of typefaces, optimized for excellent rendering down to 9 px. Compared to other sans serifs in this series, Scout RE is of more narrow proportions, making it an ideal choice for user interfaces and small labels.

Scout RE text sample

The Scout series consist of 24 fonts, six weights with Italics and Condensed, plus Scout RE in four styles. Use it for body copy for less literary texts, captions, or side notes. The condensed styles lend themselves for punchy headlines. Scout combines well with Ibis RE, Highsmith’s serif of similar proportions and rhythm, and other workhorses such as Turnip or Benton Modern.

Scout styles

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


Solitaire from MVB Fonts

Solitaire specimen
After the introduction of his Sweet label with us earlier this year, we are happy to welcome Mark van Bronkhorst with his type foundry MVB fonts on Webtype, too. Our first release is MVB Solitaire — a no-frills tempered humanist sans.

Bronkhorst intended the design to blend into the background and let the content speak through the legible, unbiased letter forms; nevertheless, he managed to give them a lively, contemporary character, especially visible in the Light and Black styles as well as the buoyant Italics. MVB Solitaire webfonts are available in six well-attuned weights with the Regular and Book styles comparably close in stroke thickness for cases where consistent color across different font-sizes is desired. The desktop fonts are even more finely graduated into 11 weights with Extra Light and Thin styles, which are available as webfonts upon request.
Solitaire styles
MVB Solitaire’s text weights are suited for body copy down to 10 px. The Bold styles make for strong headlines while the Light shines in large display applications. It combines well with serif faces such as Poynter RE, Turnip RE or characterful Prensa.

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

Stacked styles_bw


Dispatch and Dispatch Mono from Font Bureau

Dispatch
Our latest releases from Font Bureau are the slab serif families Dispatch and its brand new small-sized companion, Dispatch Mono. Cyrus Highsmith created the series in his search for a typeface with industrial atmosphere that can serve a variety of applications and sizes. Inspired by the angular letterforms found on engineering blueprints, shipping labels or in typescript, Dispatch is a powerful and energetic addition to the Webtype library.
Dispatch Styles
Dispatch Mono — a Webtype exclusive — grew from the original Dispatch series but adds hints of typewritten correspondence and computer code to the angular appearance. With computer screens and small sizes in mind, Highsmith gave Dispatch Mono an extra large x-height and generous spacing. Like Font Bureau’s Reading Edge series, the family was optimized for clear rendering across the board, with hinting for font sizes down to 9px.

dispatch mono textsampleDispatch Mono Styles
Dispatch is an all-purpose slab serif, suitable for a wide range of applications such as headlines, editorial design and advertising, with Dispatch Mono as its small-sized partner. It pairs well with squarish sans serifs such as Antenna or Amplitude. Its sans serif sibling from the same designer — Stainless — will be available on Webtype shortly.

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


Trio Grotesk from Bold Monday

Trio specimen

The second release from our Dutch foundry partner Bold Monday is Trio Grotesk. And it is one with an interesting Dutch background, too.

While studying in the Netherlands, Trio Grotesk’s designer Florian Schick discovered the only two remaining printed copies of Dutch modernist Piet Zwart’s influential essay Van oude tot nieuwe typografie (From Old to New Typography) in book museum Meermanno in The Hague. It was printed by Drukkerij Trio and set in an early 20th-century sans serif — Kaart Antiek. Schick decided to revive the typeface, and very closely that is, incorporating the typical rounding and ink spread of the 7 point letterpress printed text in his model. The result is Trio Grotesk — a charming rounded sans serif of broad proportions with a discreet modernist feel.

Trio styles small

The fonts are optimized for our medium size range (14 px+) and lend themselves particularily well for all-caps settings. The character set consists of as many as 688 glyphs with Latin 1 and 2 language support as well as numerous symbols like arrows, manicules, various sets of figures, and a series of Dutch countryside themed pictograms, accessible via their unicode value. If you don’t want to make use of the full character set, you can subset the fonts in your account settings to reduce the file size. Trio Grotesk combines well with many text fonts, for instance the similarly round Apres RE or old-style Poynter Serif RE.

As with all fonts on Webtype, Trio Grotesk can be tested free of charge for 30 days. For more details, see the Trio Grotesk webfont page. For information about the desktop fonts and images of Trio Grotesk’s lovely printed specimen book, check out Bold Monday’s website.


Griffith Gothic from from Font Bureau

Griffith Gothic specimen
Font Bureau’s popular Griffith Gothic is now available as webfonts on Webtype. The series, designed by Tobias Frere-Jones, has its roots in the typeface Bell Gothic from 1937 by Chauncey Griffith, long-time Mergenthaler Linotype type director.

Of all the typefaces Griffith designed and directed throughout his career, he considers Bell Gothic his most original design. Commissioned by AT&T especially for the use in telephone directories, its open, economical forms are drawn to stay highly legible in small sizes and under demanding printing conditions. The serifs on ‘I’ and ‘1’, deep notches to prevent joints from filling in, as well as the overall sharp corners and tapered terminals became Bell Gothic’s signature features.

For his revival under the name Griffith Gothic, Tobias Frere-Jones removed obsolete remains of old typesetting systems but retained the characteristic thinning of joints as a salient trait. Initially drawn as the house sans serif for Fast Company, he developed the typeface into a full series in six weights, accompanied by a condensed variant and italics for the regular width.

Although originally designed for text and listings in small sizes, Griffith Gothic is well suited as a strong headline face where its distinct features are allowed to stand out in display sizes. It combines well with all genres of serif typefaces, such as Poynter Serif RE, Harriet Text, or the equally edged and economical Proforma.

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


The Freight Series from Garage Fonts

Freight Full Series

With the release of all serif variants, we are proud to now offer the full Freight Series by Joshua Darden as one of the most extensive contemporary type series available for the web. Freight’s four size-specific designs — Big, Display, Text and Micro — and their sans-serif companions, each in six weights with distinct italics, add up to a total of 72 styles, making Freight an exeptionally comprehensive system for a wide variety of applications.

Freight All Styles

While the Text styles are suitable for mid-range reading sizes, the Display styles feature increased stroke contrast and finer details adapted for headlines and display typography. The Big styles with their even tighter spacing and sharpness shine in the very largest uses — the bigger the better. At the other end of the spectrum are the Micro styles with their coarse, exaggerated traits and sturdy shapes for better performance at small font sizes. Although not quite the design intention, try Freight Micro for large sizes, too, as the chunky forms become interestingly expressive and striking in headlines. The sans-serif styles complement the set with their adaptable, unobstrusive appearance.

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


Proforma from Font Bureau

Proforma

Our latest addition from Font Bureau is Proforma, a typeface by Petr van Blokland with an interesting background. Initially designed in 1983 for Purup, a Danish company specializing in forms (hence “pro forma”), it was one of the first typefaces developed specifically for low and medium resolution output. Proforma features classic oldstyle shapes and proportions, but swellings on stems are achieved by straight lines with distinct edges. These, as well as the simple, tapered serifs, are much easier to render than the smoothly modulated curves of traditional text faces. Today, this makes Proforma especially suited for screen typography and the web.

Proforma family

Proforma’s six weights are comparably close to each other, originally to enable compensation of different stroke weight on different papers, colors, or inverted text. This can be just as useful on the screen in order to take into account backlit surfaces and multiple resolutions. The roman styles are accompanied by pronounced true italics that give distinction in text sizes and reveal their interesting angularity in large sizes. If you want to combine Proforma with a sans serif, try Alright Sans, Amplitude or Salvo Sans. (Petr van Blokland designed Productus as a matching companion, available on Webtype in the near future.)

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


Freight Sans from Garage Fonts

Freight Specimen
We are delighted to welcome Garage Fonts as a new foundry on Webtype with their first release Freight Sans, heralding the exceptionally extensive Freight type series by Joshua Darden soon to follow in its entirety.

While the Freight series’ serif styles exist in several size-specific variants, from Micro to Big, Freight Sans is designed as a versatile, all-purpose sans serif fitting a large variety of applications. The six weights, light to black, plus italics provide sufficient styles for legible body copy as well as delicate or beefy display typography. We also offer the recently added condensed styles as webfonts for extra punchy headlines.


The family’s spacing is attuned to work well in most sizes, from medium to large, while the rendering is optimized for font-sizes down to 14 px. If you are looking to combine Freight Sans with a serif for body copy, try Harriet Text or Giza RE. In larger sizes, Whitman DisplayPrensa or Trilby may compliment the sans in an interesting way. Or, for a perfectly harmonious pairing, just wait a few more weeks until the serif members of the Freight series are ready for release on Webtype.

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


Categories

Webtype on Twitter