Rhythm & Scale Calculator – Get Scaled Font Sizes & CSS Code [Chrome]


Find the right font size for different headings & text types can take a while, not because it’s hard to write the code but because text sizes have a wide range and finding the right one for every heading and text area can take up a lot of time. An easier way to deal with font sizes is to specify a scale for each type. Rhythm & Scale Calculator is a Chrome application that helps you find the right scale for your font and line spacing, it gives you the CSS code to seal the deal.

The app allows you to choose one of two most common text scales; Diatonic and Golden Ratio (based on Fibonacci). Select which scale it is you like to go with and use the slider on top to select line height. Line height is line space; how far apart the lines in a paragraph will be spaced. Click Preview to see what it looks like. Make sure you scroll down and see the various header text sizes that the app suggests.

Rhythm and Scale Calculator

You can switch scales from the preview pane by clicking either the music note or the Pi letter button. The Pi letter represents the Golden Ratio scale (Fibonacci) and the music note represents the Diatonic scale. Move the knob on the slider to change the line height. The changes are reflected in the dummy text. Scroll down for header text size suggestions. Once you’ve got the text looking good, click Copy on the preview pane to copy the CSS code to your clipboard.

Rhythm and Scale Calculator copy

The app is useful if you need a quick way of checking different font sizes and line spacing options. As opposed to writing the CSS code for it yourself, it will generate it for you.

Install Rhythm & Scale Calculator Application For Chrome