CircleType.js is a tiny (2kb) jQuery plugin that lets you curve type on the web.
Here’s some curved text that flows clockwise.
<h2 id="demo1">Here’s some curved text flowing clockwise.</h2>
$('#demo1').circleType({radius: 384});
By setting dir to -1, the text will flow counter-clockwise instead.
<h2 id="demo2">Here’s some curved text flowing counter-clockwise.</h2>
$('#demo2').circleType({radius: 384, dir:-1});
By leaving the radius empty, CircleType.js will find the perfect radius so the text makes a complete rotation.
<h2 id="demo3">This text makes a complete rotation no matter how long it is. </h2>
$('#demo3').circleType();
The fluid setting gives the type a flexible radius (try resizing your window)
<h2 id="demo4">This curved type shrinks and expands to fit inside its container. </h2>
$('#demo4').circleType({fluid:true});
Here’s how you can use FitText.js to make the text a bit more flexible (try resizing your window)
<h2 id="demo5">I play well with FitText.js too! </h2>
$('#demo5').circleType({fitText:true, radius: 180});