web-dev-qa-db-ja.com

最適なフォントサイズ/行の高さの比率はありますか?

Webページのテキストにスタイルを設定する場合、フォントサイズと行の高さの両方を設定できます。たとえば、この投稿のテキストは、font-size14pxline-heightの(約)18pxを使用して表示され、値1.3emを使用して設定されます。

他のウェブサイトを見ると、1.2前後の比率が一般的な習慣のようです。

これに関するベストプラクティスは何ですか?このテーマについてもっと学ぶことができる良いリソースは何ですか?

77

これについてのアドバイスは W3.org のようなサイトを調べてください。

認知障害を持つ多くの人々は、テキストのブロックが単一のスペースである場合、テキストの行を追跡することに問題があります。 1.5から2までの間隔を設けると、前の行を終えた後、新しい行をより簡単に開始できます。

W3Cアクセシビリティガイドライン1.4.8 状態(私を強調):

視覚的提示:テキストのブロックの視覚的提示のために、以下を達成するためのメカニズムが利用可能です:(レベルAAA)

前景色と背景色はユーザーが選択できます。

幅は最大80文字またはグリフ(CJKの場合は40)。

テキストは揃えられません(左マージンと右マージンの両方に揃えられます)。

行間隔(リーディング)は、段落内で少なくともスペースと半分であり、段落の間隔は、行間隔の少なくとも1.5倍です。

全画面ウィンドウでテキスト行を読むためにユーザーが水平方向にスクロールする必要がない方法で、支援技術なしでテキストを最大200%サイズ変更できます。

34
JonW

記事 最適な行の高さ は言う:

タイポグラフィのリファレンスは、理想的な行の高さを常に1.2 emsに設定します(タイプフェイスの文字の高さまたはポイントサイズと同等のサイズの尺度)。

適切な行の高さを定義する主なアイデアは、テキストの段落をしっかりと見せて読みやすくすることです(行の高さを大きくすると、段落と行の違いが区別できなくなり、読みにくくなります)。行の高さは行の長さにも依存します(同じ記事から):

デザインには、特に活版印刷の基準で推奨されている長さよりも長いライン長(または測定値)が必要です。ラインの長さが増加すると、アイトラッキングを支援するためにラインの高さが増加する必要があります。

実際、これは主観的なものであるため、たとえば、Amazon Kindleでは、さまざまなバリエーションから行の高さを選択できます(段落間のスペースをそれぞれ増やします)。

16
alexeypegov

単一の答えはありません

残念ながら、すべての状況に最適なline-heightleading)の単一の値はありません。最適な範囲はおおよそ1.3〜1.7ですが、最適な値を選択するには、使用中の特定のフォントとテキストの行の幅(特に)を調べる必要があります。

トロイテンプルマンの優れた記事 良いタイポグラフィの基本ルール で、彼は(強調は私のものです)と述べています。

先頭(または行の高さ)は、タイプの行間の垂直方向のスペースの量です。通常、ページレイアウトプログラムのデフォルトのリーディングで十分ですが、調整が必要になる可能性のあるいくつかの要因があります。フォントには、タイプの行間で互いに接触する長いアセンダーとディセンダーがあり、気が散ることがあります。 フォントのx-heightが高い場合、タイトリードのような錯覚を与えるタイプの行間の負のスペースを減らします。タイトリードは、長いタイプの行で特に目立つ次のタイプの行の始まりを読者が見つけるのを難しくします。したがって、タイプの幅の広い列では、行の高さを大きくすると読みやすくなります。本文のコピーでは、通常、大文字の文字の高さがタイプの行間に完全に合うように行送りを設定します。これは、フォントサイズの約1.5倍です。

同じサイズの2つのフォントが同じサイズであるとは限りません。大文字と小文字が混在するテキストの場合、次の図で明らかなように、フォントの見かけのサイズはxの高さに大きく影響されます。

Comparison of x-heights between fonts.

フォントのxの高さが大きいほど、行間のスペースが少なくなるように見えるため、読みやすくするためには、より多くのleadingが必要になります。 (ご想像のとおり、すべて大文字のテキストセットの場合、重要なのはキャップの高さであり、xの高さではありません。)

考慮すべき2番目の側面は、テキストの行の幅であり、measureとも呼ばれます。目がテキストの行に沿って左から右に移動するとき、目が行の終わりに到達すると、次の行の先頭に戻る必要があります。行幅が長くなると、行の高さが狭い場合、目で次の行の先頭を正しく見つけるのが難しくなります。 (つまり、同じ行を2度読み始める、行をスキップするなど、さらに多くの間違いを犯します。)

Mark Boultonの記事 タイポグラフィを改善するための5つの簡単なステップ はこう述べています。

