Another one I stumbled across this morning is Friends of Type. This one is pretty much just a few type nerds generating work and putting it out there. 

here are duh links

http://friendsoftype.com/

http://www.sharesomecandy.com/typography/

This guy uses typography like a bad ass! Enjoy!

http://www.wordle.net/

Hey guys, I just came across this totally cool site. I’m not sure  how they did this, but the site is kinda a CGI walk through of these cave paintings done a while ago. It reminds me of the CGI in the movies Beowolf  and Polar Express if you’ve ever seen those. So it looks like CGI, but it was totally mapped out using some technology. It really feels like you’re almost there. Check it out!

So, I’m going to start with something really simple. It’s a website that most of us visit every day, if not more. Google.

When Google.com first launched people were confused by the simplicity of the site. At the time, many sites like it were cluttered with a lot of different elements and people testing the Google site didn’t think it had finished loading (that’s why the copyright is so close to the search field). And since there are so few elements to the Google site (only 33 words in total), every word matters. You know exactly what site you are visiting (the Google logo is the biggest element and right in the middle of the site) and the search field is right below it, so it’s the next thing you see and the main reason you are on the site to begin with probably. I like how Google is able to edit themselves and keep the simplicity of the site even when they add the Google doodles, they still keep with site integrity.

We all know Sagmeister’s work. I really like how he kept his site fairly simple. (Yes, most of my posts are really simple uses of type, but they work!) Sagmeister could have done a million things but he chose to have the type be the main focus of the landing page. It’s a simple typeface, but the he ads motion it it by making each box a button to click on that will take you to the next page.

I like the fact that the typeface is so simple because it makes for a nice backdrop to showcase the work. The way he uses type on the portfolio pages is really nice. It doesn’t take the focus away from the work at all. He switches it up some with the BACK button by turning it backwards sometimes. Each page, I think, has a nice sense of hierarchy throughout.

This isn’t really a website, but I thought it was a cool use of motion type. It’s a psychiatric phone call message and it’s just really funny. Some of the copy reads: “If you have multiple personalities press 1, 2, 3, 4, 5 and 6.” I like how a line accompanies the copy to lead your eye, since the recording is quick. I also really like the typeface used. It’s simple and clean and stacks really nicely.

They so the emotion of the recording really well throughout this animation by making some of the type different colors (red) and changing the size. Even though the recording is quick, it’s easy to follow and understand because of the way they use the motion with the type. Sometimes other little element are introduced, like a space ship, which also, I think, works well with the typefaces used. I laughed a lot which I listened to this. It could be the writer in me caring more about the content instead of the design, I don’t know:)

Leo Burnett is an ad agency based out of Chicago. Their tagline for the agency is: Big ideas come out of big pencils. Hence the big pencil animation that follows your mouse throughout the whole site. I like the idea of the pencil, but since I have an older computer and slower connection it kinda gets in my way after a while. Again, I really like how simple this site is and how the type is the main element on the landing page.

When you click on the little apples on the site, it leads you to quotes about advertising or just being creative. Some use the same typeface and the Leo Burnett logo and some use the sans serif typeface that is spoke by an illustration drawing. It’s cool, check it out. I like how on the landing page the clickable parts bold out from the stack white space, so you know to click on it. I like how clean and open the site is and how they picked a typeface that also represents this.

My last site of the five is for The New Yorker. I chose this site because they have a lot of content to handle and it’s really the only one of my five that has this challenge. So, as you guessed it, I also like how even though they have a lot of content to manage, they were still able to keep this site fairly simple. I think the site has a nice sense of hierarchy. The first thing you see is The New Yorker logo and the little flash animation. I like the top navigation. By using knockout type, it draws you eye to it because it’s the only thing like it at the top of the page.

I like how the main headers use the same typeface as the logo, giving them a little more importance. For example: the BLOGS and POLITICAL SCENE. I also really like how they kept the structure content to three basic colors, red, white and black. They chose a nice clean and open typeface for the content, so it doesn’t seem so squeezed and daunting to read even though there’s a lot of information. I also think the site represent the brand really well.

Bicycle Film Festival

I’ve chosen this trailer because it shows how simple a strong concept can be produced. The Bike Film Festival is a festival that celebrates the bicycle through music, art, and film. It is held in 39 cities around the world.

Instead of fancy 3D designs and After Effects transitions, the designer decided to have real actors playing the type characters. Plus it’s really appropriate when the message is related to an eco-friendly form of transportation. It’s a simple execution for an unsophisticated subject.

