CSS: Aligning type to a baseline grid

Css-Typography-CalculatorTypography on the web is still a topic that many web designers (or however you want to call them…) don’t pay much attention to. But the legibility of content should be a top priority for most web projects, as it is (or should be) mainly about the content of the site. If you follow a few basic rules, you will soon notice that a nice legible site automatically looks better and you can even go one step further and create a site that mainly relies on its typography to create the overall look and feel.
If you would like to have more information about basic web typography, you should have a look at the articles “A list apart: Setting Type on the Web to a Baseline Grid” by Wilson Miner and “Compose to a Vertical Rhythm” by Richard Rutter.
I started using a mix of these techniques and made this little widget that helps to calculate the relative font size and line height (according to Richard Rutter’s article) and copy the formatted CSS to the pasteboard.


Published by


I've always been interested in all kinds of art because I felt the need to express myself in many different ways. I paint, draw, create 3D models, motion graphics & designs of all sorts, play guitar, love photography and whatever else is in between... I was born in Hungary and lived in Hungary, Germany, Australia and the UK for a number of years. I speak German, English and a little Hungarian (I'm working on improving that one again!).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s