The Typekit Blog

This week’s sites we like opens the new year with a redesign, a new adventure, and a lesson in social media.

Pentagram is the world’s largest independent design consultancy. Their new design retains their minimalistic ethos and timeless color palette, with FF Dagny used for navigation, headings, and body text. The combination of grotesk (FF Dagny) and didone (Pentagram’s logo) is both classic and becoming.

The New Adventures in Web Design conference takes place on January 20th in Nottingham. Three variations of Proxima Nova—regular, condensed, and extra condensed—lend a pleasing hierarchy and an overall sense of cohesion. Be sure to hover over the diagram on the home page for some CSS transform action.

Not just for moms, but just in time, Jessica Hische brings us a succinct guide for Twitter noobs. Museo Slab and Museo Sans work in concert to clarify the subtle etiquette of tweets. Note how the long line length allows the full-justified text to display evenly, while the large text size ensures those long lines are readable.

The year’s final sites we like features three unique and carefully crafted sites.

Galpin Industries is the home of designer and entrepreneur Tyler Galpin. Sporting FF Tisa for body text, Skolar for small, all caps subheadings, and FF Meta for spry headlines, the design is athletic and pleasingly competitive.

Illustrator and printmaker Phineas X. Jones hangs his hat at Octophant. Headlines set in Chunk from the League of Movable Type develop an embossed, stone-like feel on hover, thanks to a well-placed text-shadow.

The Drawn Blog provides inspiration for illustration, animation, cartooning, and comic art. Museo and Museo Sans make for excellent body text, while FF Providence Sans comes in handy for the post-it note in the sidebar.

That’s all! We’ll be back with more sites to share in the new year.

Of the many “best of” lists that you’ll see this month, perhaps no other captures the zeitgeist as effectively as Twitter’s Year in Review. From celebrities (Justin Bieber, Kate Middleton) to movies (Harry Potter & the Deathly Hallows, Inception), and from technology (Google Android, Apple iPad) to global news events (the gulf oil spill, Cablegate), Twitter has been at our fingertips throughout 2010, and will almost certainly continue to be so into the new year.

Happily, the Twitter team have gathered this year’s highs and lows into a fascinating record for you to wax nostalgic over now and in the future.

The home page of Twitter 2010: Year in Review.

Twitter 2010: Year in Review features Twitter’s newest members, including Queen Noor and the White House Press secretary, plus Conan O’Brien, Bill Gates, and others; the years top trending topics, demonstrating the global love for fútbol, with the World Cup, vuvuzelas, and Pulpo Paul taking three of the top ten slots; the most powerful tweets of 2010, in a Big Picture-esque treatment, with photos and brief notes putting the tweets into context; plus the year’s most retweeted tweets, in which Stephen Colbert wins Twitter. All lovingly designed and illustrated, and featuring Proxima Nova, League Gothic, and FF Meta Serif with Typekit.

The Who’s New page makes a festive holiday tree from Twitter’s newest celebrities.

The most powerful tweets of 2010, with photos and contextual notes.

If viewed in a WebKit-based browser (either Chrome or Safari), you may notice that League Gothic’s typically clean lines have been attractively marred with dirt and scratches. A wee bit of CSS handles that effect, while maintaining the text’s native accessibility:

