文字体裁の改新

(上) OSX上での古い文字体裁
(下) OSX上での新しい文字体裁

Ubuntu/Firefoxでの古い文字体裁 (上)と新しい文字体裁 (下)

この文書は、ウィキメディアプロジェクト群と MediaWiki ソフトウェアパッケージの「Vector」外装の文字体裁に関して2014年に行われた更新についての説明です。

変更点の要約

私たちは以下の必要不可欠な条件を念頭に置き、このウィキメディアの標準文字体裁の改新に取り組みました。

1. 可読性：書体はあらゆるサイズで判別しやすく読み取りやすくなっていなければなりません。要素としての文字は、記事内容と（サイト内のナビゲーション部分などの）インターフェイスとを区別する助けにならなければなりません。
2. 一貫性: デスクトップでも携帯機器でも変わらない視覚体験。
3. 利用可能性：私たちが用いる書体はすべて、すでに利用可能になっているものか、利用可能にされたものである必要があります。どんな書体を選ぶにしても、異なるデバイスやプラットフォーム（Mac OS X, Windows, Linux, モバイルOS）を通じて、大きな支障を起こさず代替書体が使われるようにしなければなりません。
4. アクセシビリティ：ウィキメディアのコンテンツは障害を持った人を含むすべての人に高いアクセシビリティを提供しなければなりません。

このような文脈で、以下の変更を行いました：

新しい書体仕様

設定されたフォントファミリーは次のとおりです。見出しスタイルは「Linux Libertine、Georgia、Timesとserif」に設定されています。本文ははじめ「Helvetica Neue、Helvetica、Arialとsans-serif」に設定されていましたが、非ラテン言語ウィキで問題が発生したため、より良い解決策が見つかるまでの措置として「sans-serif」体に差し戻しました。

注意：ただし、必ずしも上に示されたいずれかの書体で表示されるわけではありません。どちらかといえば、ブラウザーとオペレーティングシステムは、上記のリストに示されているもののうち、インストールされているフォントの最初のものか「マッチング」ルールに合うものを探し、それを使用します。

見出し、文章の本文、行送りの新しい間隔と大きさ

現在の文章の幅で、見出しははっきりと目立ち、行送り（行間の余白）は目を疲れさせず読みやすくするために十分に広い必要があります。見出しは現在以下のように設定されます：H1（ページタイトル）は 1.3/1.8em、H2（主要な節見出し）は 1.3/1.4em、H3 は 1.6/1.17em、H4 は 1.6/1em、H5 は 1.6/1em。本文は0.875em (0.8em から)。ブラウザーとオペレーティングシステムによっては、これがわずかに異なるピクセル値に変換されますが、全体としては本文書体がわずかに大きくなります。上付き文字 (sup) および下付き文字 (sub) の行の高さは、現在は 1 に設定されています。これは、長く続いていた、見出しに影響を与える参照番号の問題を解決するためです。

新しい本文の文字色

16進トリプレットで表記すると、本文の色は、「背景色 #FFFFFF、文字色 #000000」から、現在は「背景色 #FFFFFF、文字色 #252525」に設定されています。技術用語を使わなければ、これは、色が「真っ白の背景に真っ黒の文字」から「真っ白の背景にとても暗い（黒に近い）灰色の文字」に変更されたという意味です。(リンク、見出し、その他の要素の色は変更されていません。)

よくある質問

この変更について、重要な質問の一部とその回答を以下に示します。

変更を受けるのは誰か

閲覧者・編集者を問わず、MediaWiki 1.23 で既定のベクター外装を使用しているすべての利用者です。今回の更新は閲覧者第一に設計されていますが、ごくわずかな文体上の修正のみです。個人設定やそれ以外の方法で、モノブックやケルンブルーなど別の外装を使用している利用者には、更新は適用されません。

個人でCSSをカスタマイズしている利用者や、管理者がウィキごとのCSSを変更しているウィキの利用者や、更新による新しい既定値と自らの設定が食い違うことに注意してください。もし今回の更新によって特定の要素（element）に異常がみられる場合は、本ページの「変更点の要約」や「よくある質問」をご確認ください。

そもそも文字体裁のどこに問題があったのか

テキストは、（ウィキペディアのような）百科事典であれ、ウィキソースやウィキブックスのような小さなプロジェクトであれ、ウィキメディアの視覚要素の中核にあります。私たちは利用者に、正確性、信頼性、分かりやすさを、読んでいる内容と同じようにデザインからも感じてほしいと思っています。この文字体裁の改新以前は、恣意的に決められた文字サイズがデスクトップ用だけでも20種類あり、利用者の目に不統一に映っていました。文字サイズは読者の多くにとって小さすぎ、行高は長いコンテンツを読むのに不適でした。見出しは長いページの入り口として働くべきであり、そのために可読性を助ける書式になっているべきです。私たちは、利用者がページをすばやく見たり長い文章の熟読したりするのに適したバランスと統一感を達成しようとしました。

