SJL Web Design

5 Useful Tools for Stunning Web Typography

CSS Type Set

CSS Type Set

CSS Type Set allows you experiment and create different CSS styles using their simple UI.

You can alter the look and feel of your inputted text with their different attribute controls, including font size, line height, letter spacing, font weight and a fair few more. Once you are happy with your new looking text you can generate the accompanying CSS to use the new font styles on your own website.



TypeTester allows you to compare various typefaces and styles all on one page.

You can experiment and add different attributes to your sample text and see how it looks in a number of different styles, including bold,  italic, uppercase and varieties of these styles mixed together.



PXtoEM is a great tool for any designers who usually work with pixel measurments (PX) and are either drafted in on a site built using elastic measurements (EM) or are thinking of moving over to EMs for usability and text-resizing reasons.

All you have to do is set your <body>’s font size (default 16px) and from there this handy calculator will work out out relative pixel measurements in EMs, Percent and Points.


Type Chart

TypeChart is a great tool for any designers fishing for some web typography inspiration.

It allows you to crawl through a large selection of great looking examples of CSS typography and when you have found one that tickles your fancy you can click the ‘Get CSS’ button and copy and paste the styles into your website’s stylesheet.

A great tool that can quickly add that extra level of design perfection to a website.

Colour Contrast Check

Snook Colour Contrast Check

This little tool from Snook allows you to check the contrast between the type on your website and the background it is placed on. It will also list whether it complies to the Web Content Accessibility Guidelines (WCAG) and which level of compliance.

It will also tell you the brightness difference, colour difference and the contrast ratio between the colour of the type and the background colour.

1 Response to “5 Useful Tools for Stunning Web Typography”

David Says:

I’ve been a big fan of TypeChart for a while, it’s great for prototyping and playing around with fonts. Sometime i build a site and then use Firebug to experiment with different fonts..

Thanks for posting this list.

Leave a Reply