On June 19 I had the pleasure of moderating a panel discussion and/or open critique of web-based typography at FontConf, the unconference for web fonts and @fontface. I was joined by designers Nick Zdon, Wendy Ruyle, Maria Besonen, and David Molanphy to discuss current trends, opportunities and challenges with designing type for the web. I asked each panelist to submit a list of links for us to view and discuss during in a variety of categories:

  • Feature type (logos, headlines, titles, or any case where type is used as the signature visual element),
  • Motion/movement/animation
  • Mobile devices (what are the unique challenges and opportunities here…and who is doing a good job of tackling them?)
  • Social media (this is an environment where a lot of content needs to come together on the fly…who is succeeding? Can we look beyond the “mainstream” networks and examine some emerging or fringe networks?)
  • Information Graphics (with the tidal wave of information on the web, who is doing a great job of graphically presenting raw info? GOOD magazine is a starting point…who else?)
  • Blog-ware (WordPress, Tumblr, Blogger, etc. all offer built-in templates with a variety of visual themes…most of them suck, but who is rising above?)
  • Sites and blogs that discuss typography
  • Foundries that are doing great work

Here are the links they sent in, as well as more info about each of the panelists:

David Molanphy

A random collection of facts about me. Feel free to ignore all of them.

• Born and raised in Honduras
• BFA from Brigham Young University – Idaho
• Trained as a print designer
• Have been working on interactive media for 10+ years
• Interactive Design Director at Larsen where I’ve been for 5 years
• Strong focus on interactive strategy and UX
• Took up AS3 as a hobby – along with HTML, CSS, JS, Objective C, etc.
• Almost psychotic addiction to all things geek
• Recently addicted to LOST (a bit late to the game, but I’m going strong on season 1)
• Like Twitter more than Facebook
• No such thing as too much chocolate
• Two screens is not enough
• Avid WIRED reader
• In constant search of the next best tech

Motion:

An homage to Reid Miles (via Monoscope)
I don’t understand a word he’s saying, but the typography is beautifully executed.

http://vimeo.com/4249739

The Art of the Title Sequence—A collection and discussion of movie title sequences.

http://www.artofthetitle.com/

Mobile Devices:
Wired Magazine iPad Application

http://www.youtube.com/watch?v=zBIitccr7bw

Magazine iPad Applications (Times, GQ, Popular Science)

http://vimeo.com/10676843

Information Graphics:

Good Magazine
http://www.good.is
/

New York Times Interactive Features
The Evolution of the World Cup Soccer Ball
Inaugural Words: 1789 to the Present
Murder: New York City

The Crisis of Credit Visualized by Jonathan Jarvis
http://vimeo.com/3261363

Blogs:

iA: Article, information graphics, blog theme, and mobile interface – all well done.
http://informationarchitects.jp
/

Ministry of Type: All kinds of typographic goodness
http://ministryoftype.co.uk
/

Typophile: Most active online community (in my opinion) of type designers and enthusiasts.
http://www.typophile.com

Miscellaneous:

TypeChart: Helps designers visualize how “safe” fonts will render on PC vs. Mac.
http://www.typechart.com

A List Apart: Fonts at the Crossing—Great article explaining the sate of web-fonts today
http://www.alistapart.com/articles/fonts-at-the-crossing/

Kerve Creative: Stumbled across this site and liked the treatment on the homepage.
http://www.kerve.co.uk
/

Grip Limited: Ontario-based firm with a pretty unique website. Looks great fullscreen.
http://www.griplimited.com/

Trends:
Some web trends I have noticed. As is the case with most trends, there are good and bad versions of each. It is also important to note that most of these trends are happening on design-related or niche technology sites. Not so much on more mainstream media.

There seems to be a move toward making everything really large – likely because of bigger screen size (which is a bit ironic because it seems like so much of our time is now spent on mobile devices).

There is also a very marked disregard to the idea of “the fold” with which I’m in a agreement with – for the most part. Scrolling is not considered an issue.

Wendy Ruyle

After 13 years of agency work, Wendy co-founded 5 by 5 Design in 2006. She is a past board member of the Minnesota chapter of the American Institute of Graphic Arts (AIGA) and is known for seeking out creative inspiration from unusual places, including bike trails, Halloween parties, and Tuesday night trivia at a local pub. Her work has been recognized in the AIGA Design Show of Excellence, the Minnesota PRSA Classics, Package Design USA, and Graphis, Print, and HOW magazines.

Feature Type

http://www.griplimited.com/

http://kalman.blogs.nytimes.com/

http://letterpresslove.com/

Motion/movement/animation

http://www.wishbonedesign.com/#/products/wishbone-bike/

http://www.iamalwayshungry.com

http://www.bemboszoo.com/Bembo.swf

Mobile Devices

Unique challenges include: smaller screen size, less white space, distracted audience (in a restaurant, on the bus, in a meeting), less patience for photo download time, variety of phone platforms and screen sizes, getting audience to different url

