字間設定あり
(0.08em)
行間設定あり
(1.8倍)
※「Web上で読みやすい」とされている字間と行間の設定
約物にウェブフォントをあてる
約物、というものがあります。今回の議題となっている、「……」「――」などを指します。記述に使う記号です。
「……」は三点リーダー(を2つ並べたもの)、「――」は二倍ダーシなどと言います。
これらが期待通りの表示にならない――「三点リーダーが文字の天地中央に配置されず、ベースラインに並んで(=下付きになって)しまう」および「二倍ダーシが、ダーシとダーシの間に隙間が入ってしまう」――という問題の原因は、フォントにあります。
二倍ダーシの方は、どうもフォントによってそもそも一続きにならないようです。ので、一続きになるフォントを設定します。
三点リーダーの方は、なんと英字フォントが「…」に適用されてしまっている状態なんだそうです……。なんで……。
長くなるんで以下省略しますが、つまり三点リーダーは日本語フォントを適用すればいいとなります(※)。
※フォントの設定(font-family)は、複数のフォントを指定できます。複数書いた場合は、「先に書いているフォントから適用。そのフォントが閲覧環境になかったら次のフォントを適用、それもなかったら更に次の……」と決められます。優先順位があって、それは先に書いているものほど高いということですね。
で、「この文字はこのフォントの中に入ってない」という場合も、優先順位にしたがって「このフォントにない、でも次のフォントにはある。だからこの文字にはこのフォントをあてる」……となります。
よって、『font-family:英字フォント,日本語フォント;』という順番で書いちゃうと「…」に英字フォントの下付き「...」があてられてしまうわけです。
「font-familiyで指定なんてしてないのになぜ下付きになるのか?」……に関しては、たぶんスマホのフォント設定自体がなんかそうなってるん……ですかね??(すみません、調べたもののよく分からんかったです。とりあえずXperia 1に関しては、font-familyを指定してないと「...」になることが確認できていますが)
結論としては三点リーダーにせよ二倍ダーシにせよ、「思い通りの表示になるフォントを指定する」と解決する!……わけですが、これが簡単ではない。
パソコンでの閲覧のみを対象にするなら、だいたいこの日本語フォントたちを指定すればMacでもWinでも表示できるだろっていうのがあるんですが、問題はスマホ。特にAndroid。
そのデバイスの中に何のフォントが入っているかは……多種多様すぎて、分からないのです。だから、「どの環境から見ても望み通りの約物が表示できるフォント指定」というのが激ムズになるという……。
どんな環境でも同じフォントを表示するといえば! ――そう、Webフォントです。
ページ全体をWebフォントで表示したってもちろんOKです。
ただ今回、『「…」「―」のみをWebフォントにして、他の文字は普通にデバイス内のフォントを適用する』という手法にしたのは、「小説の中で使うから」という理由です。
先に触れたように、フォントの中にとある文字が無かったら、その文字だけ次のフォント――つまりそこだけが違うフォント――になってしまうんです。
小説を書いていると、人名だったり地名だったり、ちょっとマイナーな漢字を使う可能性が高いかと思います。
そういった文字が、「一部だけ違うフォントになる」と、なんだかモヤッとするかなぁ……というのが個人的な感想です。
その点、Webフォントにするのを約物だけに絞れば、違うフォントが入り交じっていると気付かれることもあまりないかと思います。
でもまあ、やっぱり全体のフォントをゴシック体にしているならWebフォントもゴシック体に、明朝体なら明朝体に……とした方が違和感が生じる危険性は下がる気がします。(ゴシック体と比べると、明朝体は約物もやや線が細かったりしますし※フォントによる)
そういう理由で、『「…」「―」のみをWebフォントに』したのがこのデモです。
あと今回たまたま知ったのですが、Google Fontsの『Noto Sans JP』『Noto Serif JP』は、字間(letter-spacing)をあける設定にしていても、二倍ダーシの間に隙間が入らない!!
Webフォントのほうでそういう指定をしてある? みたいです。よく分からんけどありがたい。
ただ三点リーダーのほうは字間を広げない指定とかがないようで、普通の文字と同じく間があいてしまいます。
それの確認のため字間をあけたテストテキストを設置しました。
この長い文章に指定した字間・行間・文字サイズは、一般的にWeb上で読みやすいとされている値です。
このデザインで、三点リーダー×2に入る隙間が気にならないかをお確かめください。
十……九……!
十――九――!
――……
何もしない
十……九……!
十――九――!
――……