古い書式にあった機能的不具合は、モバイル用文字体裁の改善の過程ではじめて対処されました。この際、大きな文字サイズ、広い行間、セリフ書体の見出しなどを試す機会ができました。そしていま、全言語、プロジェクトで可読性とアクセシビリティの問題に取り組み、デスクトップ、モバイルウェブサイト、アプリを通じて統一的なデザイン言語を作る段階に来ています。

あらゆる文字体系での可読性の要求を満たす完璧な書体はあるのか、今のこれがそうなのか

いいえ、次のすべてを実現する完璧な書体はありません。

1. 遍在：すなわち、すべての人気のあるデスクトップ・モバイルオペレーティングシステムにおいて利用可能であること。
2. グリフと区分符号の適切なレンダリング：何百もの非ラテン文字についても、文字対のカーニングが良いこと。利用者が文字を読むために目を細める必要がなくなります。
3. 相応なエックスハイト：左部ナビゲーション、キャプション、利用規約等二次情報について、小さな大きさの文字が読みやすくなります。
4. ヒンティング：特に Windows における、小さな大きさの文字の滲みの回避。

私たちは与えられた制約のなかでこうした要求事項をできるだけよく達成するよう、実践的な決断をしなければなりません。数百万人以上の読者が毎日異なるデバイスでウィキペディアを読んでいます。現在選ばれている書体は様々なプラットフォームで可読性と一貫性を改善します。

号数と行間が大きくなった理由は?

これは小さく控えめな変更です。多くのユーザーは、以前の文字の大きさ（号数）では読めなかったと言います。ユーザーのフィードバックによると、視覚の問題や障害がごく軽度の人でも、文章を読みやすくするため拡大表示を多用しています。すべてのユーザーが情報にアクセスできるように努力する上で、この分野ではこの変更は改善の基本的な要件だと感じています。号数とともに行間も21pxに増やし、行間の印刷基準に従って号数の120％まで拡大しました。これは記事の概論部に続けて、長い段落を読む閲覧者に役立ちます。

本文の文章はウィキメディア・プロジェクトのページの焦点です。ほとんどの言語版プロジェクトでは本文の文字は小さく、現在の尺度では行間が狭すぎます。文字がびっしり配置してあると効率は上がっても、読み続けるうちに目が疲れてしまいます。また非ラテン文字のサイズとして14px未満は推奨されません。単語に上付き文字やグリフをつけると表示が潰れやすくなる傾向があり、なんとか読み取ろうとすると眉間にしわが寄ってしまいます。

なぜ見出しにセリフ書体を使うのか

書体にセリフとサンセリフを組み合わせるのは、珍しいアイデアでも独自のアイデアでもありません。この場合の目的は、本文と見出しの違いをはっきりさせ区別しやすくするためです。見出しはユーザーが情報を探してページを拾い読みするときの手がかりの役目を果たします。画像とともに、見出しは視覚的に単調になりがちなページを分割する重要な役割を果たしています。ウィキペディアのコンテンツ（本文と議論のページやヘルプの文章、方針等）は長大で節が多いことを考慮すると、これは非常に重要です。

セリフ書体として Linux Libertine、Georgia と Times を指定したのはなぜか

節のタイトルは記事への入り口です。セリフ書体は本文書体と比較したときに視覚的な差別化と特徴をもたらし、ページ全体をすばやく見る利用者の助けになります。セリフは伝統ある雰囲気を伝えることで知られており、私たちのデザインの目標にも合致します。

Linux Libertine は広くは使われていませんが、デザインがよくフリーかつオープンなセリフ体であり、ウィキペディアのロゴにも使われています。そのことから、この書体はウィキメディアのデザイン言語の一部として普遍性があり、見出しに使うのに適切です。Georgia はブラウザーとスクリーンに最適化されたフォントです。Windows、Mac OSX、iOS など、もっとも普及しているプラットフォームの多くで利用可能です。Linux Libertine と Georgia は補完的に働き、 Helvetica・Arial とうまく組み合せができます。Times の設定は、Linux ユーザーに既定でよいセリフ体が見られるようにするためで、Linux には Linux Libertine も Georgia も既定で入っていません。Times を設定すると、ほとんどの Linux では Nimbus Roman No9 L で表示します。

Georgia と Times で問題が起こると報告を受けた言語やアルファベットとは、ロシア語・キリル語、ヘブライ語、アラブ語、ポーランド語、中国語、日本語と韓国語です。

