フォントで文字の見た目が変わる理由

端末のフォントとWebフォント

たとえば、制作者のパソコンにだけ有料のフォントが入っているとします。その名前をホームページで指定しても、見る人のパソコンやスマートフォンに同じフォントがなければ、そのままでは使えません。代わりのフォントで表示されることがあります。

文字の形が変わると、横幅も変わることがあります。その結果、自分の画面では1行だった店名が、別のスマートフォンでは2行になることもあります。写真や文章が同じでも、文字の見た目や改行が変わる理由の一つです。

Webフォントを使う場合は、ページを開くときにフォントのデータも読み込みます。見る人の端末にそのフォントが初めから入っていなくても、指定したフォントで文字を表示できます。

Webフォントの読み込み中は、代わりのフォントで文字が表示されることがあります。データの読み込みが終わると指定したフォントに切り替わるため、画面を開いた直後に文字の見た目が変わる場合があります。使う種類や太さを絞ると、読み込むデータ量を抑えられます。

代わりのフォントを設定する

希望するフォントが使えないときのために、代わりの候補を用意します。この仕組みをフォールバックと呼びます。文字の見た目を指定するCSSでは、使いたいフォントを優先する順に並べられます。自分でコードを書かない場合は、制作者に代わりのフォントも設定してもらいます。

候補を決めても、どの端末でも改行が完全に同じになるとは限りません。長い店名やボタンの言葉が2行になっても、文字が重なったり途中で切れたりしない作りにしておきます。

Webでの利用が認められているか確かめる

パソコンで使えるフォントでも、そのデータをホームページへ置いてよいとは限りません。配布元や購入先が示す「Webフォント」「Webサイトでの利用」などの条件を読みます。

制作を依頼する場合は、使いたいフォントの名前と入手先を伝え、ホームページで使える契約かを確かめてもらいましょう。画面上の見た目を似せるために、手元のフォントファイルを自己判断で公開するのは避けます。

住所や料金も読みやすいか

店名を大きく表示したときには好みに合っていても、小さな料金表示や長い本文では読みにくくなることがあります。候補のフォントで実際の店名、住所、営業時間、料金を表示し、小さな濁点や数字まで読み分けられるかを比べると、選ぶ際の目安になります。

たとえば宿泊施設なら「チェックイン15:00」「2名1室」のような案内も表示します。パソコンとスマートフォンの両方で、無理に拡大しなくても読めるか、文字が枠からはみ出していないかを見てください。