Thoughts on this Vertical Align <span> hack

I'm building a mobile app using the Ionic Framework. My app's Header Title is using a custom font, loaded via @font-face.

I have three examples of the header below. The top being the default, and the last two using my custom font.

Ionic Header example

You can see by default (HELVETICA TITLE) everything is vertically center. Ionic uses the line-height trick.

The second header in purple is with the custom font applied and it's obviously off centered.

The third was accomplished by wrapping the title in a <span> and splitting the font style.

Is this an acceptable practice? Anything I should be concerned about? Any way to accomplish the vertical align without the additional <span>?

angular.module('app', ['ionic']);
/* All in one, but not vertically aligned (SAD TITLE) */

.bar-royal .title {
  color: #fff;
  font-size: 16px;
  font-family: "Peak";
  text-transform: uppercase;
  font-weight: 700;
}



/* Separated, but right in the middle (HAPPY TITLE) */

.bar-positive .title {
  color: #fff;
  font-size: 16px;
}
.bar-positive .title span {
  font-family: "Peak";
  text-transform: uppercase;
  font-weight: 700;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <link href="http://up.cwhit.co/DC2z9d3AYj.css" rel="stylesheet"><!-- custom Peak font -->
  <link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
  <ion-pane>

    <ion-header-bar class="bar-calm">
      <h1 class="title">HELVETICA TITLE</h1>
    </ion-header-bar>

    <ion-header-bar class="bar-royal" style="margin-top:50px">
      <h1 class="title">CUSTOM SAD TITLE</h1>
    </ion-header-bar>

    <ion-header-bar class="bar-positive" style="margin-top:100px">
      <h1 class="title"><span>CUSTOM HAPPY TITLE</span></h1>
    </ion-header-bar>

  </ion-pane>
</body>

</html>