April 30, 2013


For a recent website project I needed to set some type on a circle. You often see this sort of type treatment on vintage signs and beer labels like the one above. In this case graphics were out of the question since the text needed to be dynamic. The text would have to be rendered in HTML. It turns out circular text is possible with HTML and CSS alone but it requires a monospaced font.

For my project this wouldn’t do so I decided to create a CircleType.js. It borrows some ideas from the example on CSS Tricks but uses javascript to pre-calculate the character widths. This allows any font to be used, not just monospaced fonts.


Checkout on Github

“It’s no big thing, but CircleType.js lets you set type on a circle. Uh, what now?! Holy cow!”

Christopher Schmitt @teleject

“Thanks for writing neat stuff!”