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

2020-07-22
2020-07-22

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

Before

ひげろぐ before

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

After

ひげろぐ 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; }

やったね。

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

Profile

フルスタック気味のフリーランスプログラマー。

どちらかと言うと得意はインフラ構築とサーバーサイドプログラミングですが、フロントエンドもぼちぼちやっています。

最近の興味範囲はWordPress、AWS、サーバーレス、UIデザイン。

愛車はセロー。カメラはペンタックス。旅好きです。横浜在住。