Typography refresh/ja

この文書は、ウィキメディアプロジェクト群とMediaWikiソフトウェアパッケージの「Vector」外装の文字体裁に関して最近行われた更新についての説明です. 注意：この変更はまだ MediaWiki コア に入っていません. この文書が基準とする現在時点は 2014-03-14 の時点では未来です.

変更点の要約
We approached this update to Wikimedia's default typography with the following requirements in mind:

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


 * New font specifications: We have set the following font families: heading styles have been set to "Linux Libertine, Georgia, Times, serif". Body copy (the main text of pages) has been set to "Arimo, Liberation Sans, Helvetica Neue, Helvetica, Arial, sans-serif".


 * Note that these lists do not mean you will receive all of these fonts. Rather, your browser and operating system will look for the first font in the list that you have installed, and will present that.


 * New spacing and sizing for headings, body copy, and leading: With the current text width, headings need to clearly stand out and the leading (whitespace between lines) needs to be sufficient to enable readability without creating eye fatigue. Headings will now be set to the following: H1 (page titles) will be 2em/1.8em, H2 (main section headings) will be 1.6/1.4em. H3 will be 1.4/1.2em, H4 1.2/1em, H5 1/1em. The body copy has been increased to 0.875em (from 0.8em) with 1.6em (from 1.5em) leading to create more airiness. Depending on your browser and operating system, this will translate to slightly different pixel values, but overall results in a slightly larger body font size. The superscript (sup) line-height is now set to 0, to fix a long-standing problem with reference numbers affecting the leading.


 * New body font color: In hex triplets, the body copy color is now set to  on , from   on  . In less technical terms, this means the color has changed from pure black text on a pure white background, to very dark grey text on pure white background. (Colors for links, headings, and other elements have not changed.)


 * Pre-formatted content: Long  content will have a horizontal scrollbar, instead of causing the entire page to become horizontally scrollable.

よくある質問
The following are answers to some key questions about this change.

変更を受けるのは誰か
All users of Wikimedia sites who use the default Vector skin, including readers and editors. Users who use their preferences or another method to use an alternative skin, like Monobook or Cologne Blue, will see no changes.

Please note that users who have customized their personal CSS, or who are on a site where local administrators have altered site-wide CSS, may notice discrepancies with the new defaults. Please check this summary and FAQ to see if a particular design element should be attributed to this change.

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

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

あらゆる文字体系での可読性の要求を満たす完璧な書体はあるのか、今のこれがそうなのか
次のすべてを実現する完璧な書体はありません. 私たちは与えられた制約のなかでこうした要求事項をできるだけよく達成するよう、実践的な決断をしなければなりません. 数百万人以上の読者が毎日異なるデバイスでウィキペディアを読んでいます. 現在選ばれている書体は様々なプラットフォームで可読性と一貫性を改善します.
 * 1) あらゆる場所で使える：よく使われるうちのすべてのデスクトップとモバイルのOSで利用可能な書体
 * 2) 何百という非ラテン文字でグリフ差と補助符号が正しく描画され、隣接する文字間の良好なカーニングが提供される. これは目を細めて文字を確認しなくてすむようにするために必要です.
 * 3) Respectable x-height: so type is legible at small sizes for things like left navigation, captions, terms of service or secondary information.
 * 4) ヒンティング：特に Windows で、文字サイズが小さいときににじまないようにする

Why is the type size and leading increased?
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 を指定したのはなぜか
Section titles are entry points into the article. A serif font provides visual differentiation and character compared to the body copy, which helps a user scan the page. Serif are also well-known for conveying a traditional demeanor that is in keeping with our design goals.

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

Why did we specify new sans-serif fonts?
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, 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).

Of all the free/open options, the closely-related fonts of Liberation Sans and Arimo had the best display characteristics (strong x-height and works well for readability at all sizes). The letterforms closely resemble Helvetica and Arial so it provides for a consistent experience. Arimo had the best technical compliance (accurate rendering of obscure Unicode features), but is only installed by default in ChromeOS. Liberation Sans has a respectable amount of ubiquity and it is produced by Red Hat who can help us with addressing rendering issues. We specified 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.

