The typography golden ratio calculator

At this moment, there is a mathematical symphony going-on on this page. A symphony that everyone perceives unconsciously. This symphony, also called "golden ratio" is deeply rooted in us, and can be found everywhere around us, in architecture, photography, painting and nature.

You would not expect typography and mathematics have anything to do with each other at first. But nothing is less true! Typography is a combination of artistic forms and mathematical relationships. Each section consists of three primary dimensions: font size, line height and line length. The correct ratio between these three makes text readable.

Following the great article by Chris Pearson over the Golden Ratio and web typography, I went to work on a typography Golden Ratio Calculator. The calculator calculates the ideal line height on the basis of the line length and size. The calculator is made using Tangle, a javascript library that I wanted to try for some time.

With Tangle library texts and documents can be created interactively. Tangle is developed by one of my heroes Bret Vicro.

Try The Calculator by
Dragging the width and/or the font-size value above


Fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu.

The power of golden ratio typography cannot be understated. By choosing the line-height of your primary text as your new “baseline unit”, you are effectively tying all the dimensions of your layout together with the golden ratio.