Web サイトに使われているフォントが気になることありませんか？僕はあります。そんな時に何のフォントが使われているか調べる方法です。

Fonts Ninja

今回は Chrome 拡張機能である Fonts Ninja を使用します。

これは今回ように Web サイトに使われている Web フォントを知りたい時に活用できます。

機能はフォント・タイポグラフィ情報の取得と試し打ちの2つあります。

情報の取得

拡張機能をインストールし、追加されたアイコンをクリックすると、そのページで使われているフォントが一覧で表示されます。

さらに、マウスを特定の文字列にもっていくと、その箇所で使われているフォントやサイズ、色、行間などタイポグラフィ情報が表示されます。

試し打ち

取得した Web フォントを試し打ち（試し書き）することもできます。

表示された、フォント一覧の部分をクリックすると、そのまま文字をタイプすることができます。

欠点

この Fonts Ninja を使っても、全てのフォントが正確に表示されるわけではないようです。

CSS 以外からも情報を取ってきているようですが、限界があります。あくまで参考程度に使うと良いのかもしれません。

おわりに

海外の企業のサイトとかだと、オリジナルの書体とか作っていて見るのも楽しいですね。日本でもこれぐらい自由になれば楽しいのに。

今までフォントサイズとか行間を感覚で決めていたんですが、数学的（？）にきっちり決めることで、綺麗になったので、考え方を共有します。

完成品

描画結果

左が普通の表示で、右はわかりやすく、背景に縦方向のグリッドを表示したものです。

CSS

変数を使用して以下のようにしています。

:root {
  --base-font-size: 16px;
  --vert-grid-size: calc(var(--base-font-size) * 2);
}

h1 {
  font-size: calc(var(--base-font-size) * 3.000);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h2 {
  font-size: calc(var(--base-font-size) * 2.498);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h3 {
  font-size: calc(var(--base-font-size) * 2.080);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h4 {
  font-size: calc(var(--base-font-size) * 1.732);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h5 {
  font-size: calc(var(--base-font-size) * 1.442);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h6 {
  font-size: calc(var(--base-font-size) * 1.201);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

p {
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: var(--vert-grid-size);
}

なんで作ったの

Web 作るときのテンプレートを作りたいなっていうだけです。

ただ、せっかく作るなら綺麗で汎用性の高いものを作ろうとした結果です。

フォントサイズは等比数列にしているのですが、これは等差数列に比べ、自然にサイズが変わっていくからです。
人の五感は対数に比例するという ヴェーバー‐フェヒナーの法則 があるので、おそらく正しいです。自然界や人が良い（美しい）と思うものを思い浮かべると納得いく気がします。

また、縦方向のグリッドに関しては、ノートの罫線とかを想像すれば分かりやすいと思いますが、やっぱり揃っている方が綺麗ですよね。現在の Web のほとんどのページは縦に伸びていくので意識しない限り縦方向にグリッドが作りにくいので、少なくとも文字（文章）ぐらいはきっちり揃えていきましょうということです。

フォントサイズ

フォントサイズは <p> のサイズを基準値（今回の例は 16px ）として <h1> がその3倍になるような等比数列にします。

<p> から <h1> にかけて常に 1.1 倍みたいな公比の決め方であれば計算は簡単なんですが、今回は最終的に3倍になるという決め方をしています。この公比は累乗根（冪根）となるため、計算が少し複雑です。

3倍まで拡大し、<p> から <h1> までは6ステップあるので、以下の式で係数が求められます。i は各段階（<p> が 0 で <h1> が 6）が入ります。

\sqrt[6]{3^{i}}

ただし、CSS の calc() では累乗根のような複雑な計算ができません。そこであらかじめ計算機やプログラムを使って求めておきます。
累乗根は普通の累乗の計算に置き換えられるので、使用するものが累乗根に対応していない場合は、以下の式を用いましょう。

({3^{i}})^{\frac{1}{6}}

行間

縦方向のグリッドは最小単位を <p> のフォントサイズの2倍としています。

この値を基準に <h1> から <h6> に対しては2グリッド分を与えています。ただ、後半（ <h5>, <h6> ）あたりは余白が大きくなってしまうので1グリッド分でも良いかなとも思っています。その辺は臨機応変に。

おわりに

テンプレの完成目指して頑張ります。