Opportunities: offering just the essential info distills your brand image, reduced expectations (maybe? depending on age of audience?), being a constant resource in your audience’s pocket

http://www.mobileawesomeness.com/

This is a great resource to see a bunch of great mobile sites. Some of my favorites include:

http://m.maccosmetics.com

http://www.designbleach.com/m

http://www.tide.qwapi.com for some reason this direct link isn’t working but you can see it here: http://www.mobileawesomeness.com/listings/gallery/tide/

Social Media

http://www.underconsideration.com/quipsologies/

http://www.groupon.com/minneapolis-stpaul/

I think Groupon does a really good job of localizing content (by city) and offering a variety of ways to get that content (web, email, twitter, facebook, rss, etc.). Plus, the copywriting makes even dull coupons seem smart and hip while at the same time really highlighting the benefits of each product or service.

Information Graphics
http://www.informationisbeautiful.net/
http://www.fastcompany.com/tag/infographic

Blog-ware
http://www.hermanmiller.com/

This site is built completely in WordPress, or so I’ve been told. I’m sure they used developers to push the limits, but it looks amazing
http://www.notcot.org/
http://100layercake.com/blog/

There is nothing revolutionary about this, I just think it is pretty, even with a bunch of ads down the side.

Sites and blogs that discuss typography
http://ilovetypography.com/
http://end-grain.net/
http://fortheloveoftype.blogspot.com/

Foundries that are doing great work
http://www.typography.com/home/index.php

http://jessicahische.com/spendstoomuchtimeinternetting/

Just for fun or maybe a category of type nerd sites
http://www.pentagram.com/what-type-are-you/
http://www.mcsweeneys.net/links/monologues/15comicsans.html

Another topic that is always a factor which I’m sure will be discussed throughout the conference
SEO—How do you make a site searchable and not use html text? Unless a site is getting a ton of PR or goes viral, Flash and static or photographic type are pretty useless in getting you ranked high on Google even with metadata. How do we balance the aesthetic factors with the practical ones?

Maria Besonen

Maria Besonen’s college prediction that she would some day work at Target eventually came true, but only after a few twists and turns along the way. In the year 2000, Maria graduated from the University of Minnesota Duluth and was hired on at Kilter, a youth-focused design firm in Minneapolis. There she designed and art directed in-store campaigns for Kangol, adidas and Nike for Lids stores and shortly after that moved into Kilter’s New York apartment to develop Avon’s youth brand called Mark. A year long stint at Catalyst Studio provided worthy Target campaign experience, but the pull of sunny Southern California was too strong. With a car full of Rubbermaid’s and a psycho comedienne roommate, Maria moved out to Santa Monica where she worked at Sony Music and PomWonderful, the pomegranate beverage company. Family pulled Maria back to Minnesota where she works on all things food for Target.

http://www.nytimes.com/pages/t-magazine/index.html — Sophisticated and attempting to be playful feature type.

http://www.anthropologie.com/anthro/index.jsp — Lovely, crafty type. Somewhat passive for a retail site yet appropriate for their brand.

http://www.holamun2.com/ — Latino network website (owned by NBC Universal) focused at Millennials. Promotes content interaction with viewers.

http://slushpilehell.tumblr.com/ — Witty literary site. Restrained look allows for language to be hero.

http://scharwath.com/ — Designer and typographer website.

http://www.huffingtonpost.com/ — Not because it’s good, but because it’s obnoxious.

Nick Zdon

Since graduating from the College of Visual Arts in St Paul, Nick has held senior design positions at Larsen Design Office and HartungKemp, where he currently works. He’s created work for Amnesty International, Best Buy, Buffalo Wild Wings, and Microsoft. He has recently gotten mixed up with Best Made Company by becoming a regular contributor to their project blog, their social media ranger, and all around ambassador. He lives in a small one bedroom apartment with no plants and no cats. His studio is not far from here.

Nick on Twitter: @nickzdon
Nick on the web: www.nickzdon.com

Feature type, the power of community
http://www.4chan.org/

http://failblog.org/
http://icanhascheezburger.com/

Motion animation
http://waterlife.nfb.ca/

Social media, evolution, content, and functionality
http://www.myspace.com/kc_051881

http://www.facebook.com/home.php
(any profile)
http://twitter.com/nickzdon
http://hootsuite.com

Mobile
http://www.gutenberg.org/wiki/Main_Page

http://www.wikipedia.org/

Blog
http://www.indexhibit.org/

http://www.thinkingmaking.com/

Infographics
http://newsmap.jp/

http://www.etsy.com/color.php

Spatial relationships, a return to form
http://www.lingscars.com/

http://yvettesbridalformal.com/

http://www.thetimes.co.uk/tto/news/
http://webtypography.net/

Irony
http://journals.tdl.org/jodi/

Must have
http://www.mcsweeneys.net/links/monologues/15comicsans.html