何日も更新をしてこなかったが、このサイトで何もしていなかったわけではない。ＣＳＳを変えたり調整した。一番の変化はフォント。これまで Google Fonts の web フォントを利用していたが、ページの読み込み速度向上を図るため、そしてフォントの選択は閲覧者に任せるべきなのではないかと思って、書体を明朝 (serif) やゴシック (sans-serif) に指定するだけにした。これまで web フォントを使っていたのは、違う環境でもある程度の統一性を保つためだったが、果たして必要なのか考えた。
フォントは運営者がサイトのデザインの一環として選ぶべきなのか、閲覧者が読みやすいと思うものを選ぶべきなのか、両方の言い分にそれぞれ一理ある。デザインに凝りすぎて読みにくいフォントを選ぶサイト運営者もいれば、ＯＳやブラウザーの味気なかったり綺麗ではないデフォルトのフォントでインターネットを閲覧する利用者もいる。でもフォントにこだわりがある利用者は自分で設定するだろうし、最近はデフォルトのフォントも読みやすくなった。書き手として内容を読んでほしいわけであって、フォントを見てほしいわけではない。
このサイトで記事本文は明朝に設定している。少数派かもしれない。出版物に馴染んでいるためか、文章はゴシックより明朝の方が良いと常々感じる。極端な表現だが、ゴシック体の長文は読む気が失せる。しかしこれは人それぞれ。逆に明朝体は読むのが難しいと感じる人もいるだろう。この明朝かゴシックかという点に関して、サイト運営者として自分の趣向である明朝体を読者に押し付けている。また個人的に日本語の明朝体はプロポーショナル・フォントよりも等幅フォントの方が読みやすいと思っているが指定はしていない、というか後述するようにできない。なおラテン・キリル・ギリシャ文字はプロポーショナル・フォントの方が断然良い。
フォントはＣＳＳの font-family で指定できる。等幅なら font-family: monospace; ゴシックなら font-family: sans-serif; 明朝なら font-family: serif; というように。全角等幅フォントは font-variant-east-asian: full-width; プロポーショナル・フォントは font-variant-east-asian: proportional-width; で指定できる。
このページのデフォルトのフォントは font-family: ui-sans-serif, sans-serif; でゴシックにしている。見出しは font-family: ui-rounded, sans-serif; と丸ゴシック次いでゴシックを指定。そして本文は font-family: ui-serif, serif; で明朝体。ブラウザーではなくＯＳのフォントを利用する ui-sans-serif, ui-rounded, ui-serif を優先して指定したのは良いものの、実際にどのように表示されるのか、私には分からない。なぜなら現在適用されるのは Apple の Safari のみで、持っているパソコンは Linux でスマートフォンは Android のため、確認できないから。
いろいろとＣＳＳを調整修正していて、かなり混乱したので、書体と全角等幅とプロポーショナル・フォントがどのように表示されるのか、下記のリストを作ってみた。環境によって、同じフォントがいくつかの箇所で表示されることがある。例えば明朝体 (serif) のデフォルト・フォントがプロポーショナル・フォントであれば、リストの「明朝体」と「明朝体プロポーショナル・フォント」は同じになるはず。日本語とラテン文字がどのように表示されるかの例として、夏目漱石の『吾輩は猫である』とフランツ・カフカの『変身』の書き出しを利用した。括弧と数字は半角 (123456789) と全角【１２３４５６７８９】を半角スペースを挟んで入力した。全角等幅フォントとプロポーショナル・フォントの差が分かりやすいだろうか。なお数字の表示は font-variant-numeric: tabular-nums; になっている。丸ゴシック体は Apple Safari のみで表示されて、その他のブラウザーであればゴシック体で表示されるはず。
リサーチ不足かもしれないが、例えば明朝体またはゴシック体で半角で入力された数字などはそのまま半角で、全角で入力した文字や数字を等幅で表示させるには、等幅の明朝体あるいはゴシック体のフォントを指定しなければならないようだ。全角等幅 (font-variant-east-asian: full-width;) を指定すると半角入力した数字などが全角になるし、プロポーショナル・フォント (font-variant-east-asian: proportional-width;) を選べば全角で入力した数字などが半角と同じようになる。等幅フォント (font-family: monospace;) を指定すれば良いのだが、利用されるフォントが個々の環境によるので、明朝かゴシックかを指定したいときに困る。
等幅フォント
font-family: ui-monospace, monospace;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
全角等幅フォント
font-family: ui-monospace, monospace; font-variant-east-asian: full-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
等幅プロポーショナル・フォント
【注】名前が矛盾しているが、半角が存在する数字などの場合、全角入力が半角等幅表示になる模様。
font-family: ui-monospace, monospace; font-variant-east-asian: proportional-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
明朝体
font-family: ui-serif, serif;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
明朝体全角等幅フォント
font-family: ui-serif, serif; font-variant-east-asian: full-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
明朝体プロポーショナル・フォント
font-family: ui-serif, serif; font-variant-east-asian: proportional-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
ゴシック体
font-family: ui-sans-serif, sans-serif;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
ゴシック体全角等幅フォント
font-family: ui-sans-serif, sans-serif; font-variant-east-asian: full-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
ゴシック体プロポーショナル・フォント
font-family: ui-sans-serif, sans-serif; font-variant-east-asian: proportional-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
丸ゴシック体
font-family: ui-rounded, sans-serif;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
丸ゴシック体全角等幅フォント
font-family: ui-rounded, sans-serif; font-variant-east-asian: full-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】
丸ゴシック体プロポーショナル・フォント
font-family: ui-rounded, sans-serif; font-variant-east-asian: proportional-width;
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
(123456789) 【１２３４５６７８９】