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?