Em based layouts – Vertical rhythm calculator

James Whittaker Calculator that converts pixel based mockups into em based layout. Vertical rhythm calculator.

A pixel is the ‘dot’ on your computer screen. Displays are measured in pixels across and down like 1024 × 768. These dots are unscalable and fixed in size. In some situations this is desirable and it would be better to set your measurements as pixels.

An em is a relative measurement based on the square of the font size at that particular point. As font sizes can vary across differing systems and displays the result is that the em measurement will always be relative and scalable.



The Typetester  – another alternative to CSS Type and Font Tester – is an online application for comparison of the fonts for the screen.

Its’ primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.


Font Tester

Font Tester  – a free online font comparison tool.

It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

Alternative tools – CSS Type and Typetester