Golden Ratio Typography in SASS

Typography is not my strong point but even I can tell when something feels wrong. Like when there’s not enough whitespace between each line of text. That’s why I love Chris Pearson’s Golden Ratio Typography Calculator. But, when I visited the page recently to get some values, it wasn’t completely loading so it didn’t work. I needed an alternative, so I built my own function in SASS to do the work.I used Chris’ article about readable wen typography to calculate the same values as the calculator but I’m using a SASS function instead of the website. So I don’t have to leave my code window.

The equation for the calculation is very close to the bottom of the article. Essentially it’s using the font size, content width and the golden ratio to calculate what I think is the best possible value for my line height (leading). There’s no built in support for exponents in SASS and I didn’t want ‘px’ units getting in the way of my calculations so I had to find a couple functions to manage those issues as well. But, if you’re interested, here it is:


div {
	font-size: 16px;
	line-height: calculate-line-height( 16px, 768px ); // 1.6631189606
	margin: 0 auto;
	width: 768px;