h1 {
  -webkit-mask-image: url(http://yearinreview.twitter.com/img/text-mask.png);
}

The -webkit-mask-image property uses an image to mask the element underneath it. In this case, a speckled and splattered png masks out parts of the text, giving it a worn, ramshackle look. Most importantly, it does this in a way that avoids using image replacement for the text, and degrades gracefully in non-WebKit browsers. When paired with the sunny color palette and Twitter’s signature blue sky, the grunge effectively captures the year itself: we leave 2010 a bit battered and perhaps worse for wear, but we still love Kanye West.

Three newly launched designs make for this week’s Sites we like.

Delta Embark is a travel guide for Google Chrome users and features Museo Sans. The thin, italic headlines make for a breezy, spirited design, perfect for planning your winter getaway.

Ecomagination represents “GE’s commitment to imagine and build innovative solutions to today’s environmental challenges while driving economic growth.” The site prominently features GE’s corporate font, GE Inspira, whose friendly, open shapes communicate accessibility and transparency. Moreover, Typekit’s support for custom fonts allows them to unify their branding both online and off.

Creative Journal features creative inspiration across graphic design, architecture, art, and photography. Text in Chaparral feels refined but informal, and pairs nicely with the sparse design and ample whitespace.

Noticed other sites using Typekit? Share them in the comments!

Some less commonly seen fonts appear in this week’s sites we like.

Infinvision uses Calluna and Le Monde Journal for wayfinding and FF Tisa for text. Calluna’s italic is elegant, but neighborly; while Le Monde Journal’s roman is dependable in all caps. The result is a site that is warm and authoritative, without being officious.

SimpleBits is the tiny creative studio of Dan Cederholm. FF Milo Web serves up headings, navigation, and body text, showcasing its versatility. Note the subtle use of an italic ampersand in the tagline.

United Pixelworkers is an unspoken alliance of web workers dedicated to building a better internet. Hellenic Wide lends a retro look, while slim white text-shadows suggest the type is stamped in to the background.

That’s all for today! Share sites that you like in the comments.

One way in which Typekit is making the web a better place is by providing solutions that are more accessible than those of yore. Gone are fussy image and Flash replacement techniques; with broad support for @font-face and Typekit’s easy set up, you can use real fonts in less time, and your site will be more accessible as a result.

The home page of marthastewart.com, now with Typekit.

Martha Stewart is the latest site to make the switch, having recently dropped Flash on their homepage in favor of Typekit. Museo Sans adorns the home page feature block, lending a clean, contemporary air to the page overall. Better yet, the designers, developers, and content editors behind the site now have a much more proficient workflow. Typekit takes care of delivering the fonts everywhere, so they can get back to work.

Today’s sites are all about the conversation — in blogs and in person.

Posterous makes it easy to install Typekit on your blog. Three great examples show what you can do: Adam Singer uses Lobster for headline text; Marc Hedlund wisely pairs Museo Slab headings with Museo Sans text, and Simon Ridgway uses Droid Serif across titles and text for a unified look.

Luke Dorny goes all FF Dagny all the time with a personal site that uses just one font and few colors but manages to convey a compelling, clear hierarchy. FF Dagny’s range of weights and flexibility at both large and small sizes comes in handy. Hover over the navigation at the top while using a WebKit-based browser (Safari or Chrome) for some nifty animation effects.

Content strategy is hot, and Confab 2011 is even hotter with Proxima Nova and League Gothic. League Gothic’s straight, condensed shape contrasts nicely with Proxima Nova’s curves, and both look their best in the bright color palette.

Share sites that you like in the comments!

Webvanta is a hosted service that enables designers and agencies to quickly build database-driven web sites without programming. Starting today, most of Webvanta’s themes come with Typekit preinstalled.

The Basic SmartTheme from Webvanta, with Museo Slab and Museo Sans from Typekit

Each of Webvanta’s themes is intended as a starting point for your own design; with Typekit all ready to go, it couldn’t be any easier to get up and running. Want to use fonts that don’t come preinstalled? No problem — just create a Typekit account and you can hook it up to your Webvanta site in minutes. Head on over and get started on your own site today.

The Web Font Awards finalists were selected yesterday at the Future of Web Design conference. The sites are, as expected, supremely talented examples of web typography. But we’re especially proud that all of the finalists trust Typekit to deliver their fonts to the web.

Markert Immobilien is a German real estate website, sporting a classy black design with FF DIN. FF DIN is especially nice when set large and in all caps, as this site capably demonstrates.

Quipsologies chronicles curious and notable events in the design industry. Three different fonts coalesce into a uniquely interesting design: Skolar serves as body text; P22 Underground adorns headings (in the Petite Caps) and tiny sidebar text; while Coquette provides the whimsical numbers for each post. The combination is irresistible.

And the winner is: Design made in Germany, previously featured in Sites we like for its excellent use of FF DIN Round and spectacular illustrations. If you’ve already seen it, visit again and take a moment to resize the browser window. The responsive layout shows the designers’ commitment to the details.

Head on over to the Web Font Awards gallery to see all the entries.

Careful use of CSS3 marks the excellent round of sites we like this week.

The Kick Awesome Show is dedicated to design, the web, and general nerdery, not to mention fabulous typography. Proxima Nova Thin Extra Condensed looks, well, awesome set large and in all caps. A tiny bit of negative letter-spacing (just 3px) tightens the headline text. The casual button style — sporting FF Market and a CSS3 gradient — contrasts nicely.

Campaign Monitor’s Templates gallery features Droid Sans and Skolar. Skolar is a workhorse at text sizes, managing to be readable, authoritative, and friendly all at once. Droid Sans looks great knocked out against a red background, while a very subtle text-shadow lends just a bit of depth.

Designing Monsters is a small design agency based in Michigan. Headline text set in League Gothic pairs beautifully with the black and white color palette and narrow page width. Two different text-shadows applied to the heading create a wonderful, paper-like effect previously only achievable with images.

Noticed any other great sites? Share them in the comments.