非常に限られたスペースのフォントをどのように選択しますか？つまり、最も読みやすいテキストを最小のスペースに収めますか？
ユーザー向けのレポートとダッシュボードを作成するとき、スペースが非常に限られることがよくあります。私は通常、ArialまたはArial Narrowを使用していますが、UIは私の専門分野ではないので、最も読みやすいテキストを最小のスペースに収めるための最適なフォントをどのように決定しますか？
ここに例を示します。100万列をレポートに詰め込む必要がある場合など、スペースが限られていることが多いため、これは単なる例です。
それは実際にあなたが期待する 特定の文字の頻度 とは何か、そしてどのフォントが利用可能であるかなど、多くの要因に依存します。
当時、Windowsボックスにインストールしていたすべての使用可能なフォントを反復処理して、印刷可能な各ASCII文字を含む行をこれらの各フォントの画面に印刷するプログラムを作成して、基本的なことを行いました。フォントサイズを変えてテストを繰り返しました。
私が思い出した結果は、10-ptと9ptのサイズでのUIのスペース使用率と読みやすさの点で Segoe UI と Tahoma が最高でした。 Segoe UIはWindows Vista未満のオペレーティングシステムでは自由に利用できないため、短期的にはTahomaを採用しました。 Windowsをサポートする必要がない場合XPまたはそれ以前のWindows OSまたはその他の非Windows OSの場合、間違いなくSegoe UIを使用します。それ以外の場合は、Tahomaを使用できます。それ以外の場合は、Verdanaを試してみてください。利用可能なWindowsフォントのラインナップと、それぞれの最適な使用法については、 このリスト を参照してください。
また、Windows Vista以降では、UI要素に10ptフォントではなく9ptフォントを使用することをお勧めします。これは、Sego UIフォントが、特にフラットパネルディスプレイで、低解像度で他のフォントよりもはっきりと表示されるためです。
開発するプラットフォームによっては、可能であればフォントメトリックの変更を確認することもできます。 WPFを使用した.NETでは、テキストのレンダリング方法を変更して、文字間のスペースを圧縮し、個々の文字をより狭くする方法がかなりあることを思い出しました。このタイプのテクニックを使用すると、好きなフォントを使い続けることができ、レンダリングを微調整するだけで、必要な結果を得ることができます。
あなたが提供したあなたの特定の例のグラフに関して：この特定のグラフについて、私はそれをピボットすることをお勧めします。また、棒グラフの各棒の内側にあるように番号を配置し、背景色とは異なる色で目立つようにして、ラベルなどの他のスペースを増やします。棒グラフを行としてレイアウトすると、読みやすくなり、必要に応じて複数のページに印刷することも簡単になります。行のレイアウトが不可能な場合は、グラフの各項目に個別のキーを作成するのがおそらく妥当であり、そのようにすると、スペースを節約するために各棒を互いに近づけて配置することができます。キーを使用すると、各バーにA、B、C ...または01、02、03 ...などのラベルを付けることができ、キー（別の場所に行に配置）を使用すると、それぞれについてより詳細な情報が得られます。
グラフや図は、主にすばやく視覚的な情報を取得するのに役立ちます。ユーザー/リーダーにとって負担が大きすぎる場合は、単純化するか、グラフの詳細の一部を統合するか、またはより多くの生データをより表形式で提供することをお勧めします。
これは、さまざまなサイズのArial、Segoe UI、およびTahomaフォントを示す簡単なリストです。各フォントが占める相対スペースは、ポイントサイズによって異なります。 
更新：以下の別の比較を追加しました。これにより、前述の各フォントの大文字と小文字を含む一般的な文字のより完全なリストが表示されます。 VerdanaとMS Sans Serif（Windows 2000より前のWindowsのデフォルトのUIフォント）の追加。残念ながら、ボダプのVerdanaの使用に関する推奨事項に応えて、Verdanaが他のフォントと比較して9ptで最悪であることは明らかですが、これは他のポイントサイズには当てはまらない場合があることに注意してください。また、サイズは必ずしも最も重要な詳細であるとは限りません。場合によっては、フォントが他のフォントに比べてコンパクトであるかどうかよりも、フォントが小さいサイズで読みやすいことが重要な場合があります。
あなたはそれを間違っています。
一般的に、「別の方法」があります。この質問への答えはすべて素晴らしいですが、正直なところ、すべての異なるオプションを確認する必要があります。できるだけ少ないスペースでできるだけ多くのテキストを圧縮alwaysは、以前のデザインの選択を台無しにしたことを意味します。
- おそらく、それらを水平バーにして、作業するためのより多くのスペースを与える必要があります。
- おそらく、棒グラフを使用したり、最初にグラフを使用したりすべきではありません。
- おそらく問題は実際のデータであり、さらにそれを分割する必要があったかもしれません！
- サイドバーまたは凡例/インデックスが役立つ可能性があります
- Hoversはオンラインバージョンで動作する可能性があります
非常に多くのオプションがあります。正しいものを使用してください。できるだけ多くの情報を1つの小さな領域に詰め込むことは常に間違った方法です。情報には、呼吸し、読みやすく、スキャンして認識できるスペースが必要です。
はい、これは一般的にはるかに多くのスペースを使用することを意味します。しかし、それは悪いことではありません。データを利用する人にとっては、1ページのレポートで1つのバーが何を意味するのかを理解するよりも、構造化された情報で満たされた2、3ページをすばやくスキャンするほうが簡単です。彼の隣の人に紙を渡しながら彼の老眼鏡をポケットに入れている古い理事会メンバーについて考えてください：「私はこれを読むことができません-それは何を言いますか？」
過酷さとほんの少しの口先だけのタイトルの謝罪ですが、私はそのトップの答えを見て、「別のアプローチが必要」の部分にはさらに工夫が必要だと感じています。
。edit：
これは非常に論争の多い回答であり、元の質問とかなり矛盾しているので、投稿の背後にある理由について詳しく説明する必要があると思います。
まず、これはUXの問題ではなく、グラフィックデザインやタイポグラフィの問題です。
この質問には仮定があります。最大の問題は、このUXの問題に対する「正しい解決策」は小さなテキストであるということです。しかし、そうではありません。小さなテキストは判読できなくなり、タブレットやその他のモバイルデバイスによって問題が悪化します。ユーザーの視力が悪い場合はどうなりますか？古い、低解像度のモニターに表示された場合はどうなりますか？太陽や光からのまぶしさがある場合はどうなりますか？小さなテキストが判読できない理由はたくさんあります。
そのため、この答えは、この問題を抱えている次の人が同じ間違いをしないように注意するためにここにあります。
...言ったこと-私は質問をする人がフォント変更以外のリソースを持っていないことを完全に感謝します:)私たちは皆そこにいました、そして私たちはみんな再びそこにいます！
TLDR：この質問は、ヘンリーフォードがより高速な馬の呼びかけを処理した方法で処理しました。 （免責事項：私はヘンリーフォードではありません）
Coda
時々、小さいフォントは狭い場所から抜け出すのに良い方法です。この特定のケースでは、少なくとも示されている問題の部分について、より明確であり、スペースの半分を占める、次のようなより良い解決策があります。
私は十分な大きさのフォント、18pt Tahoma（フルサイズを表示するには新しいタブで画像を開く）を使用していますが、負の文字スペースは問題ありません。
Retinaディスプレイのようなものではなく、従来のディスプレイ（〜96 DPI）での画面上の使用について言及し、サブピクセルアンチエイリアシングを備えたシステムがあると仮定すると、探しているのはフォントです。素晴らしいピクセル hinting ヒントとは、印刷用に設計されたベクトル曲線を利用し、さまざまなポイントサイズに合わせてその形状をカスタマイズする技術です。通常、書体の主要部分をピクセルグリッドに合わせます。それは、堅固で容赦のないピクセルグリッドを使用して、フォント（必要に応じてその文字）の外観を妥協することです。ピクセルグリッドが提供するピクセル数が連続的に少ないため、これらの妥協案は、小さいほど深刻になります。
多くのフォントは、コンピューター画面で使用するために明示的に設計されています（一般に screen fonts と呼ばれます）。マシューカーターの書体セット。 Verdana、Tahoma、Georgiaet alは素晴らしい例です。ピクセルグリッドを念頭に置いて、最初から設計されました。これにより、小さいサイズでの使用が本質的に適切になります（ただし、通常、印刷では少し見栄えが悪くなります）。
一般に、小さいポイントサイズ（ポイントサイズはの高さを参照）で、Verdanaが推奨されます非常に高い- x-height広いopen countersを提供します。これにより、他の一部のフォントよりも幅が広くなります。これは、（例に基づいて）探しているフォントではありません。
Segoe UI、TahomaおよびMS Sans Serifのようなフォントはすべて、多用途のスクリーンフォントとして設計されています（Windows Vista/7、Windowsのデフォルトの書体です） XPおよび以前のバージョンのWindowsのそれぞれ）、これらはすべての点で優れた選択肢です（セゴエUIはサブピクセルのヒントを考慮して設計された唯一の選択肢であり、最新の選択肢です）。 。
フォントを選択するときに考慮すべき2つの要素があります。タイプを垂直方向に実行している場合、サブピクセルのアンチエイリアスは自然に異なり、一般にピクセルヒンティングは少し悪く見え始めます（タイプデザイナーは顔を垂直方向にテストしていない可能性が高いため）。フォントを斜めに実行している場合、またはピクセルグリッド上にない場合は、すべてのピクセルヒンティングがウィンドウからスローされます。
ピクセルのヒンティング、ラスタライズなどの詳細については、 この驚くべきサイト よりも優れたリファレンスはありません。
興味がある場合は、非常に小さいタイプの印刷の選択について1つまたは2つの段落を追加しますが、これ以上追加できるものはありません この驚くほど良い記事 。
最適化しようとしているディメンションを指定することが重要です。サイズを水平方向（短い線）または垂直方向にも縮小しますか？水平方向の幅を最適化する場合は、圧縮された書体を探す必要があります。 Arial NarrowとHelvetica Condensedは2つの明白なオプションですが、私はそれらを非常に読みやすいとは言えず、安っぽく見えるようになっています。
Arial/Helveticaに似ているがより狭いサンセリフについては、以下をご覧ください。
Myriad Pro、Open Sans、Segoe UI、Tahoma、Frutiger、Bell Gothic、Lato、Antique Olive、Adobeの新しいフォントSource Sans Pro。
私が数値で行った比較では、Myriad Pro、Source Sans Pro、Segoe UI、およびTahomaが最小幅が9px-11pxの読みやすさのために最高であることがわかりました。これらのフォントはサイズの扱いが非常に異なるため、公正な比較を行うためにサイズオフセットを組み込む必要があることに注意してください。
ラトもうまくいきます。 AsanaはProxima Novaを使用しています。ProximaNovaは非常にオープンで、小さいサイズでも読みやすいですが、大きいサイズでは見た目が良くありません。
これが私がすべてを10pxで行った比較です。ただし、フォントサイズを変更すると、これらの小さいサイズでは非線形効果が生じることが多いため、このように自分で試してみるのが最善です。
他の人はVerdanaに言及しています。 Verdanaは小さいサイズで非常に読みやすいですが、幅を最適化しません。とは言っても、小さいサイズで読めるワイドタイプフェースは、幅ではなく高さを最適化します。おそらくこれが目的ですが、垂直方向にスクロールする方が水平方向にスクロールするよりも自然なWebでは、通常はそうではありません。 。
私の個人的な好みは、画面上のArialです。よりニュートラルでない外観を探している場合、または幅を最適化する必要がある場合は、Source Sans ProまたはSegoe UIを見ることができます。
私は常にSegoe UIを愛してきましたが、最近、Arialが実際に多くの場合より読みやすい（息切れ）であることを認めざるを得なくなりました。信じられないのであれば、数値データでいっぱいのグリッドで12px Arialと12px Segoe UIを比較してください。 Arialが輝いているようです。元の回答に示されているサンプルテキストでも、Arialが読みやすいことがはっきりとわかります。醜いですが、もっと読みやすいです。これの多くは、サイズのわずかな違いです。
さらに... Segoeを13px以上にすると、数字は本当に奇妙に見え始めます。最終的に、ほとんどのアプリケーションはデータによって駆動されます。データでいっぱいのグリッドを作成します。 2つを切り替えて、読みやすい方に質問してください。うーん.
11pxでストレートテキスト（数字なし）を読んでいる場合は、セゴエの方が読みやすいと思います。でも、セゴエUIは、Arialよりも読みやすいフォントだと判断した方はどなたでも、このデータをどこで入手したかを確認したいと思います。私は数人に尋ねましたが、誰もがArialは12px（9pt）のデータの方が読みやすいと思っています（私も含めて）。
フォントの色に関しても、フォントに関連する多くの問題があります。 Segoeはやや軽量で最高に見えます...（＃333333または＃212121）は通常は良好です。 Arialはこれらの色では読みにくいようで、通常は黒一色が最適です。 Segoe UIはコントラストが強すぎて、黒一色で忙しく見える傾向があります。
私はarialがTahomaより個人的に読みやすいと思います。あなたがまっすぐ読みやすさについて話しているだけなら。 TahomaはWindowsインターフェースで見栄えがよくなるかもしれませんが、それは美的です。
間隔、フォントの色、フォントサイズによってすべてが変わります。 Segoe UIの方が良いフォントだと誰にも言わせないでください。特定の場合に適していますが、すべてではありません。確かに魅力的です。
Arial NarrowとTahomaが最高のようです。
私の経験では、アベニールネクストコンデンスドはすごくクリアですが、スペースはほとんどありません。 Arial Narrowに比べて、場所をとらず、読みやすくなっています。
Macで使用しているいくつかのソフトウェア（Soundminer、OS X Mavericks 10.9.5）でフォントスペースの最適化が重要な要素であるという問題に遭遇しましたが、これは他のMacソフトウェアやOS Xの将来のバージョンで役立つ情報になると思います同様に）。このプログラムは、ファイルのメタデータを高さが固定された行とともにリストし、ユーザーが行の高さとフォントサイズを選択できるようにします。ワードラップはオプションですが、行の高さは各セルの内容を自動調整するように調整されません。
システム上の数百のフォントすべてを調べた後、可読性を維持しながら、ほとんどの文字データを最小限のスペースに収めたフォントは（驚くほど）Apple Symbolsでした。フォントサイズを12に設定し、行の高さを22にすると、2行のテキストと他のフォント（同じサイズ以下）よりも多くの文字を快適に収めることができます。 'ディスプレイから。
うまくいけば、これは同じ（または類似の）問題を抱えている他の誰かにも役立つでしょう。
ここでの回答のほとんどは、使用可能なフォントの候補としてのみ使用する必要があります。読みやすさの後、それは好みの問題です。 （Verdanaが明らかに最悪の選択だと言ったコメントでは、私はそれが一番好きでした。）私はしばしば8か10の異なるフォントを試して、どれが私に最もよく見えるかを決定します。選択はコンテキストにも依存します。ランジェリーショップと製鉄所では、誰もが名刺に異なるフォントを使用すると思います。セリフとサンセリフに関するすべてのBSは時間の無駄です。見栄えの良いものを使用してください。
目標は、テキストにできるだけ多くの情報を詰め込むことではないことに同意します。ほとんどの人はそれを全部読んだり、その多くを読んだりしません。彼らは重要なポイントを探し、それらに関心がある場合は、残りの部分を読むか、さらに良いことに、より多くの情報を求めます。
Arialナロー。おかしい、誰もそれについて言及しなかった（答えをざっと一目で見て）。私はそれをすべてのMSアプリで効果的に使用しました。ニーラジ。
Verdanaは小さなフォントサイズに最適です（大きなフォントサイズにはあまり適していません）。または、可能であれば、ピクセルフォントを使用することもできます。