Seeking advice on implementing kerning technique for a logotext in the <header>, ensuring cross-browser compatibility.
Using this helpful tool created by Mr. Andrew (special thanks), I found a solution.
Prior to the modification, the <header> section in header.php looked like:
...
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
...
After:
...
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
...
</header>
<!-- End Header -->
...
The CSS code for the logotext:
...
.logotext-n {
color: #f1ecd6;
font-family: "arial black", sans-serif;
font-weight: 900;
font-size: 210px;
text-transform: lowercase;
letter-spacing: -29px;
}
.
.
.
.logotext-d {
color: #f1ecd6;
font-family: "arial black", sans-serif;
font-weight: 900;
font-size: 210px;
text-transform: lowercase;
letter-spacing: 0;
}
...
To address kerning differences in browsers, a media query was used to adjust values specifically for Chrome:
...
@media screen and (-webkit-min-device-pixel-ratio:0) {
.logotext-n {
color: #f1ecd6;
font-family: "arial black", sans-serif;
font-weight: 900;
font-size: 210px;
text-transform: lowercase;
letter-spacing: -18px;
}
}
.
.
.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.logotext-d {
color: #f1ecd6;
font-family: "arial black", sans-serif;
font-weight: 900;
font-size: 210px;
text-transform: lowercase;
letter-spacing: 0;
}
}
...
The result looks consistent across IE11/Firefox38.0.5/Chrome43.0.2357.124 m with no errors in the console.
As someone new to coding, I'm unsure if this kerning technique is optimal for cross-browser support or if there are alternative methods that could be more efficient. Any insights would be appreciated. Thank you.