サンセリフ書体を新しく指定したのはなぜか

以前は、本文書体にサンセリフ体のみ指定し、実際にブラウザの既定のサンセリフ体を使うかどうか、ブラウザに依存していました。そのころのほとんどのブラウザはヘルベチカ、Arial、Nimbus Sans Lを除くと、グリフ、ペア、分音記号など小さなサイズの文字を適切にレンダリングできるかどうか、考慮しないフォントを使用していました。また、これらのニーズに対処するフリー/オープンフォントは存在せず、限られた人しか利用できなかったのです（表を参照）。

Mac ユーザー向けに Neue Helvetica を指定し、ヘルベチカをやや進化させ句読点と小文字の高さ（x-height）の処理がより均一になり、場合によってフォントの空白（カウンター）を囲む円弧（ボウル）の丸みが強めです。全体としてヘルベチカのオプション版と言えるものの、すべてのスクリプトに理想的な書体ではありません。

書体は、使用機器やプラットフォームに関わらず一貫性を保ち、ラテン文字・非ラテン文字に関わらず字が小さくてもつぶれず読み取れるレンダリング性能を示すために設定しています。これらの定義を知った上で、関心のあるユーザーの皆さんは検証済みのフリー/オープンフォントをダウンロードするか、もしくはフォールバックした事例を報告するか、ご協力をお願いします。その場合、私から皆さんへ、これらの問題をもう少し体系的に説明できるからです。

過去に試用した、著作権フリーの代替フォントが数種類あります。Arimo、Liberation Sansその他。極言するとこれらのフォントはユーザー全員がインストールしているわけではないこと (したがって無効果)、旧式のOSまたはfont smoothing/hintingではレンダリングが滑らかではないのです。

この書体の組にフリーでないフォントを入れたのはなぜか

書体の組には主流のプラットフォームで提供される Helvetica Neue から Arial まで、いくつかの書体を特定しました。Arial は広く既定として使用されているものの、CSS 劣化を予測可能にするため宣言しています。多くのオペレーティングシステム（Windows、MacOS、iOSなどのOS）には既定で FOSS フォントがインストールされていないことから、どのプラットフォームでも、ユーザーに最高の信頼できるエクスペリエンスを可能な限り提供するため、フリーではないフォントを書体の組に含めることにしました。その一方で、多くのOSは「Helvetica」の代わりに FOSS 書体（例：Nimbus Sans L）を使用しています。

特定のフォントを指定しても、CSS のフォントファミリーの設定は、そのフォントに強く依存「しない」し、ユーザーにそのフォントのダウンロードを強制しない点に、特に注意する必要があります。つまり、指定したフォントはユーザーがすでにそれを持っている場合にのみ表示され、特定のフォントを持っているかどうかにかかわらず Wikimedia のテキストは引き続き表示されます。

ウェブフォントを使うという考えは？

ウェブフォントは、フォントをインストールしていない利用者にそれを配信するシステムです。ウェブフォントにより、利用者のブラウザーに、私たちが提供するフォントのダウンロードを引き起こすため、追加的なリソースの読み込みが生じ、サイトのパフォーマンス (つまりページの読み込み時間) に悪影響を及ぼします。特に、比較的古いブラウザーがこれに該当します。将来的には、私たちはウェブフォントの使用を検討するかもしれませんが、今回の更新では今のところ、ページの読み込み時間を低下させることなく、可読性および一貫性の向上を提供します。

本文の文字色を変更した理由は?

新しい値（#FFFFFF の上に #252525）のコントラスト比は 15.3:1 で、これは WCAG 2.0 1.4.6 によれば AAA レーティングです。本文およびキャプションで白色に対して純黒を用いるのは、いくつかの理由により推奨されません。失読症の利用者は、純白背景上の純黒の文章の並びに対し、その高いコントラストにより、敏感です。これは、文言が互いに回転したりぼやけたりすることにつながります。これを避けるため、明るい灰色のようなわずかに純白でない色を背景に使うか、前景（文章）と背景の間のコントラストを減らします。アクセシビリティの問題がない利用者にとっても、純白の上の純黒という厳しいコントラストは、目の緊張を高める可能性があります。

変更の背景

文字体裁の改新は最初に2012年10月に、4カ月の試用期間を経てモバイル版のウィキメディアの全プロジェクト群に公開しました。このときは本文とキャプションの書体と字間の種類が増えるとともに、書体の組として見出し書体にセリフを、本文書体にサンセリフを宣言しました。

これらの設定はその後、2013年11月にデスクトップ版にベータ機能として導入。 さらにコミュニティのフィードバックに基づき、このベータ版の機能は3回改善を繰り返しています。

