書体に関する助言のほとんどは、散文のために書かれています——ゆったりと読まれる、小文字の長い行のために。高パフォーマンスなアプリケーションは別の体制で生きています。列で走査される数値、一目で一度だけ読まれる識別子、誰かが8時間見つめ続ける画面の11ピクセルのラベル。エッセイでは美しい書体が、トレーディング画面では積極的に危険でありえます。代わりに問いただすべきことを挙げます。
まず数字、文字はその次
データ密度の高いインターフェースでは、仕事の大半をこなすのは数字です。だから何よりも先に数字を検分してください。
- 等幅数字(タビュラー数字)は絶対条件です。 すべての数字が同じ幅であれば、列が崩れず、刻々と変わる値が隣の桁を揺らしません。CSSは1行——
font-variant-numeric: tabular-nums lining-nums——ですが、それは書体がその機能を持っている場合の話です。流行の書体の多くは持っていません。 - オールドスタイルではなくライニング数字を。 アセンダーとディセンダーを持つオールドスタイル数字は、散文では美しく、表では混沌です。
- ウエイトをまたいで幅が安定していること。 ボールドの数字がレギュラーより幅広だと、強調したセルがことごとく列を壊します。優れたインターフェース書体は、すべてのウエイトを同じ幅で設計しています——そしてバリアブルフォントのグレード軸(幅を変えないウエイト変化)は、その最も綺麗な解決策です。Universal Webのバリアブルフォントの章で扱っているとおりです。
インターフェースのアルファベット
インターフェースは、ちょうど一度だけ正しく読まれなければならない文字列で満ちています。注文ID、gitのハッシュ、APIキー、金額。それらにとっては、紛らわしい文字の集合こそがすべてです——0/O、1/l/I、5/S、8/B。標本ページを1枚でも眺める前に、本番のサイズでこれらをテストしてください。合格する書体は、それを堂々と掲げている傾向があります。スラッシュ付きやドット付きのゼロ、尾のあるエル、開いたアパーチュア。これはUniversal Webがロービジョンの読者のために展開しているのと同じ、文字の解剖学に基づく判読性の議論です——11pxのインターフェースは、すべてのユーザーを低視力の条件に置くのです。
チェックリスト
候補の書体をアプリケーションに載せる前に、私が実際に通している関門です。
1. 本物の表を組む——実データで、tabular-numsを有効にして——値が変動するのを見守ります。動いてよいのは数字だけです。
2. アルファベットテスト:0O 1lI 5S 8B rn/mを本番の最小サイズで、両方のテーマで確認します。
3. 11〜13pxでのエックスハイト。 エックスハイトの小さい書体は、まさにインターフェースが生きるサイズで崩壊します。ゆとりあるエックスハイトは、実効サイズをタダで稼いでくれます。
4. ダークテーマでのウエイト。 暗地に明るい文字は、半ウエイトぶん太って見えます。補正のためのグレード軸や細めのカットが書体になければ、すべてのラベルがぼやけます。(ダークモードの章がその物理を説明しています。)
5. 機能のgrep:tnum、lnum、zero、case——マーケティングページが匂わせる機能ではなく、実際に搭載されているOpenType機能を確認します。
6. パフォーマンス上の重量級か軽量級か。 これらすべてが、ラベル付けする対象のデータを堰き止めない程度に小さい、1〜2個のWOFF2ファイルで届かなければなりません——これは次のエッセイの主題です。
このチェックリストに流れるパターンは、この分野全体のパターンでもあります。アプリケーションにおいて、タイポグラフィは標本1枚あたりの美しさではなく、1ピクセルあたりに防がれたエラーの数で測られます。1万回連続で読まれても気づかれることに失敗し続ける書体を、選んでください。