文字体裁の更新

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Typography refresh and the translation is 74% complete.

Outdated translations are marked like this.
Other languages:
azərbaycanca • ‎български • ‎català • ‎Deutsch • ‎Zazaki • ‎English • ‎español • ‎suomi • ‎français • ‎galego • ‎Հայերեն • ‎italiano • ‎日本語 • ‎한국어 • ‎Kurdî • ‎मराठी • ‎Nederlands • ‎Plautdietsch • ‎polski • ‎پښتو • ‎português • ‎português do Brasil • ‎русский • ‎sicilianu • ‎svenska • ‎Tiếng Việt • ‎中文
(上) OSX上での古い文字体裁
(下) OSX上での新しい文字体裁
Ubuntu/Firefoxでの古い文字体裁 (上)と新しい文字体裁 (下)

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

変更点の要約[edit]

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

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

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

新しい書体仕様
設定されたフォントファミリーは次のとおりです。見出しスタイルは "Linux Libertine, Georgia, Times, serif" に設定されています。本文ははじめ "Helvetica Neue, Helvetica, Arial, sans-serif" に設定されていましたが、非ラテン言語ウィキで問題が発生したため、より良い解決策が見つかるまでの措置として "sans-serif" に差し戻しました。
注意:ただし、必ずしも上に示されたいずれかの書体で表示されるわけではありません。どちらかといえば、ブラウザーとオペレーティングシステムは、上記のリストに示されているもののうち、インストールされているフォントの最初のものか「マッチング」ルールに合うものを探し、それを使用します[1][2]
見出し、ボディーコピー、行送りについての新しい間隔と大きさ
現在の文章の幅で、見出しははっきりと目立ち、行送り(行間の余白)は目を疲れさせず読みやすくするために十分に広い必要があります。見出しは現在以下のように設定されます: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 に設定されています。これは、長く続いていた、見出しに影響を与える参照番号についての問題を解決するためです[3]
新しい本文の文字色
16進トリプレットで表記すると、ボディーコピーの色は、「背景色 #FFFFFF、文字色 #000000」から、現在は「背景色 #FFFFFF、文字色 #252525」に設定されています。技術用語を使わなければ、これは、色が「真っ白の背景に真っ黒の文字」から「真っ白の背景にとても暗い(黒に近い)灰色の文字」に変更されたという意味です。(リンク、見出し、その他の要素の色は変更されていません。)

よくある質問[edit]

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

変更を受けるのは誰か[edit]

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

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

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

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

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

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

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

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

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

Why is the type size and leading increased?[edit]

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.

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

セリフとサンセリフを組み合わせるのは、珍しいアイデアでも独自のアイデアでもありません[4][5]。We do so in this case to provide better contrast and distinction between body and headings. Headings act as entry points when users are scanning a page, looking for information. Both headings and images play an important role in breaking up the visual monotony of the page, which is of critical importance considering that much of Wikimedia content (content pages, discussion pages, help text, policies, etc.) are quite lengthy and have many sections.

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

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

Linux Libertine は広くは使われていませんが、デザインがよくフリーかつオープンなセリフ書体であり、ウィキペディアのロゴにも使われています。これによりこの書体はウィキメディアのデザイン言語の一部として普遍性があり、見出しに使うのに適切なものになっています。 Georgia はブラウザーとスクリーンに最適化されたフォントです。Windows, Mac OSX, iOS など、私たちのあいだで人気あるプラットフォームの多くで利用可能です。Linux Libertine と Georgia は補完的に働き、 HelveticaArial とうまく組み合せられます. 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.

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

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.[6]

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.

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

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 that 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. Meanwhile many operating systems will use a FOSS font (such as Nimbus Sans L) in place of "Helvetica".

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.

ウェブフォントを使うという考えは?[edit]

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

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

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

How did this change happen?[edit]

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.[8] This beta feature then went through three major iterations based on community feedback.

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

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

デフォルト書体の変更を解除できるか[edit]

Yes. It is possible for logged-in users of Wikimedia sites to customize their personal CSS (i.e. Special:MyPage/vector.css on each wiki) to override some or all of the changes. You can copy User:Ekips39/typographyrefreshoverride.css into your personal CSS if you don't want to learn CSS in order to opt out of the changes. You may also of course choose to switch to another skin entirely, in your Preferences under the Appearance tab. Last but not least, you can 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の種類は十分に多く試したか[edit]

はい。新しい書体の組は以下の 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 で試されました。

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

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

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

非ラテン文字について[edit]

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

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

Did you run any controlled experiments e.g. A/B or split tests to measure impact of the new typography?[edit]

いいえ。

We often first launch new features in controlled experiments, to objectively measure their performance and test hypotheses about positive impact they might have. In the most common version (an A/B or split test) we randomly select a sample of readers or editors, give half the new version, and give half no new experience. In this case, Foundation research scientists advised against running any A/B tests or other controlled experiments. It is unlikely that minor typography changes alone would make a large impact on reading-related metrics like time on site, number of page views per visitor etc., which could be measured with confidence.

Related goals, like enhanced trust in Wikimedia sites or comprehension in reading, are not the kind of data we can best learn about on a quantitative basis, or which are also largely impacted by unrelated factors like the page content and subject, what type of page is being read (Talk versus articles, for example), and more.

Can using these new fonts cause Wikipedia to be slower for me?[edit]

No. We typically measure the site performance impact of a new feature, meaning whether it makes pages take longer to load. In this case, we are not adding to the list of resources that a user must download to view a page, so any change in performance will be negligible.

脚注[edit]

  1. Fonts, W3C
  2. font-family, Mozilla Developer Network
  3. bugzilla:49965
  4. Best Practices of Combining Typefaces
  5. "Sans serif and serif typefaces can be effectively combined if changes are limited to prevent visual chaos. The key is to ensure that the result respects the content and reinforces the information hierarchy and overall design goals." (サンセリフとセリフの書体は、視覚的混乱を招かないように限定的なものにとどめればば、効果的に組み合わせることができます。内容を尊重し、情報階層およびデザイン全体の目標を補強するような結果にすることが重要です。) Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies, and Emerging Applications, Third Edition
  6. Helvetica: Old and Neue
  7. Web Content Accessibility Guidelines (WCAG) 2.0
  8. https://blog.wikimedia.org/2013/11/07/introducing-beta-features/

コードへのリンク[edit]

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

関連ページ[edit]