The Climate Reality Project

This tile-based layout presents a vigorous and lively design pallet mixing up lots of typography, color, proportion and transitions to create a busy but organised effect. It’s interesting to note h…

Fear The Grizzly

An italic didone can be a very different beast to its upright sibling. Both are highly formalized, but where the upright says “stately and statuesque” and is a favorite of fashion and high class con…

Alex Talmon

Heavy all-caps titles centered over widescreen photography is a popular and well established design pattern, but it’s still worth highlighting nice examples. Brandon Grotesque’s soft corners suit thi…

Berlin Art Prize

This isn’t strictly a webfont project since it uses the font virtually every computer has installed locally, thus no @font-face is required, but the typography is well worth highlightling n…

A Day in Big Data

OgilvyOne (a ‘Customer Engagement’ branch of the Ogilvy + Mather empire) made this scrolling infographic to accompany their film on the topic of Big Data. For the type they have paired Proxima Nova for…

Lotto Miljonairs

The bright, blocky illustrative infographics on this site promoting the Belgian lottery are nicely complemented by the Soho® Gothic typeface designed by Monotype’s Seb Lester.

Pol Solsona

The split title on the home page of this Finnish designer’s portfolio site is a wonderfully effective way to create a sense of depth in what otherwise is a black and white layout and text set in H…

Dagobert

This French digital agency pulls off the trick of setting large bold type (in Futura®) together with blocky elements and simple geometric shapes, but not have it feel like a Duplo Lego play set. …

One Design Company

An impeccably aligned grid with a simple and well thought-out type hierarchy means this Chicago design agency can do a lot with very little – just Futura® Bold for headlines and Gotham for text. That gr…

Rokkan

This brand consultancy pairs the classical, renaissance-influenced Minion with Avenir’s rationalist simplicity. The goals here seem to be a clarity of vision expressed by generously sized headlines a…

Rogue Society Gin

This site for a New Zealand gin producer mixes contrasting design elements nicely: rough brush strokes vs slick geometric forms; photographs set against illustrations; organised layout interrupted by…

Gubb and Mackie

The clean lines of the Avenir® typeface slot in well with the primary colors and basic geometry of this fashion label’s online retail outlet.

rileyscycles_co_uk

Four type classes are effectively balanced against each other in this site for a local bike repair workshop: Bambola, also used in the workshop’s sign, is an informal brush script that is adaptable e…

Diesel Black Gold 2014

UPDATED: For the 2014 season, Hello Monday have replaced Sackers Grotesque with the simpler, skinnier News Gothic Light. We observed last year that Sackers Gothic was an interesting departure from…

Mijlo

We're featuring this almost solely because of the drop cap in the blog article layout – even though this is a simple trick to pull off, it’s still a rare sight and, weirdly, felt more common in the days…

Bloomberg Visual Data

These interactive infographicas by Bloomberg Visual Data use the Avenir® Next typeface throughout the interface. It all adds up to some very slickly and compellingly presented data stories, to which …

Burnkit

There's no escaping the fact that there's some things the Helvetica® Neue typeface is perfect for, and this agency's portfolio site gets the tightly-stacked, all-caps headline just right – not too hea…

Frontier Visuals

Trade Gothic® works well with the show reels at the center of this film production agency’s presentation. Its condensed width allows a larger font size, without taking up too much horizontal width, an…

St Marks Square

This site for an urban development scheme unites Dala Floda, a stencil face based on letterforms from the Renaissance era, and Graphik, a mid-century-modernist sans – both typefaces from Commercial T…

High Tide

The text on this agency’s portfolio site is very minimal – just a few project names, titles, tags, plus the slightly longer about page shown in our screen grab (above); the minimalism is ably abetted by F…

Project 53

The Avenir® Next typeface is used here as part of a fairly neutral, muted design palette. Together with the cool pastels and warm greys of the color scheme, it forms an understated backdrop to this …

Monte Ré

The site for this Italian food manufacturer uses three weights of Brandon Grotesque for all text, heading and navigation settings. It's a spacious, well organised layout with all text content packed…

Agens

This agency portfolio for Norwegian mobile software specialists Agens goes for a clean, spacious text-centric layout, with copy that never feels too dense or too much to read in one go. This is down…

The Future of the Airline Website

Fantasy Interactive have created this minisite to get across their ideas for how the airline industry could improve their online strategies. It’s a single scrolling page dominated by all-caps H…

Aprilzero

DIN typefaces are a popular choice for setting data-oriented content; this example by Anand Sharma presents the personal data gathered by his smartphone regarding his various activities. DIN’s p…

The Designers Institute

