99_no-category

テキストの縦ラインが揃わない原因と解決法!フォントを変えると世界も変わる

メールの本文やブログの記事を書いたりする際には、基本的にテキストエディタを使っています。愛用しているのは無料のエディタ「Coteditor」ですね。

テキストエディタを使って文章を作り、それをコピペして使うのが私のやり方。なるべくなら使いやすくて気に入っている道具を使いたいのです。

メールだからコレ、ブログだからコレなど、用途によって道具を変えるのは好みじゃないのですよ。

さてさて。そんな私ですが、1つだけ普段からどうしても気になっている点がありました。

それは、書いた文章の縦位置・縦のラインが揃わないこと。

複数行に渡る文章を書いていて、文章の縦位置が合わない。同じ文字数を書いているはずなのに、末尾がズレる。

これがメッチャ気持ち悪くて、なんとか解決できないか悩んだ過程を今日はお話しします。

テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる

タテが揃わない理由はプロポーショナルフォント

まず、文章の縦幅が揃わないのは、1文字あたりの横幅が文字によって変わってしまうのが原因です。これを「プロポーショナルフォント」と言います。日本語では可変幅フォントとも。

Propvsmono.svg

"Propvsmono" by BANZ111 - 投稿者自身による作品. Licensed under Public domain via ウィキメディア・コモンズ.

上記の画像を見て分かる通り、「Proportional」という文字の幅は、アルファベットの形によってまちまちです。ただただ文字を横に並べるよりも読みやすくするための配慮なんだそうです。

これに対比して、文字に関係なく横幅が固定されているフォントを「等幅フォント(固定幅フォント)」と言います。上記の画像で言う「Monospaced」という方ですね。

プロポーショナルフォントの見分け方

プロポーショナルフォントと呼ばれるフォントは、フォント名に「P」とか「Pro」が付きます。例えば以下のフォント。

・MS Pゴシック
・ヒラギノ角ゴ Pro
・ヒラギノ丸ゴ Pro

ただ、「P」とか「Pro」が付いていないフォントが全て等幅フォントかと言うと、一概にそうは言えないのでご注意を。

フォントにある「Pro」表記は、アドビシステムズ社が日本語フォント製品用に決めた規格の名称とのことで、プロポーショナルフォントを示すものでは無いことを訂正いたします。

参考:日本語フォントの後ろにある「Std/Pro/Pr5/Pr6」と「N」の意味 | karasuneko Blog

プロポーショナルフォントは、一部の例外を除き、ほとんどの欧文フォントに採用されているそうです。

参考:プロポーショナルフォント - Wikipedia

多数のご指摘頂き、ありがとうございました。また、誤った情報を記載したことをお詫びいたします。

等幅フォントなら縦が揃う…けど…

さて、では今回の「文章を書いた時に縦ラインが揃わない問題」を解決するには、等幅フォントを使えばいいじゃないと、結論はそういうことです。

文字に関係なく横幅が固定されていますからね。文字数が同じなら、横幅も同じになり、縦幅は統一されます。

しかし、事はそうカンタンではありませんでした。等幅フォントって、ホント数が少ないんです。

Macのフォント選択では、親切にも「固定幅・等幅」のフォントを選ぶことができるようになっています。

テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる10

私が好きなフォントは軒並みダメでした。「ヒラギノ系」も「源の角」も「メイリオ」も、果ては「やさしさゴシック」もダメなんです。これらぜーんぶプロポーショナルフォント。

私が好きなフォントを使いたければ、テキストの縦のラインを揃えることは諦めなければならず、縦のラインを気にするのであれば好みのフォントは使えず……。

うーん……と悩んだ挙句、とりあえず各フォントでの縦のズレ具合をちょっと見てみることにしました。

すると、フォントによって結構違いがあるみたいなのです。

フォントによって違う横幅とズレ具合

フォントによる、縦ラインのズレ具合を検証してみました。以下の画像がそれをまとめたもの。こうやって見ると、結構違うんです。

▼やさしさゴシック。結構ズレが大きい。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる01

▼Helvetica。ひらと漢字は良いのですが、アルファベットが混ざるとズレる。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる02

▼MS Pゴシック。メッチャズレる。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる03

▼MSゴシック。これは固定幅フォントなので、幅が揃うのは当然。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる04

▼Osaka。これにも等幅フォントがあるので、これを使っても縦のラインは揃う。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる05

▼ヒラギノ角ゴ Pro。アルファベットが入ると微妙にズレる。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる06

▼ヒラギノ丸ゴ Pro。ほとんどズレがない。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる07

▼メイリオ。アルファベットが混ざるとちょいズレる。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる08

▼源の角ゴシック。ほとんどズレがない。
テキストの縦ラインが揃わない原因と解決法 フォントを変えると世界も変わる09

結果こんな感じです。

結論としては「ヒラギノ 丸ゴ」と「源の角ゴシック」では、縦のラインにほとんどズレが見られませんでした。

なので、これらのフォントを使っていけば、そんなに縦のラインのズレを気にせずに済みそうです。

あとがき

細かいことをうだうだ言っているように思われるかもしれませんが、個人的にはこれがチョー大事。

毎日絶対に目にするのがフォントであり、一緒に過ごしている時間が何よりも多くなるものなのです。

それを「気に入らないもの」を我慢して使うなんて、ストレスでしかない。逆に言えば、「自分のお気に入り」を見つけられれば、何をするにも癒やしが伴います。

なので、このフォント問題についてはこれからも考えていくことになるんだと思いますよ。

それでは、今日はこの辺りで。

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-99_no-category
-,