Typography refresh/ja

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

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

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

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


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


 * 見出し、文章の本文、行送りの新しい間隔と大きさ: 現在の文章の幅で、見出しははっきりと目立ち、行送り（行間の余白）は目を疲れさせず読みやすくするために十分に広い必要があります. 見出しは現在以下のように設定されます：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進トリプレットで表記すると、本文の色は、「背景色 、文字色  」から、現在は「背景色  、文字色  」に設定されています. 技術用語を使わなければ、これは、色が「真っ白の背景に真っ黒の文字」から「真っ白の背景にとても暗い（黒に近い）灰色の文字」に変更されたという意味です. (リンク、見出し、その他の要素の色は変更されていません. )

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

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

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

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

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

あらゆる文字体系での可読性の要求を満たす完璧な書体はあるのか、今のこれがそうなのか
いいえ、次のすべてを実現する完璧な書体はありません. 私たちは与えられた制約のなかでこうした要求事項をできるだけよく達成するよう、実践的な決断をしなければなりません. 数百万人以上の読者が毎日異なるデバイスでウィキペディアを読んでいます. 現在選ばれている書体は様々なプラットフォームで可読性と一貫性を改善します.
 * 1) 遍在：すなわち、すべての人気のあるデスクトップ・モバイルオペレーティングシステムにおいて利用可能であること.
 * 2) グリフと区分符号の適切なレンダリング：何百もの非ラテン文字についても、文字対のカーニングが良いこと. 利用者が文字を読むために目を細める必要がなくなります.
 * 3) 相応なエックスハイト：左部ナビゲーション、キャプション、利用規約等二次情報について、小さな大きさの文字が読みやすくなります.
 * 4) ヒンティング：特に Windows における、小さな大きさの文字の滲みの回避.

号数と字間が大きくなった理由は?
This is a small, conservative change. The previous type size was unreadable to many users. We found through user feedback that text zooming was used extensively to make the text more readable for those with even basic vision issues or impairments. Since we endeavor to make the information accessible to all users, this change felt like a basic requirement for any improvement in this area. Along with the type size the leading has also been increased to 21px leading, following typographic standards for leading i.e 120% of the type size. This helps readers who go past the introduction and read long paragraphs.

The body copy is the focus of pages on Wikimedia projects. For most language projects the text size is small and dense with our current measure. The lack of airiness lends some efficiency but creates eye fatigue with extended reading. Also, under 14px is not recommended for non-Latin scripts. Words carry superscripts and glyphs which tend to get squashed and cannot be deciphered without squinting.

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

セリフ書体として 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 になります.

Languages and scripts for which problems have been reported with Georgia or Times include Russian/Cyrillic, Hebrew, Arab, Polish, Chinese, Japanese and Korean.

サンセリフ書体を新しく指定したのはなぜか
The previous state of our body content is that only "sans-serif" was specified, leaving it up to the browser to use its default sans-serif. With the exception of Helvetica, Arial and Nimbus Sans L, the fonts that most browsers use in this condition do not account for proper rendering of glyphs, pairs, and diacritical marks at small sizes. There is no free/open font that addresses this need and is ubiquitously available (see table).

We specify Neue Helvetica for Mac users, as it is a slightly more developed version of Helvetica where punctuation has been improved, the x-height is slightly more consistent, and in some cases it has more rounded bowls and counters. Overall it is an optimization of Helvetica, though it may not be as ideal in all scripts.

We specify fonts both to achieve consistency across devices and platforms and to guarantee appropriate readability and rendering at small sizes for Latin and non-Latin scripts alike. With the specifications in place, users who are interested can download the free/open fonts that have been tested or report issues to us for the fallback cases, which will allow us to address issues in a more systematic manner.

In the past, we experimented with several alternative fonts that were freely-licensed, including: Arimo, Liberation Sans, and others. Ultimately these fonts are either not commonly installed by users (creating no effect) or they render poorly on older systems or those without font smoothing/hinting.

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

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

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

本文の文字色を変更した理由は?
新しい値（ の上に  ）のコントラスト比は 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で記述されたスタイルの変数:
 * 加えて、 ja:MediaWiki:Vector.css や ja:MediaWiki:Common.css など各言語版ウィキのファイルを参照
 * 加えて、 ja:MediaWiki:Vector.css や ja:MediaWiki:Common.css など各言語版ウィキのファイルを参照
 * 加えて、 ja:MediaWiki:Vector.css や ja:MediaWiki:Common.css など各言語版ウィキのファイルを参照

関連ページ

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