A disciplined grid, minimal color and a coherent typographic hierarchy combine to create this clinical and incisive layout for The Designers Institute in New Zealand. The Avenir typeface’s clean, m…

Orchard Keepers

This site promoting a set of restored holiday cottages in Victoria, Australia, uses Yellow Design’s Veneer, ITC American Typewriter and House Industries’ Neutraface Text. Veneer and American Typ…

Nearly Impossible Conference

The site for this conference in New York employs a flat aesthetic which the designers lift with some attractively detailed icons in conjunction with Trend Sans by Latinotype. Trend is a chromatic…

Neotokio

Italian design studio Neotokio! have built a dramatic, high contrast type-centric layout for their own portfolio site based on Bembo and Univers. The largest texts have been created as images (we'll…

Present Plus

This Dutch team of designers, developers and directors take two sans serif fonts with roots in the same modernist traditions — pairing the bold of Avenir for titles, with Univers’ regular…

Protest Boardwear

This online store for snowsports retailer Protest Boardwear uses Paratype’s Futura® throughout. Headings, titles and callouts are all set in all caps. The image overlays might have benefited …

Speedo USA: Art of the Cap

Castle Type’s Standard CT is a modern digitization of the International Modernist classic Standard, a typeface that existed contemporaneously with Helvetica® Neue and Akzidenz Grotesk, and …

Startup Manifesto

The Nimbus Sans™ typeface is, to all intents and purposes, an interpretation of a more famous Swiss typeface, with some added widths and weights not found in the “original.” — some d…

Stitch Design Co.

This digital media and branding agency from South Carolina lead with the Trade Gothic® typeface for their site’s principal typography. A quintessential advertiser’s typeface, Trade Gothic® adds a class…

The Case Study Kit

This site poking fun at ad agencies who all churn out the same kinds of promo films about themselves uses the Avenir® typeface to tap into the zeitgeisty trend for minimalist, skinny sans serif …

The Year in Kickstarter 2013

The Year in Kickstarter 2013, confidently and typographically told in various weights and widths of the Helvetica® Neue typeface.

Travel Alberta

The Helvetica® Neue typeface is set in extremely contrasting weights and colors for this Canadian tourism promotion; flair and exuberance is balanced by a sensible, sober grid structure and plenty of …

Good Morning BC

This promotional minisite for the British Columbia Egg Marketing Board combines short films, story telling, incentivised social sharing and a photography contest. FaceType's Strangelove Text is used…

The Uprising Creative

Super skinny Linotype Univers® Next is paired with FontFont’s pleasingly crisp-yet-curvy grotesque, FF Dagny. Those arbitrary statistics were probably picked simply for an excuse to use extra co…

The History of Art in 100 Words

This site that purports to tell the story of art using just 100 words probably needs something like the Helvetica® Neue typeface. Used here, its relative lack of overt historical character allows …

between-red-and-toe

Online photo blogs never need much in the way of text, but that doesn’t mean the typography should be ignored. As well as an overlay of two bold red lines that recall an EKG readout, a designer’s inv…

Greyp Bikes

Neo Sans®, described by its designer as “futuristic without being gimmicky or ephemeral”, is a nice fit for this site promoting a hybrid bicycle/motorbike. Like the product itself, Neo Sans is an intr…

Ming Labs

Geogrotesque really looks at its best in giant, skinny headlines – as it is set here for Ming Labs’ agency site. The thinner weights particularly benefit from plenty of breathing room. Stylistically, Geog…

Wondersauce

There’s a simple, undemonstrative clarity to condensed sans serif type, as nicely shown in this example from digital agency Wondersauce who use Linotype’s Univers® Next Condensed Light …

Desktime

The design challenge in single scrolling web pages is to organise the content into discrete sections, yet retain a smooth flow over the whole sequence. In this case, a site presenting a service…

FCINQ

The predominantly dark theme of this portfolio site for French agency FCINQ is built around Proxima Nova Black for headlines and navigation. The weightiness is alleviated by sprightly transitions,…

Miriam Schaaf

This Munich-based fashion studio uses New Letter Gothic to evoke a manual, machine made aesthetic while retaining a proportional spacing that is more suitable for extended text settings than more…

Moving Things Design Company

Niveau Grotesk and its sister face Niveau Serif are a pair of typeface families from HVD Fonts that draw on classic nineteenth century advertising grotesques as inspiration. The sans version, used…

Worldwide Print

This is a clear, bright and spacious layout, and Brandon Grotesque, with its tall ascenders and geometric construction suits it well. There are a couple of places where the Light weight would have…

Bond

This is a good example of how using a hand writing font needn't necessary mean a rough, natural aesthetic. The designers for this international development employment association website have kept…