CircleType.js + FlowType.js

Trail

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.circletype/0.34/circletype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.js"></script>
<button id="testButton">Initialize FlowType</button>
<div id="demo-article">
  <h2 id="demo1">Here’s some curved text flowing clockwise.</h2>
  <h3>What does FlowType.JS do?</h3>
  <p>Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the
    line-height—based on a specific element's width. This allows for a perfect character count per line at any screen width.</p>
  <p>Additional options, reviewed below, allow you to configure FlowType.JS to fit your needs. These options include element size thresholds, font-size thresholds and font-size/line-height ratios. The element size thresholds will stop FlowType.JS from performing
    its magic once the element reaches beyond specific pixel dimensions. The font-size thresholds will stop FlowType.JS from resizing the text beyond certain font-sizes. Lastly, you have full control over the base font-size and line-height ratios, so
    that you can set your typography perfectly.</p>
  <p>FlowType.JS is extremely easy to use. Visit the getting started section, follow the four easy steps and you will be on well on your way to performing magic.</p>
</div>

CSS

body {
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  line-height: 1.45;
}

h1 {
  font-size: 4em;
}

h2 {
  font-size: 3em;
}

JavaScript

$(document).ready(function() {
  function test() {
    //alert(1);
    $('#demo1').circleType();
    
    $('#demo-article').flowtype();
  }
  $('#testButton').on('click', test);
})