<h1 class="m-type-treatment">
 
<svg class="m-type-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 320.1 049.4" xml:space="preserve">
<path id="curve" style="fill:none;" d="M94.2,45.5c0,0,26.4-15.5,61.6-15.5s60.6,15.5,60.6,15.5"/>
<text>
  <textPath startOffset="5%" class="m-type-curved"  xlink:href="#curve">
LOCAL'S</textPath>
</text>
</svg>

  <span class="m-type-offset-shadow">Corner</span>
</h1>
@import url(https://fonts.googleapis.com/css?family=Graduate);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);

$background: #111;
$offset: $background;
$color: #73ce92;
$emphasis: #111;
$shade: #6a7d9d;

body {
  background:#333;  
  background:url('https://unsplash.imgix.net/reserve/6TjIJK0uSJWtQUZuQWMW_58400023.jpg?q=75&fm=jpg&auto=format&s=243164aa8156f27dd1be354f592c2e57');
  font-size:100%;
  background-size:100%;
  line-height:1.5;
}
.m-type-svg {
  
  display:block;
  max-width:100%;
}
.m-type-treatment {
  max-width:700px;
  margin:2em auto;
}
.m-type-curved {
 
  display:block;
  font-family:"Lato";
  font-weight:700;
  font-size:1.84em;
  color:#dbd5c5;
  
   fill:#dbd5c5;
  text-transform:uppercase;
}
.m-type-offset-shadow {
  color:#dbd5c5;
  text-align:center;
  font-family:'Graduate', sans-serif;
  text-transform:uppercase;
  font-size:9em;
  letter-spacing:0.1em;
  $outlineAmt: 2px;
  //margin:1em 0 1em;
  //text shadow is position then thickness
  text-shadow:
    -2px -2px 0 #333,
    2px -2px 0 #333,
    -2px 2px 0 #333,
    2px 2px 0 #333,
    .040em .025em #333, //black
    .070em .055em $shade; //blue
}
//as you can see by this demo
//webkit and IE browsers curve the type to the path
//firefox treats it like there is no curve and more like a straight line

//i also found that Firefox seems to pick certain points at which it gets jaggy, will add more demos to show.
//if you use a perfect circle, firefox will get jaggy at different offset amounts

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://dl.dropboxusercontent.com/u/1358745/scripts/circletype.min.js