Barack Obama's Website

Last Saturday I attended the Sol Sender and Scott Thomas’ presentation at AIGA Make|Think Conference. They were the heads for the Obama campaign on and offline.

They worked for more than one year on this project and the final result is  absolutely gorgeous, in my opinion. The use of Gotham typeface is really clever and it makes everything stable and clear, wich is pertinent to Obama’s vision.

Wilkintie Letterpress shop

I think this is a good example of how to translate the print world into the web space. This online shop sells letterpress prints in different sizes.

The use of serif and slab serif typefaces does a good job in bringing the letterpress look and feel into the website. The color palette is also very consistent. This is a good example of hierarchy as well.

Nicholas Deakins

Nicholas Deakins is a fashion brand established in London. Their website is super fun, without been cheesy. And type plays the major role on the design. The logo changes according to the website category.

Also the interaction between illustration, type and photography is superb. The product were shot in a white background to let type and illustration play their role.

CNN iPhone app

My last pick is a mobile application for CNN. You can watch the videos, save them to watch offline and also send pictures and videos related to stories that are related to the user’s experience.

It shows how hard it’s to bring the content of a huge TV broadcaster into a tiny portable screen. This is less about aesthetic. It’s functionality what really matters here. Type needs to be clear and always readable. I think they did a pretty good job on this one, cause Helvetica seems to be the best type choice for this project.

This is the portfolio site for architect Maya Lin. Her work has a wide range from fine art to residential designs, but Maya Lin is most famous for her design of the Vietnam War Memorial in Washington D.C. Much of her work has a kind of quite and introspective quality to it. You’re simply confronted by the work and forced to contemplate what it means to you. The website itself(I feel) reinforces those qualities one might find in Maya Lin’s work.

I chose her website as an example of good typography because I feel the typography is reflective of what I think is Maya Lin’s ethos. Like her work, the typography is bold yet quite all at the same time. It’s simple, straight-forward, and almost has a zen-like quality at times. The type that is set for the project synopsis’ reads very easily and doesn’t suffer in the slightest. Most importantly, the site and typography are beautiful overall just like her work.

href=”http://www.cirquedusoleil.com/”>

Cirque Du Soleil is an internationally traveling Circus based out of Montreal Canada. They are probably most famously known in the states for there resident shows in Las Vegas. Since they started their shows in Las Vegas, Cirque Du Soleil has grown immensely. Their shows are thrilling and very emotional. I feel like the designers job here was to walk a tight rope line and maintain that balance between emotional charge and visual clarity.

I think the designer(s) has done a good job of maintaining the emotion of Cirque Du Soleil while also not compromising clarity through the use of typography. The headers for the shows themselves have that raw emotion that you’ll find in the shows while the body copy remains clear and easy to read. Their use of typography makes for a seamless experience!

If you haven’t been living in a cave for the past 6 or so months, than you’ll know that a Beatles themed Rock Band video game had been released. The game itself follows the same format of all the other games in the Rock Band series, but this time is set to the music of The Beatles. With that in mind, it occurred to me that there’s a bit of a paradigm shift. It’s the classic combining the old with the new. The challenge to me seems like to capture the nostalgia and excitement of The Beatles while integrating new technologies and techniques.

Much of the challenges are met on this site through the use of typography. The headers are very evocative of the same kind of typography used on The Beatles album covers. The rollover elements help to integrate “the new” into this site. Even though they are somewhat simple, they are effective in adding another element of interest to the site. Hierarchy and navigation are reinforced through the use of typography. Check it out!

Mucca Design is a graphic design studio out of New York. They specialize in branding for the retail and restaurant industry. Their site showcases their work over a broad range of clients. With such a vast amount of information it would be easy for things to become confused and lost, but not with Mucca!

Mucca has an incredible ability to distill and synthesize a lot of information into a tiny package with their print work, and the same goes with their site. Like their print work, Mucca has designed a system for their website that integrates a lot of information into a clear and concise statement. Their use of typography is hallmark to the workings of the system. Size, structure, color, and weight all work together for a easy user flow.

Schillers is a restaurant and bar out of NYC. I love the site for it’s ability to maintain it’s branding through it’s use of typography. It’s relatively simple site, but it communicates a lot in it’s expressive use of typography.

