Typecast by FRONT is a tool for creating your CSS code with webfonts directly in the browser with a true WYSIWYG view.

The initial layout of websites is still mostly developed in applications like Adobe Photoshop. There you can play with layers, images, bitmap effects and easily present a mock-up to the client without having to write one line of CSS or HTML code. But where this approach usually fails is with type. The rendering inside Photoshop is very different from the rendering within browsers. The options to style the texts are very limited. There are no character styles to play with, there is no baseline grid and you have no access to the fonts available at Typekit, Fontdeck or other webfonts services. So you can just simulate a very rough sketch of your type treatment and when you actually transfer the layout into CSS/HTML you need to start all over again.

This is where Typecast comes in. It’s an online service for developing the typographic layout of websites directly in the browser. You can style your headlines and paragraphs in an easy and intuitive way, without the need for writing and changing CSS values over and over again. Once you are satisfied with the results you can just grab the CSS code and put it in your project.

The Typecast app is currently in Beta, but you can already play with fonts from Typekit, Fontdeck and the Google Webfonts directory. Apart from just choosing fonts, the app also helps you to fit your styles on a baseline grid and to choose the right proportions for the type sizes.

Until now I usually created all these values by manually typing them in Dreamweaver and constantly switching between the editor and the browser to check the results. The typecase app could stop this tedious workflow. Currently the font choice is limited, but I am hoping this app will become a success and will offer a full access to webfont services and offer an option to upload webfonts as well. Then I would probably use it for every new web design project.

Check it out at: http://www.typecastapp.com