Typechart, the Css Typography Utility

typechartSeveral weeks ago I wanted to write an article on how to stylize articles’ titles. It isn’t one of the hardest things on Earth, but I’ve noticed that on many sites this topic is badly implemented. I will write about this but in a different manner. Instead of creating and explaining I will present you one handy website regarding titles typography – Typechart.

Typechart Features

Typechart is a resource site dedicated to quality typography samples. On this website you can check several types of typefaces with different styles applied. Typechart does everything for you since it offers all kind of information like: operating system, font size, style previews and even the full CSS code. Everything is in place and it is displayed inside a well designed interface.

You must not expect to have all the fonts here. The site has previews only for some of the most common font-faces: Arial/Helvetica, Cambria, Georgia, Lucida Grande, Lucida Sans Unicode, Trebuchet MS and Verdana. Since these fonts are not standard on both Mac OS and Windows, this site has a visual feedback that tells you where to expect to find this font. This is a very useful thing that tells you the OS placements of the font, and in this case you can decide what font to choose based on your target. You have also additional options for font style: bold, italic, uppercase or font size: small, medium, large, extra large.

typechart-font-preview

Typechart Drawback

As you can see you have enough features for css typography testing. I can say that Typechart is a decent CSS typography utility although it has one drawback. The renderings are only on Mac OS 10.5 and Windows Vista. This means that you have a little diversity. A good option would be to test it on other OS’ and browsers. Overall a nice tool. Cheers!

User Interface ★★★★☆
User Experience ★★★★☆
Features ★★½☆☆
——————–
Graphic ★★★½☆

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers! Follow Andy on Twitter: @andygongea

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends

RSS User Experience Bookmarks