Why did we include non-free fonts in the font stack?
The stack specified a range of fonts from Helvetica Neue to Arial that are available across all major platforms. Even though Arial is widely used as a default, we need to specify it so there the CSS degradation is predictable. To ensure a reliable experience to users across platforms as best as we can, we decided to include non-free fonts in the stack since many operating systems (such as Windows, MacOS, and iOS) do not have any FOSS fonts installed by default.

It is particularly important to note that, because of the way CSS font-family settings work, specifying a particular font does not create a hard dependency on that font, nor does it cause the user to download that font. This means that fonts we specify only appear if the user has them already, and Wikimedia text will continue to appear regardless of whether you have a particular font or not.

What about using webfonts?
Webfonts is a system to deliver a font to users who do not have it installed. This involves having a user's browser download a font we provide, which causes additional resources to load and would have a negative impact on site performance (i.e. how fast pages load). This is particularly true for older browsers. In the future we may explore using webfonts, but for now this update provides greater readability and consistency while not degrading page load times.

本文の文字色を変更した理由は?
The new values ( on  ) have a contrast ratio of 15.3:1, which is a AAA rating according to WCAG 2.0 1.4.6. Pure black for both body copy and captions is not recommended against white for several reasons. Dyslexic users are sensitive to the juxtaposition of pure black text on a pure white background due to its high contrast. This can cause the words to swirl or blur together. To avoid this, use a slightly off-white color for your background, like a light gray, or decrease the contrast between foreground (text) and background. For users without accessibility issues, the harsh contrast of pure black on pure white can increase eye strain as well.

How did this change happen?
This typography update was first tested for four months, and then released on mobile web for all Wikimedia projects in October 2012. These included font stack declarations for serif headings and sans serif body copy, as well as increased type size and leading for body copy and captions.

These changes were later brought into desktop as a beta feature, starting in November 2013. This beta feature then went through three major iterations based on community feedback.

How did we get feedback?
Many of the typography changes were first tested on mobile in October 2012, much of the learning was integrated into the typography beta feature for desktop which was launched October 2013 and went through three major releases. During the time the beta feaure was used by over 14,000 users across the top 10 Wikipedias, and more than 100 discussion threads were created on the feature's Talk page.

デフォルト書体の変更を解除できるか
Yes. It is possible for logged-in users of Wikimedia sites to customize their personal CSS (i.e. Special:MyPage/common.css or Special:MyPage/vector.css on each wiki) to override some or all of the changes. You can also define the default font your browser uses to display “serif” and “sans-serif” fonts, if your system does not have any of these specified fonts this browser preference will be used instead.

ブラウザーとOSの種類は十分に多く試したか
はい. 新しい書体の組は次のOSで試されました：Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OSX 10.8, iOS 6 および 7, Android, Chrome OS. サイズ、行間、グリフ、ヒンティング、フォントレンダリングは Windows, Ubuntu Linux, Mac OS 10.8, Android, ChromeOS で試されました.

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

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

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

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

コードへのリンク

 * Old/Current:
 * (mediawiki/core.git) / skins / vector / variables.less
 * (mediawiki/core.git) / skins / vector / components / common.less
 * Plus local wiki files such as en:MediaWiki:Vector.css and en:MediaWiki:Common.css


 * New/Typography refresh:
 * (mediawiki/extensions/VectorBeta.git) / less / variables-beta.less
 * (mediawiki/extensions/VectorBeta.git) / less / screen-beta.less
 * (mediawiki/extensions/VectorBeta.git) / less / styles.less
 * Plus local wiki files, as above.


 * (注: トークページのコメントに基づき、ToC/Blockquote/Thumbnail/ext-link-icon 要素は、今後数日のうちに除去されるため、これらを無視してください. )