スポンサーリンク

「解像度」ってフォントサイズにも影響するよねというお話

この記事は約5分で読めます。

イメージ

こんにちは、さち です。

画像編集やイラストを描いたりしていると、よく出てくる言葉「解像度」。

「解像度」は印刷に関する数値だから、ウェブ用の画像には関係ないと言われることがあります。本当なのでしょうか?

今回は、「解像度」はフォントサイズにも影響するよというお話。個人的に気になって勉強した内容ですがお役に立てば幸いです。

スポンサーリンク

【前置き】 そもそも「解像度」とは

画面の大きさのことではない

操作画面

一般的に「解像度」というと、液晶画面の大きさ(ピクセル数)を表す「1920×1080」などを思い浮かべるかもしれません。

しかし、画像編集での「解像度」はまったく別のもの。同じ単語でも意味が全然違うので混同してはいけません。ややこしいですね。(区別のため、ピクセル数の方は「画面解像度」と言うことも)

解像度の単位「dpi」「ppi」とは?

画像編集で使う「解像度」の単位は「dpi」や「ppi」です。

「dpi」は「dots per inch」の頭文字を取ったもの。
「ppi」は「pixel per inch」の頭文字を取ったもの。

どちらにも入っている「per」は「/(斜線)」のことです。時速60キロを「60キロ/時」と書くときの「/」と同じです。

だから、「dpi」「ppi」を略さずに日本語で書くとこうなります。

「dpi」 = 「ドット/インチ」
「ppi」 = 「ピクセル/インチ」

ちなみに、「インチ」は長さを表す単位です。(1インチ=2.54cmですが覚えなくていい)

つまり、「dpi」「ppi」は、1インチの中にXX個のドット(ピクセル)があるという意味。「解像度」は点の密度を表しているわけです。

画像の印刷はこの「解像度」をもとに行われます。例えば、縦横ともに300ピクセルの画像を印刷する場合……

300dpi = 1インチに300ドット → 縦横1インチの大きさで印刷
100dpi = 1インチに100ドット → 縦横3インチの大きさで印刷

つまり、「解像度」は画像の印刷サイズに影響する数値です。

ウェブ用画像に「解像度」は関係ない?

「解像度」は印刷用の数値。ウェブ用の画像であれば「解像度」はいくつでもいい。そんな話を聞いたことがあるかもしれません。これは、ネット上の画像の表示が基本的に「ドットバイドット」方式だからです。

ドットバイドット(dot by dot)」とは、画像の1ピクセルを液晶画面の1ピクセルに合わせる表示方式のこと。つまり、ドットバイドット方式で画像の大きさに関係するのは「ピクセル数」だけ。だから、ウェブ用画像の解像度はいくつでもいいと言われるわけです。

では、ウェブ用画像を作るとき、解像度の数値は何でも良いのかというと、そうではありません。実は、画像に入れる「文字」のサイズにも解像度が影響するからです。

【本題】 文字サイズには解像度が関係する

やっとここからが本題です。前置き(予備知識)の説明が長かったですね、すみません……。

文字サイズの単位「pt(ポイント)」

Photoshop, CLIP STUDIO PAINT, IllustStudio 等のソフトは、画像に文字を入れる機能がありますよね。初期設定だと、文字サイズの単位は「pt(ポイント)です。(設定で px に変更できることもある)

操作画面

「pt」は長さを表す単位で、「1pt = 1/72(≒0.014)インチ」。文字サイズでも「インチ」という単位が関わっているんです。

思い出して下さい。解像度の単位は「ピクセル/インチ」でしたよね。こちらにも「インチ」という単位があります。つまり、解像度文字サイズに影響する数値なんです。

解像度が「pt」に与える影響

例えば、同じ「24pt」の文字でも、解像度が異なると画面上のサイズはこんなにも違います。

サイズの比較
※ px = pixel(ピクセル)

72dpi を基準として比べると、96dpi は約1.3倍、300dpi は約4倍大きいサイズになります。

「pt」を「px」に変換する式は次のようになります。(覚えなくてもいい)

計算式

文字サイズ「pt」が一定の場合、解像度」が大きいほど、文字サイズ「px」も大きくなるのが分かります。

先ほどの 24pt の例を計算してみると次のとおり。

【300dpi の場合】 24 × 1/72 × 300 = 100px
【96dpi の場合】 24 × 1/72 × 96 = 32px
【72dpi の場合】 24 × 1/72 × 72 = 24px

72dpi はキレイに約分できるので「pt」の数値がそのまま「px」になります。計算の手間が省けますね。ウェブ用画像の解像度に 72dpi がよく使われるのはこれも理由なのでしょうか?

文字サイズを「px」で指定している場合、解像度の影響はありません

【余談】 WinとMacでも文字サイズが違う

比較

Windows で作成した Word ファイルを Mac で開くと、上の画像のように『文字小っさ!』となります。

拡大率は「100%」、フォントサイズは「10.5」、フォントは「MS 明朝」。Windows と Mac どちらもまったく同じ条件。それなのに、Mac の方が小さい。

もう気付いているかもしれませんが、原因はやはり「解像度です。

実は、Word の文字サイズの単位も「pt」。Word は印刷することを前提にしています。「pt」が同じであれば、解像度が違っても紙に印刷した時の文字の大きさは同じになります。だから、「px」でなく「pt」を使う方が都合が良いのです。

Windows は「96dpi」、Mac は「72dpi」です。そのため、Mac での画面上の文字サイズは Windows の4分の3(75%)の大きさになってしまいます。

実際に、10.5pt をピクセルでの大きさに換算してみると……

【Windows】 10.5 × 1/72 × 96 = 14px
【Mac】 10.5 × 1/72 × 72 = 10.5px

10.5px はちょっと小さいですよね。

以上の内容は、勉強したことを自分なりにまとめたものです。誤りなどありましたら指摘して頂けるとありがたいです。

コメント

タイトルとURLをコピーしました