web-dev-qa-db-ja.com

書体を選択するとユーザーエクスペリエンスが低下するのはなぜですか?

私はソーシャルネットワーキングアプリを開発しています。最初はArialを100%使用しており、問題はありませんでした。それ以来、Instagramでの実装と同様に新しい「カード」を導入しましたが、それでも問題はありません。最近Playfair Displayに切り替えましたが、見た目は間違っています。私はArialを持ち帰りましたが、これは変更前よりも「洗練されていない」ように見え、はるかに悪いように見えました。以下は現在のスクリーンショットです。 どうすれば改善でき、「間違っている」ように見えませんか?

Sans vs Serif

私のコメントを改善して、私はセリフフォント(行の終わりにある小さな突出した特徴)とサンセリフ(文字通りなしSerif )。 Sansフォント(セリフのないフォント)はたくさんあり、 Gothic 書体と強く関連しています: Century GothicHelveticaVerdanaFuturaSyntaxetc。 これは古い戦いであることを言及することも重要です StackでもExchangeコミュニティ

セリフフォントは通常(まだ議論の余地はありますが)印刷物には、サンセリフはウェブ素材に適していると言われています。つまり、@ DasBeastoのコメントで提供されている source の結論です。反対する人がたくさんいて、私は quote

明らかなように、各フォントには用途があります。しかし、私が言うことは、読書(ブログ、本、および他の媒体、特に電子書籍など)の使用におけるサンセリフフォントの使用の増加は、読者にとって有害で​​あるということです。

セリフフォントが間違いなく読みやすいという事実は、でそれが主要なフォント選択であると言うのに十分ですすべての設定には長時間の読み取りが必要です。もちろん、この投稿全体がsans-serifフォントであることは知っています、でもねえ、どうすればいいの?少なくとも今、皆さんは私の問題についての私の意見を知っています!

私は彼に同意しませんが、それは私たちを仮説のレベルにまで引き上げます。フォントの使用について 認知的負荷 について行われた真剣な研究を見つけようとしました。 Alex Poole による近似に言及することしかできません。これは、この主題に関する文献の包括的な分析を行います。彼は結論付けている:

最後に、主流の用途で最も合理的に設計された書体も同様に読みやすくなること、および読みやすさの問題よりも審美的な理由でセリフまたはサンセリフの書体を支持するほうがはるかに理にかなっていることを受け入れる必要があります。 ( Bernard、2001 ; Tinker、196

彼は子供のための文学の分析さえも含みます:

子どもたち向けに作成された本は、文字の形が単純であることでわかりやすくなると教師が主張するため、サンセリフテキストで印刷されることがよくあります(Coghill、1980)、Walker、2001)。しかし、子どもの参加者を対象とした研究では、どちらの書体を読む能力にも違いはありませんでした。 (コグヒル、1980);ザクリソン、1965年、ウォーカー、2001年)

文献から結論を出すことはほとんどできません。両方のサイズを支持する、または単にまったく支持しないという主張があります。小さなコンテンツが行くところとして、Sansフォントがどこにでもあるように見える 好まれている

標準フォントを使用します。HelveticaやArialなどのサンセリフフォントは、Times Romanなどのセリフフォントよりも投影すると読みやすくなります。

、しかしこれは(セリフの古典的な特徴とは対照的に)私たちの現代的な好みの産物かもしれません。両方のファミリーフォントの読み取り速度について実施された調査があります。多くの人は、長期的にはセリフが役立つことに同意し、他の人は そうでなければ言います サンセリフである方が速く読むことができます。

結論

私はそれがすべてあなたが必要とするものに要約されると思います。あなたのケースでは、テキストの小さな断片が、たいていは斜めに読まれることを望んでいます。情報への高速アクセスを求めているとしましょう。比較をつかむことによって、道路標識は 通常はSansで であり、他の public signage であることに言及する必要があります。それは単なる現代的なものかもしれないし、 その背後にある科学的背景 があるかもしれません。ほとんどのチャットアプリケーションはSans Serifフォントに依存していることにも触れておきます。実際、このサイトはSansで動作します。

私の推奨(そして決して決定的なものではありません)は、適切なものを取得するまで、Sansの世界にあるものを探すことです。テキスト領域の一般的なサイズによっては、これはより広いまたはより狭いスペースで正しく動作するフォントが必要になることを意味する場合があります(テキスト領域全体を使用しないとソフトウェアで見栄えが悪くなることがあります。これが何であるかを確認してください奇妙な奇妙な感じを引き起こしています)。

32
armatita

Playfair Displayはディスプレイフォント(名前の手がかりです!)です。つまり、大きなタイトルや、ロゴ、プルクォートなど、スタイルを大きくしたいテキストで使用するように設計されています。

Facebook、Twitter、Instagramはすべて主にsans-serifフォントを使用していますが、serifフォントも引き続き機能しますが、一般的にはよりクラシックな印象を与えます。ヘッダーのセリフと本文のコピーのsansのペアリングもうまくいきます。

インスピレーションを得るために、いくつかの font pairings をご覧ください。

9
Matt O'Keefe

タイポグラフィは大きなテーマであり、習得には時間がかかります。タイポグラフィには、セリフやサンセリフ以外にも多くのものがあります。

Sans/Sans-Serifに関係なく、すべての書体には異なるx-heightがあり、x-heightは読みやすさにおいて大きな役割を果たします。

定義:タイポグラフィでは、x-heightはタイプの線のベースラインと小文字の本体の上部(つまり、アセンダーまたはディセンダーを除く)の間の距離です。 xの高さは、書体の識別と読みやすさの要素です。

ただし、読みやすさを向上させるために、タイポグラフィの他の側面を使用できます。たとえば、行の高さ、カーニングなど。読みやすさを犠牲にすることなく、デザインにSansとSans-Serifを混在させることもできます。

つまり、Serifフォントを使用すると、Webサイト/アプリケーションを美しく読みやすくすることができます。

他の人がここで述べたように、ウェブは主に多くの人々がより「モダン」に見えると思うので、サンセリフを彼らの好ましい書体として採用しました-もちろんそれはナンセンスです。

高密度のWebアプリケーションの場合、主にほとんどのテキストが小さく、テキストが1つまたは2つのWordのタイトル、ラベル、およびデータに限定されるため、xの高さが適切なフォントを使用することをお勧めします。密なWebアプリケーションには通常、複数行のテキストの段落はありません。

タイポグラフィは非常に長い間存在してきた主題です。

3
SteveD