サイトタイトルの字間を調整してみた

タイポグラフィでカーニングについて勉強してからこのサイトのタイトルを見ると、見事に字間のバランスが微妙な感じだった。

Before

「ひ」と「げ」の間が狭く、「ろ」と「ぐ」の間が広く見える。

After

HTMLとCSSを以下のように修正。
「ぐ」はletter-spacingではなんともならなかったのでマイナスのマージンにした。

<span class="header__site-title_first">ひ</span>げろ<span class="header__site-title_last">ぐ</span>

.header__site-title_first {
      display: inline-block;
      letter-spacing: 2px; }
.header__site-title_last {
      display: inline-block;
      margin-left: -3px; }

やったね。

画像にしろ？そうですね。