A lot of the time it’s difficult to get away with using expressive typography on the internet because most sites are so content heavy. This site however is on the lighter side content wise, and I think the information is perceived in the use of typography. Instead of elaborate descriptions of what the restaurant is about, I understand it through the use of typography and make connections that way. Immediately I feel like this is a type of restaurant/bar that promotes itself as a place that serves good wholesome food and a throwback type of environment. It communicates a lot in a brief amount of time, and that’s undervalued in today’s society.

Where the Wild Things Are

Now the reason I chose this one was partially because of my love for the typography that’s been used so far in the trailers, which the website doesn’t disappoint in that category at all.  Everything is done in that same handwritten style, which usually I find to be a little annoying because it’s used to convey a sense of childishness or sincerity that doesn’t match the movie at all (aka the “type” for Napoleon Dynamite). However, here it just matches that sense of the primal monsters and Max’s childish nature. The whole site seems to be done in flash, so they’re able to add fun little details like the crown that spins when you scroll over it, or type falling off the screen to go to the next screen. Even the scrollbars have that same hand-done feel to them.

The site combines a very well done graphic and visual style, using photo stills from the movie and a simple brown footer to offset the type. The menus are very efficiently used, combining simple drop-down menus with the type to create a very fluid visual style. Probably the only drawback to this whole site was the fact that they were required to use flash, so in areas where your internet is slow, you’ll have to wait a while for anything to load. Which nobody likes, not even when the initial load screen has the ‘monster’ scratches counting to 100. Overall, it’s a great visual site with a great combination of the fun hand-done type and fluid flash graphics.

Reverse Thought

I chose this site because they are all about the simplicity and use of type as a visual element. The intro screen is flawless and it’s honestly probably the only website I have ever seen where I’d actually want to watch it quite a few times. They use simple motion graphics with type flowing across the screen to get across the point of their company, and made simple black & white interesting. Once again, this one is also based out of flash, so they’re able to do subtle things like have menus ease in & bounce out slightly, but that adds so much more to the visual interest of the type and the site. The company is a web-design company, so naturally they’d be good at it, but it’s also the subtle ways in which they made the site that makes it most interesting. They didn’t try to make it over the top in visuals, they’re more interested in letting their work speak for them.

Probably their strongest point can also be their weakest. After a while, it does become a little boring looking at a straight black & white site, with that visual line stuck in the middle all the time. It probably wouldn’t be so noticeable, except every time you click a link on their site, the line moves to accommodate the information needed. The site could also use a bit of help on the actual visuals themselves, because when you look at their work, the menu system is a bit off, requiring the user to click on small buttons on the bottom to scroll the images across. This would be fine if they had employed something to tell you which button you had clicked on, so that you don’t accidentally scroll too far in  any direction. But this is still a great example of simple type used in an interesting way.

Martin Anderle

Now this site is pretty psychedelic when you look at it, and initially it confused the hell out of me. It’s hard to see the type for all the little flowy things, but once you scroll over one (if you can find it) it then lights up in white, and the flowy things then form pictures behind it. Pretty nifty if you ask me. The way it’s designed does have a slightly dated feel, probably just because the type looks pretty 70′s, and the visuals don’t look like anything until they actually form an image. But when it does, it’s pretty cool to see. Once you click on one of the projects located on the site, it becomes much easier to see. The visuals, when shown, are a pretty decent size, and the navigation is subtle but spot-on, just simple triangles that highlight over the image.

Overall, this is a pretty nice use of flash. It’s something different from the norm, and it works pretty well. The only drawbacks to the technique would be the inability to read it at first, although once you figure out what’s going on it works fairly well. The music is by far the worst part of it, the endless looping does nothing for the site, and probably helps it to feel so dated. However, the use of strong block letters offset by the flowy things does lend for some pretty interesting visuals for the user to see. With a few tweaks, this could be a really awesome site.

Design View

Ok, so this site isn’t amazing in visuals or anything, but it is a pretty good example of simple type used in an effective way to get good hierarchy going. It’s also the only non-flash site I’ve put on here, so it’s staying. The use of type in here isn’t initially stunning in any way, but once you realize how easily you can navigate through everything, and how easy it is to read and understand all of the information on the pages, it starts to grow on you. He keeps a very simple color scheme, very neutral and highlighted by simple, small areas of red. I also like the neutral scheme, because he’s able to squeak by using a ton of information and links, but it’s not immediately noticeable.

