вертикальное выравнивание текстового тега заголовка отличается на Windows и Mac

Question

Я борюсь с различиями выравнивания между Ma c ( image ) и Windows ( image ) в тегах заголовка. Мой CSS:

h1, h2 {
   text-transform: lowercase;
   text-align: center;
   font-size: 50px;
   color: #C30017;
   text-decoration: none;
   margin: 0 auto;
   font-family: "Heartland",cursive;
   font-weight: normal;
   font-style: normal;
   padding-top: 2px;
   line-height: 100%;
   display: block;
   float: none;
   position: relative;
}

Конец выше CSS действительно искал какое-либо решение, чтобы найти исправление, следующее не влияет на различия в выравнивании:

   display: block;
   float: none;
   position: relative;
   vertical-align:_____; <- tested all variants all, no luck.

Любое понимание того, почему это ведет себя по-разному в разных операционных системах? Могу ли я добавить, что я пробовал несколько браузеров на каждом, единственное влияние - это ОС.

Заранее спасибо за помощь!