Как правильно реализовать сгенерированный код кернинга

У меня есть ситуация, пытаясь реализовать в <header>, логотип с использованием техники кернинга, с этим простым, но очень удобным инструмент сделано г-ном Андреем (особая благодарность).

До модификации у меня было это <header> раздел в header.php:

...
<!-- Start Header -->

<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">

<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">

<?php if ($header_style == 'style2') { ?>

<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>

</a>

<?php } ?>

</div>

<?php if ($header_style != 'style2') { ?>

<div class="small-7 medium-4 columns logo">

<?php if ($header_style == 'style1') { ?>

<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>

</a>

<?php } ?>

</div>

<?php } ?>

<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">

<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>

<?php if ($full_menu_true) { ?>

<nav id="full-menu" role="navigation">

<?php if ($page_menu) { ?>

<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>

<?php } else  if(has_nav_menu('nav-menu')) { ?>

<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>

<?php } else { ?>

<ul class="full-menu">

<li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>

</ul>

<?php } ?>

</nav>

<?php } ?>

<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>

<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>

<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">

<div>

<span></span><span></span><span></span>

</div>

</a>

</div>

</header>

<!-- End Header -->
...

используя сгенерированный кернинг codeЯ был судим (и, пожалуйста, поправьте меня, если это плохой подход для php кодирование):

...
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="row max_width ">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<span class="logotext" style="letter-spacing: -18px;">n</span>
<span class="logotext" style="letter-spacing: -17px;">e</span>
<span class="logotext" style="letter-spacing: -18.5px;">u</span>
<span class="logotext" style="letter-spacing: -13px;">e</span>
<span class="logotext" style="letter-spacing: -23.5px;">g</span>
<span class="logotext" style="letter-spacing: -7px;">r</span>
<span class="logotext" style="letter-spacing: -19px;">i</span>
<span class="logotext">d</span>
<?php } ?>
</div>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="row max_width ">
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<span class="logotext" style="letter-spacing: -18px;">n</span>
<span class="logotext" style="letter-spacing: -17px;">e</span>
<span class="logotext" style="letter-spacing: -18.5px;">u</span>
<span class="logotext" style="letter-spacing: -13px;">e</span>
<span class="logotext" style="letter-spacing: -23.5px;">g</span>
<span class="logotext" style="letter-spacing: -7px;">r</span>
<span class="logotext" style="letter-spacing: -19px;">i</span>
<span class="logotext">d</span>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="row max_width ">
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>
<?php } else  if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</div>
</header>
<!-- End Header -->
...

Теперь, не уверен, почему, результат выглядит как должно в Chrome, но в IE11 / Firefox буквы как-то скремблированы в вертикальном положении.

Какие-нибудь мысли?

Л.Е .: со всем уважением, я должен пересмотреть вопрос об оценке ответа, потому что предложение не помогает правильно реализовать решение, Выглядит нормально в Chrome, но в IE / Firefox значения Кернинга (основной предмет этого вопроса) не имеют никакого эффекта.

Надеюсь, вы не возражаете, ребята, но мне все еще нужен ответ, чтобы закрыть этот вопрос, чтобы найти правильное решение для меня и других людей, которые будут заниматься этой проблемой в будущем. Если я не понял правильные шаги реализации, будет нормально иметь ответ более конкретный с реальными примерами, я не ленивый, просто чистый нуб (я уже упоминал в своих постах). Спасибо.