Vertical align header title


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.

Header examples:

You can see by default (HELVETICA TITLE) everything is vertically center.

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>?

The above example code is available here:


You could increment the line-height of the second one to avoid using the span:

line-height: 48px;

The only concern I can think of with the span is if you use ion-nav-bar and change the title on each view you would have to use ion-nav-title and wrap it in a span each time.