リードはメジャーに比例して増加するはずです。小さいメジャー、少ないリード。ワイドメジャー、よりリード。シンプルですが効果的なルールです。

(読みたくなったら、色の選択が最適な行の高さにどのように影響するかについても後で説明します。)

ご覧のとおり、単一の最適な行の高さを選択することは不可能です。むしろ、主にフォントのxの高さとテキストの行の長さを考慮する必要があります。 Alan Gilbertsonの優れた答え を、Graphic Design Q&Aサイトの非常に類似した質問に必ずお読みください。

14
Chris Calo

これは個人の好みとテキストのブロックの幅に影響されていると思います。テキストのブロックが広いほど、読みながら同じ行に目を留めるために、行の高さを大きくする必要があります。

個人的には、行の高さを1.5emまたは1.6emにするのが好きです。

このブログタイポグラフィのインタラクティブガイド には line-heightに関するセクション があり、これも1.5emの行の高さを示唆しています。

14
Kristof Claes

これは非常に便利な article からの抜粋です:

残念ながら、特定のフォントサイズに最適な行の高さを知るだけでは十分ではありません。

フォントサイズ、行の高さ、および行の幅の3つの印刷上の寸法すべてが互いに影響し合います。したがって、行の幅も考慮せずに行の高さやフォントサイズについて話すことはできません。

この推論に基づいて、上記の方程式からの最適な線の高さに対応する最適な線の幅もなければなりません。

問題は、線の幅と高さの正確な関係がわからないことです。確かに知っているのは、行の幅が行の高さよりもかなり大きいことです。

基本的な数学的モデリングの助けを借りて、最適な線の高さと線の幅の関係が指数関数的であるという知識に基づいた推測を行うことができます。

それはもっと複雑になるので、ここであなたのために数学を処理する計算機へのリンク。 http://www.pearsonified.com/typography/

10
Alex

この記事を参照してください: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/ -非常に興味深いもので、ウェブサイトのテキストの他のいくつかの側面も説明しています。

解像度、画面サイズ、およびユーザーが画面を見ている距離から、常にデバイスにも依存することを忘れないでください(小さい画面を使用している場合、デスクトップの場合よりも携帯電話の場合の方がかなり近くなります)。ここではRWD(レスポンシブWebデザイン)が重要です。

6
Dominik Oslizlo

ここでは、この主題に関するいくつかの非常に優れたリソースを見つけることができます。

最適なリソース:https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

すべての値との数値の違いを確認するための非常に良い例です。なぜ数値を使用することが望ましいのですか。
https://codepen.io/anon/pen/ObxKjJ

私の意見では、は1.5〜2 の範囲で使用することをお勧めします。1.5〜2の間隔を設けると、前の行が終わったら新しい行をより簡単に開始できるからです。

2
Artiom S.

私は この記事 を情報アーキテクト株式会社によって見つけます。とても興味深い。

それによると(セクション3を参照)、1.4emは読みやすさの良い値です。

2
Daniele

ここで私が目にする答えのほとんどは、ウェブよりも印刷に向けられています。印刷物を読むことは、ウェブで読むこととは異なります。

テキストサイズに関する限り、固定フォントサイズを使用する代わりに、ブラウザで設定したデフォルトを使用して常にユーザーが決定できるにする必要があります。 1.5は、画面上でテキストを読み取るときに読みやすい行の高さです。これにより、視覚障害者が画面拡大鏡を使用してサイトのコンテンツを読みやすくなります。

Web開発者がWeb標準に違反すると、不可能ではないにしても、一部の人々がサイトをナビゲートすることが困難になります。支援技術を使用してサイトを体験し、Web標準に準拠するさまざまな能力を持つ多くの人々が、これらの人々が実際にサイトを使用できるようにします。人々はさまざまな方法でWebにアクセスして使用し、標準に違反すると、自分の技術を知らないハックのように見えるだけでなく、Webオーディエンスを狭めることにもなり、実際の目的ではありません可能な限り幅広いオーディエンスにリーチするためにWeb上にいますか?

1
AMG

最適なフォントサイズは、デフォルトのフォントサイズです。モニターのDPIとその内部調査に応じて、この値を選択したブラウザーを信頼してください。

font-size: medium;

から :smashing Magazine

1.5は古典的な活版印刷の本で一般的に推奨されている値であることに注意してください。

Eric Meyerの研究 によると、単位の追加を避け、絶対値のみを使用してください。

  line-height: 1.5;
0
Jacek Krawczyk

1.5emは最低限必要なものです。ほとんどのフォントは1.6emでうまく機能します。しかし、それは主にタイプファミリーに依存します。必要なものもあれば、必要なものもあります。行の高さが1.8emになることもあります。

0
Ren