Type is such an important part of design and communication. As part of their skillset, designers must have a good grasp of typography but also how to apply that knowledge to their web designs. There are numerous tools available and in this post we’ll take a look at three tools which work specifically to help with type layout using Cascading Style Sheets.



Typechart is a stylish site which lets you flip through, preview and compare web typography while retrieving the CSS. Here’s what you can do:

  • Browse typographic styles, choosing from web-safe typefaces, sizes and styles.
  • Download the CSS.
  • Compare Windows (ClearType) rendering  with Apple font rendering.
  • Each style corresponds with a “style ID,” which allows you to annotate prototypes and retrieve the CSS while coding.



TypeFolly is a typography tool which allows designers to create layered typographic images using a group of palettes or panels, similar to Photoshop’s palettes. The creator of the site refers to these layered compositions as “type follies.” While you create the composition, the app creates fully html & css3 compliant code. At the time of writing it supports the following CSS properties: font-family, font-size, color, letter-spacing, word-spacing, font-style, font-weight, text-decoration, text-align, z-index, line-height, width, height, opacity, moz/webkit-transform, text-shadow and font-face.

The palettes can be moved freely around the screen and you use sliders to change typeface, size, color and spacing. When you’re finished creating, you can save and export your type projects. All projects can be saved in our database or exported as compliant CSS/html. I found this to be a little clunky at times, with the text occasionally not responding to changes I made on the palettes, but overall it’s a nice visual way to work with type and will be familiar to anyone using image editing software with palettes.

CSS Type Set


Of the three tools featured here, CSS Typeset is probably the most simple to use. You simply type in a piece of text on the left hand side, make adjustments to color, size, emphasis and spacing using the dropdown menus and sliders, and voila! On the right hand side you’ll see the CSS code which you can then copy and use in your web design.

Have you used these tools before? What other type tools would you recommend for designers?

Tags: typography, Web Design Tutorials & Articles
Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

No Reader comments

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.