Relative Font Size (EM) Calculator

| 1 Comment »

This for the web UI developers out there. One of the more difficult tasks in creating accessible websites based on scalable “EM” font sizes is calculating the font sizes for nested page elements. (For a tutorial on using EMS, see Richard Rutter’s How to size text using ems.) There is a simple formula for EMS calculation which is “Child Pixels / Parent Pixels = Child EMS” but tracing back through the cascade can get difficult and time consuming with more involved layouts.

Today I discovered Riddle’s Em Calculator which makes calculating relative font sizes a breeze. Start by defining a parent node with a pixel-size equivalent, then add child or sibling nodes; EMS values are dynamically calculated and updated for each element. Awesome. The current web application uses cookies to store session information which turns out to be a bit buggy (a user registration system would be nice) but this tool is a great start. Give it a try.

Screenshot of Em Calculator