ウェブ上のタイポグラフィの標準的な比率は何ですか？

Webデザインのレイアウトでは、タイポグラフィが比例して一貫していることを確認することがよくあります。しかし、どの比率とサイズを使用すべきかについての決定的な記事やリソースを見つけることができませんでした。具体的には、次の場合の推奨または標準的なプラクティスは何ですか？

• フォントサイズ
• 行の高さ
• 線幅
• 行間隔

回答では段落とヘッダーの両方を検討してください。また、さまざまな比率またはメトリックの有効性に関する調査は非常に有用です。

ロバート・ブリングハーストの「活版印刷スタイルの要素」は、このようなものに対する徹底的で素晴らしいリファレンスです。それは長いですが、非常に貴重です。

多くの設計者は、行+パディングが常に16ピクセル以内に収まるように、標準の行グリッドを推奨しています。そのため、それよりも小さいものの行の高さは16になり、それより上のすべての行の高さは32になります。

テキストを読むための行の理想的な長さは、一部の人が45文字、他の情報源が55〜75文字としています。

ここには、ウェブサイトの一般的な平均がいくつかあります：活版印刷デザインパターンとベストプラクティス

16pxの段落から始めて、フィボナッチ数列を使用して残りを計算します。主要なブラウザがこのロジックを使用しているようです。長年（ロバートブリングハースト、ハートレー、マークスの「タイポグラフィスタイルの要素：バージョン4.0」を使用した将来の研究のため）、リーディングは10ptフォントの12ptに設定されました。

12ptをピクセルに変換すると、16pxの基本フォントが得られます。

ブラウザのデフォルトのスタイルシートのほとんどは、DOMを自分で調べるか、https ：//www.w3.org/TR/CSS21/sample.htmlおよびhttp：// listsを調べることで、段落テキストに16ピクセルを使用します。 w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

今日私たちが抱えている問題は、まさに新しい種類のタイポグラフィについて話しているということです。さまざまなデバイスに適合する必要がある現在のWebタイポグラフィは、Robert BringhurstのElements of Typographic Styleに描かれているような過去の概念とはまったく異なります。これは素晴らしい本ですが、現実は現代のデザイナーがコードを必要とするということです。私は通常、基本的なh1、h2、h3、h4、h5、h6、段落、フッターを含むHTMLファイルのスケルトンを作成することにより、主要なブラウザースタイルシートの標準マトリックスを検討します。ブラウザのスタイルシートを調べて、行の高さを使用する標準ピクセルサイズのサイズと、見出しの階層を理解します。Webタイポグラフィのサイズが金属/木材の可動タイプによって規制される以前は、1985年からAdobeとAppleの合意により状況が変化し始めました。今日、タイポグラフィの概念の主な調整要因は、Internet Explorer、Chrome、Firefoxを備えたApple、Safari、Windowsであると考えています。実際にレンダリングされ、さまざまなデバイス。優れた本であるRobert BringhurstのElements of Typographic Styleのプラクティスに従うか、フィボナッチ数列システムに従う必要があります。私は通常、ブラウザーのスタイルシートの変更を最新の状態に保ち、次のw3仕様を読みます。優れた本であるRobert BringhurstのElements of Typographic Styleのプラクティスに従うか、フィボナッチ数列システムに従う必要があります。私は通常、ブラウザーのスタイルシートの変更を最新の状態に保ち、次のw3仕様を読みます。優れた本であるRobert BringhurstのElements of Typographic Styleのプラクティスに従うか、フィボナッチ数列システムに従う必要があります。私は通常、ブラウザーのスタイルシートの変更を最新の状態に保ち、次のw3仕様を読みます。https://www.w3.org/TR/html401/struct/global.html#h-7.5.5しかし、デザイン分野ではこれを考慮に入れる必要があると思います。現在の現実。また、こちらのブログ（https://road-to-resilience.blog/2019/11/21/the-typographic-thing/）で詳細を読むこともできます。