Cousinsはアナログ、デジタルの両方の出版物においてデザイン、編集、ライターなどのメディア産業において10年以上の経験を積んできました。この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。Experience9034タイトルとURLをコピーWebサイトやアプリにとって、優れたタイポグラフィには、単なる書体の美しさ以上の意味があります。タイポグラフィは、コンテンツと視覚的に強い繋がりを持つと同時に、読みやすくなければなりません。難しい注文ですが、少し練習すればほとんどのデザイナーにできることです。本記事では、素晴らしいタイポグラフィのユーザー体験を作り上げる10のルールを紹介します。それぞれのルールでは、タイポグラフィが魅力的なWebサイトの事例も挙げています。読みやすさの原則サンセリフ体やWebタイポグラフィを使わなければいけないという考えは時代遅れです。その思考の背後にある理念は重要です。テキストは、読みやすくなくてはいけないのです。斬新な書体や中世風のブラックレターといった読みにくい書体は、原稿などでは避けたほうがいいでしょう。「芸術」として装飾的なスタイルを使いたいときは例外です。読みやすい書体とは、流し読みしやすく、文字自体にあまり注意が向かないものです。いった存在感の薄い「見えない」書体は非常に読みやすいために、ユーザーはレタリングについてまったく考えることがありません。これは単純に書体が機能しているからです。行間を十分に取るユーザーが満足する体験を作る鍵の1つは、行間の高さです。行間はモバイルのWebサイトでは特に重要で、過剰に思えるほど行間を取ったほうが読みやすくなります。行間の広さには、さまざまな要素が関係します。文字の大きさ文字の多さスタイルスクリーンの広さ残念ながら便利な公式はありませんが、次のことを参考にできます。ほとんどのWebサイトでは、行間を文字のサイズの約125%に設定しましょうモバイルのWebサイトでは、行間を文字のサイズの約150%に設定しましょう流し読みしやすくするために、パラグラフの間には1行分スペースを取りましょうテキストが画面上でどのように見えるかテストして、「感覚」をたよりに縮めたり広げたりしましょうスペースの広いフォントや、丸いフォントを選ぶ大きくて丸いフォントは読みやすいです。“O”の内側の円が広い書体も読みやすいです。一方で、きつく詰め込まれた書体を使うと、非常に読みにくくなります。上記の例のように幅が広いスタイルが読みやすいのは、1つひとつの文字を見分けやすいからです。丸いフォントは、子どもが読み書きを学ぶときに目にするような形であり、ユーザーにとって親しみやすいのです。文字を大きくする迷ったときは、快適に感じるサイズより少しだけ文字を大きくしましょう。文字の大きさは、どれだけの文章を表示する必要があるのかによって決定します。行の長さには特に注意を払いましょう。デザイナーによって最適な文字数の意見は分かれますが、ほとんどは1行につき45~60文字が最適だと考えています。モバイルのタイポグラフィでは、この半分程度が一般的にです。エックスハイトが高いフォントを使う文字の高さ、特に小文字の高さによって、ユーザーがどれほど簡単にコンテンツを読めるかは大きく左右されます。エックスハイト(x-height)とは、小文字のxの高さを表します。小文字の高さが大文字の高さに近い、つまりエックスハイトが高いフォントほど、一般的に読みやすいです。エックスハイトが、大文字の高さの2/3から3/4のフォントを見つけましょう。カーニング優れたカーニングは、優れたタイポグラフィを生みます。本文のすべての文字をカーニングする時間はないでしょうし、する必要もありません。美しく見せたいタイポグラフィでは、カーニングにこだわりましょう。文字の組み合わせ1つひとつが完璧な位置関係になるよう調整するべきです。細部にこだわれば、この重要なステップを忘れてしまった多くのWebサイトと差別化できます。比率を調整するプロジェクトにおいて文字のスタイルを作り上げる際には、すべての比率を考慮することが大切です。複雑な計算が必要だと思うかもしれませんが、これを実行すれば、デザインの課題を大幅に軽減できます。前出の行間もまた、比率の問題です。フォント、サブタイトル、タイトル、大きい装飾文字のサイズについて考えてみてください。簡単に文字のサイズを決め、視覚的な調和を生み出すために、これらの比率を揃えましょう。Plusのチュートリアルを使えば理解しやすいでしょう。文字の太さを揃える書体では、文字の太さが大切になります。細いフォントは、コントラストが弱いため読みにくいです。逆に、線が太すぎるフォントも、目が酷使されるので同じような問題が浮上します。同様に、フォントの太さに極端な差があっても読みにくいです。解決策は、比較的同じ太さの文字を採用することです。このようなスタイルは使いやすく、背景の選択肢を限定してしまうこともなく、一般的に読みやすさが安定しています。書体の数を制限する用いる書体の数は2つまでにしましょう。