Curved Text using HTML & CSS

He uses CSS3 transforms on each letter. For example, the HTML for his name is as follows:

<span class="arced">
    <span class="char1">M</span>
    <span class="char2">a</span>
    <span class="char3">r</span>
    <span class="char4">c</span>
    ...
</span>

And in turn, the CSS is as follows:

.show .hero h1 .arced > span:nth-child(1) {
    -webkit-transform: translateX(-1px) translateY(68px) rotate(-17deg);
       -moz-transform: translateX(-1px) translateY(68px) rotate(-17deg);
        -ms-transform: translateX(-1px) translateY(68px) rotate(-17deg);
         -o-transform: translateX(-1px) translateY(68px) rotate(-17deg);
            transform: translateX(-1px) translateY(68px) rotate(-17deg);

    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}

.show .hero h1 .arced > span:nth-child(2) {
    -webkit-transform: translateX(-3px) translateY(39px) rotate(-13deg);
       -moz-transform: translateX(-3px) translateY(39px) rotate(-13deg);
        -ms-transform: translateX(-3px) translateY(39px) rotate(-13deg);
         -o-transform: translateX(-3px) translateY(39px) rotate(-13deg);
            transform: translateX(-3px) translateY(39px) rotate(-13deg);

    -webkit-transition-delay: .04s;
       -moz-transition-delay: .04s;
         -o-transition-delay: .04s;
            transition-delay: .04s;
}

And so on.

I came across this solution called: CircleType.js. It provides a short and simpler way to create circular texts.

<h2 id="yourStyle">MARC THOMAS.</h2>

$('#yourStyle').circleType({radius: 800});

Or you can use lettering.js which is quite flexible.

Add your transitions using CSS/jQuery on top of that. Hope this helps!