フィードバックはどのようにして集めたか

今回の文字体裁の変更のほとんどの部分は最初、2012年10月にモバイル版で試行され、その経験は2013年10月に公開されたデスクトップ用の文字体裁ベータ版機能に取り込まれ、その後3回のメジャーリリースを重ねました。ベータ版機能としての期間、上位10のウィキペディア言語版で1万4000人以上がこの機能を利用し、トークページでは議論スレッドが100件以上立ち上げられました。

既定の書体の変更を解除できるか

可能です。ウィキメディアのサイト群のログイン利用者であれば、個人の CSS をカスタマイズし（例：ウィキごとのSpecial:MyPage/vector.css）既定の書体の変更を一部またはすべてオーバーライドできます。変更を回避するためだけに CSS を覚えたくなければ、個人の CSS にUser:Ekips39/typographyrefreshoverride.cssをコピーしてください。もちろん個人設定の「表示」タブで外装ごとまったく別のものに変更することもできます。使用するブラウザーの既定のフォントを「セリフ」と「サンスセリフ」体に定義でき、システムにこれらの特定のフォントがない場合には代わりに、ブラウザの環境設定が使用されることも同様に重要です。

ブラウザーとOSの種類は十分に多く試したか

はい。新しい書体の組は以下の OS で試されました: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8～9, iOS 6 および 7, Android, Chrome OS。サイズ、行間、グリフ、ヒンティング、フォント レンダリングは Windows, Ubuntu Linux, Mac OS X 10.8, Android, Chrome OS で試されました。

非英語プロジェクトにはどのように適用されるか

既定では、文字体裁の改新は（Vector外装の一部として）全プロジェクトに適用されます。特定の文字種に対応するために一部の書式を上書きしなければならない言語もあるかもしれません。たとえば、一部の文字体系では高い行高や大きな文字サイズが必要かもしれません。各ウィキは MediaWiki:Vector.css ページを編集することでこうした特定の書式を上書きできます。非英語プロジェクトでは、この更新で導入される変更をよく調べ、文字種に応じて必要な部分のCSSだけを上書きするようおすすめします。

他言語のプロジェクトでの既知の問題もご覧ください。

非ラテン文字について

非ラテン文字の文字サイズは以前は 0.8em (12.8px)でした。これではグリフや上付き文字が潰れ、小さすぎて読みにくくなります。検証された文字体系はウルドゥー語、マラーティー語、マレー語、中国語、韓国語、ナヴァホ語です。本文の文字サイズを大きくすると、ほとんどの文字で可読性が改善されます。特にナヴァホ語では、Helveticaで文字が変に組み合わされるため、上書き設定が提供されます。

言語に応じて必要な場合にだけ上書きができるようにするための、インラインのCSSのガイドを提供することは可能です。非ラテン文字を主にお使いで大きな問題があった場合は、トークページにご意見をお寄せください。

新しい文字体裁の影響を計るためにA/Bテストや仮説検定など試験を行ったか ?

いいえ。

私たちはしばしば、新機能を最初にコントロールされた実験で立ち上げて、性能を客観的に測定し、可能性のあるプラスのインパクトについて立てた仮説を試験します。最も一般的な方式（コントロール下のA/Bテストまたは仮説検定）では、ランダムに選択した読者や編集者のサンプルの半数にのみ、新しいバージョンを与え、残り半分には与えずに比較します。このときウィキメディア財団の科学者からは、A/Bテストやその他の制御実験の実施を控えるよう助言を受けました。書式体裁のマイナーな変更だけでは、サイト滞在時間、ビジター1人あたりのページビュー数など、有意に測定できる閲覧関連のメトリクスに大きな影響を与える可能性は高くありません。

ウィキメディアのサイトの信頼向上や閲覧の理解など関連する目標は、量的に最も把握しやすい種類のデータではなく、またページの内容や件名、あるいは、たとえばトークページや記事などよく閲覧されるページの種類かどうかという、無関係な要素に大きく左右されがちです。

新しい書体を使うとウィキペディアの動きが遅くなる?

いいえ。通常、新しい機能がサイトパフォーマンスに及ぼす影響、つまりページの読み込みにかかる時間が伸びるかどうか測定しています。この新機能の場合は、ページを表示するためにユーザーがダウンロードする必要のあるリソースは増えず、パフォーマンスの変化はごくわずかです。

脚注

コードへのリンク

ベクター（外装）の LESS で記述されたスタイルの変数

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• 加えて、 ja:MediaWiki:Vector.css や ja:MediaWiki:Common.css など各言語版ウィキのファイルを参照

関連ページ

• https://blog.wikimedia.org/2014/03/27/typography-refresh/