こんにちは！
最近TANE-beに入社したデザイナーです！
以前はグラフィックデザイナーとして紙媒体を中心に制作していたため、Web業界は未経験。同じデザイン畑の中でも、やっぱり全然違うなと日々勉強の嵐です…！

特に入社当初からつまずいたフォント設定…
単位が「pt」から「px」に変わり、いまだにサイズ感や間隔の失敗を繰り返しています…（実機で見ると「あれ、違う…」となることがちらほら）

入社当初から考えていた「こんなのあったらいいな」をナレッジで作成させていただきました！フォントのサイズ感だけでなく、行間や字間のルールなど、この記事を通してWebデザインをこれから始める方の参考になれば幸いです！

Webデザインに最適なフォントサイズは？

一般的に多いフォントサイズ(PC・スマホ)

PC・スマホともに16pxがGoogleが推奨するフォントサイズですが、一般的には14px～16pxの間で作成されています。しかし、こどもや高齢のユーザーが閲覧するサイトでは17〜18pxの大きさが推奨されるので、ターゲットの年齢層や性質によってフォントサイズを使い分けていきましょう。

16pxで作成されているサイト

※2022年11月1日現在（弊社で作成したサイトです。）

税理士法人 Beso様

17〜18pxで作成されているサイト

※2022年11月1日現在（弊社が作成したサイトではありません。）

ハロー！スパコン

スパコン（スーパーコンピューター）について、理化学研究所 計算科学研究センター様が子ども向けに分かりやすく解説したサイトです。

最小フォントサイズ

PC、スマホともに最小フォントサイズは10pxですが、ユーザビリティを考えると12pxはあると望ましいです。（10px以下になると文字が潰れて見えづらくなる、または設定できないので注意しましょう）

フォントサイズ早見表

10pxはこれくらいの大きさです。

12pxはこれくらいの大きさです。

14pxはこれくらいの大きさです。

16pxはこれくらいの大きさです。

18pxはこれくらいの大きさです。

20pxはこれくらいの大きさです。

24pxはこれくらいの大きさです。

28pxはこれくらいの大きさです。

32pxはこれくらいの大きさです。

36pxはこれくらいの大きさです。

40pxはこれくらいの大きさです。

50pxはこれくらいの大きさです。

簡単にフォント設定を確認できるChrome拡張機能「WhatFont」

次に、気になるサイトのフォント情報を簡単に知ることができる拡張機能をご紹介します！Google Chrome拡張機能の「WhatFont」は、気になるwebサイトのフォントを簡単に調べることが可能です。

Chrome ウェブストア「WhatFont」

「WhatFont」を起動し、気になるフォントをクリックするとフォントの詳細情報を確認できます。

ワンクリックでフォント情報を確認できる便利機能ですので、ぜひ試してみてはいかがでしょうか？

Webデザインに最適な行間・字間は？

続いて、「行間・字間」についても触れていきたいと思います！
私が紙のデザインを制作していた時は、行間は0.8文字分～1.5文字分空ける。字間は目分量…という形で設定していましたが、特集やページに収まらない場合など、ページごとに少しずつルールを変えることもありました。しかし、webデザインでは、セクションによってルールが違うとコーディングが大変になります。紙よりもより統一されたルールが必要になってくるので気をつけましょう。

Webデザインに最適な行間（line-height）

見やすい行間は文字サイズの150%〜200%と言われています。情報を詰め込みたい場合は150%、ゆったりと読んでもらいたい場合は200%…とサイトの目的に合わせてルールを決めていくといいですね。

XDで行間を設定する方法

XDでは、行間は赤枠で囲っている場所で設定します。
行間の計算方法は以下の通りです。

行間（line-height）早見表

line-height150%

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書

line-height180%

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書

line-height200%

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書

Webデザインに最適な字間（letter-spacing）

見やすい字間は、50〜100前後（XDでの設定）です。こちらも行間と同じく、サイトの目的に沿って設定していきましょう。

XDで字間を設定する方法

XDでは、字間は赤枠で囲っている場所で設定します。（％では設定できません。）

字間（letter-spacing）早見表

letter-spacing50はこんな感じです。

letter-spacing100はこんな感じです。

letter-spacing150はこんな感じです。

まとめ

情報をユーザーにわかりやすく伝えることや世界観を演出する上で、フォント設定はとても重要ですね。
この記事が、みなさまの参考になれば幸いです！