WebAppers

/ best free open source web resources /

Shopify

Em Based Layouts Vertical Rhythm Calculator

Posted · Category: Fonts, License Free, Tools

Typography on the web has become a point of focus for standards based developers recently. One of the key concepts that we can use within our sites is consistent line-height in CSS terms. If you think of a ruled notebook, the lines are all equal heights.

The concept is fairly straight forward but in practice can be confusing especially for a CSS newcomer. All sizing needs to be relative to the base size. This allows for easy scaling up or down while keeping the required spacing and layout consistent, this can be refereed to as an elastic layout. To allow this we need to specify measurements in percent or em. Em calculator save you the hassle of all of those calculations.

em-calculator.png

Requirements: -
Demo: http://www.jameswhittaker.com/blog/article/em-based…
License: License Free

2 Comments
  • http://www.jameswhittaker.com JMWhittaker

    Thanks for the interest in the calculator. It’s something that I needed when developing sites so hopefully it will be useful to others and make the creation of elastic layouts easier than having to manually work out all of those calculations!

    Keep checking back for the Adobe AIR version which will be released soon.

    JMWhittaker

  • marcoMarquez

    im more interested i need to do a calculator but i need some ideas really is an evaluator for make books

    is a really complicated calc and i need some resources for just focus on the mathematics

    if you have some resources for flex please send me the link

    oritatelodoy at hotmail dot com

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons