Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle
Here’s your basic arc, meh.
<h2 id="demo1">Here is some type on a simple arc.</h2>
$('#demo1').circleType({radius: 384});
By setting dir to -1, the text will flow counter-clockwise instead.
<h2 id="demo2">Here is the same arc but this time reversed.</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 arc 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});