Larger text in Ionic card is overlapping

I am trying to overlay some text on top of in image, inside an Ionic card:

Codepen: http://codepen.io/ohho/pen/oXpmQQ

It's ok when the font is small:

.cardImage .cardMotto p { 
  font-size:16px; 
}

The text are messed up when the font is large:

.cardImage .cardMotto p { 
  font-size:36px; 
}

How can I fix the CSS to let large font display properly?

You must add a line-height for matching font-size.

.cardImage .cardMotto p {
  font-size: 36px;
  line-height: 36px;
}

enter image description here

Codepen

Hey i would prefer that you should use em instead of px you can give 1.5em or 1.4em line-height