However, like all things, it could be improved a bit, especially in the lack of any visuals department. I know he’s using it as a general blogging site, but after awhile, I could use something to make the site pop just a bit more. There’s also a bit of a disconnect between the main page and the links, as he suddenly adopts a new type treatment of his logo on other pages, and some of the links take you to random and mysterious sites that have no link back (like the bike link). However, overall, it’s a good showing of what can be done with simple means, using html and other tools rather than having to resort to using flash to get something visually interesting.

Citizen Cope-Let the Drummer Kick

Ok, so this isn’t a site, but it is done in flash and after effects, and I love the way they used type, so it’s staying. It’s a type treatment of the video for Citizen Cope, using different treatments of type to create visuals for his song. It’s pretty cool to see the ways this plain type can be used to create pretty cool looking art for the video, and how such a limited palette works so well. The type moves with the music, it highlights the words with different animations in some areas, and overall it just provides something different and special to the music. There’s nothing really visually amazing, but when you put all those elements together, it creates a pretty cool and engaging piece.

Probably the only critique I’d have of this piece is the beginning and end, which only highlights the lyrics by the same type repeated over and over again. With how strong the rest of it is, it’d be nice to see something a bit better employed here. But, overall, it’s a good point for us to look at when thinking about type and how to create something visually interesting.

www.vitaminwater.com

I choose the vitamin water website as a good example of great use of typography because I wanted to demonstrate the enormous power type can have on the promotion and appeal of a product. I really like the clean use of type both on the website and the bottles themselves.

On the website the typography creates this whole simplistic feel like your getting just the right amount of information and not being bambarted with crap. The type choice and layout that is used on the packaging  almost gives of this medical/scientifically/ really nutritious feel that makes this product seem really healthy. This really shows the importance of picking just the      right type to have a successful product appeal.

www.maccosmetics.com

This is another awesome example of superb product appeal creation on the internet with the use of typography. It’s sending such a strong visualization by using the combination of pictures and specific fonts to create a whole feel around the eyeshadow, lipstick, etc…

It’s great because its just the right amount of wording used in the right choice of a font to sum up a whole feel of this cosmetic line.  Also I think it shows the importance of selecting just the right  type and how each font can create a certain feel or environment. I guess I really never thought about the importance typography can have on a product.

This is the American Holocaust Museum website and it is filled with exquisite examples of great typography all over the site.  I love the type in the logo and how it emphasizes what this museum is all about.

This is a great example of how powerful type can be when combined with a message or an event.  Or when someone if trying to be inspire the world to change. Their are video on this site and pictures combined with messages and the type of fonts used are just simple enough so they are not taking away from the messages but making them that much powerful and memorable.

I choose this website strictly for the logo. It’s not the best website but I really like the playful cartoon logo type selection. It really sums up the whole feel of this awesome cartoon. The selection of the font together with the size go together really well.

It’s a demonstration of the importance of selecting just the right font to capture just the right audience which in this case are a mix of young kids, teenagers and adults.

I am just in love with this website. It has so many wonderful examples of great use of typography all over. In addition to that it once again examines the importance of typography not only on the web but on the packaging as well.

My favorite selection on this particular site is in the history section. The small flash video goes into the history of the vodka industry in russia and also small fact about russia. The type selection gives of this soviet feel and it’s very interesting to feel how fonts can create a whole culture around a product. The type selection of the bottles are perfect because this give of a very modern sophisticated vibe and capture the background of where this product is coming from.

“Hi, Witt. We will get content for you as soon as we can. There is a lot living on typecon.com right now, including lots of “past-year” sites that we want to leverage.

The main URLs:

http://www.typecon.com - conference website – uses mainly WordPress and MediaWiki

http://www.typesociety.org – SOTA organization website – all static HTML

http://www.typegallery.com – houses some of the archives of the type and design gallery we host at TypeCon each year. Lots more content for this, and is foldable anywhere on main site. All static HTML

http://www.fontaid.com - basically now redirects to SOTA site that talks about our Font Aid charity project.

http://www.sotalink.com – this was where our old registration system was housed. Defunct at the moment, but might be resurrected if we can rebuild our proprietary system at a new host. Was php-based.

Other content we discussed that would be cool to include would be articles from our Interrobang magazine. We have 5 issues with some pretty neat stuff. I think I at least have PDFs of finals for everything – will have to check to see where all the InDesign files are if needed.

I hope this is helpful!
Tamye”