8ポイントグリッド:Web上のタイポグラフィ

Webタイポグラフィはわかりにくいです。ベストプラクティスを知っていますか?

Webタイポグラフィのベストプラクティスを理解するために人気のあるWebサイトを調べ始めたとき、私は当惑したことを認めなければなりません。以下は、いくつかの人気のあるWebサイトやデザインシステムから取得したタイポグラフィスケールの例です。統一パターンを見つけることができますか?

標準スケールに収まるように簡素化されたサンプル

型システムには明らかに異なるアプローチがあります。現実には、ウェブコミュニティとして私たち全員が同意するわけではありません。ただし、ほとんどの設計上の問題と同様に、それはユーザーのニーズに対応することから始まります。

タイポグラフィシステムの3つの原型

以下に、3つの一般的なタイポグラフィシステムのアーキタイプを示します。ほとんどの企業は、これらの3つすべてをある時点で利用しますが、各オリエンテーションによって対処される基本的なユーザーニーズを認識することが重要です。

マーケティングサイト

  • 目的:特定のストーリーを伝え、訪問者がサイトで時間やお金を費やすように誘導します。
  • 要件:各書体には独自のスタイルセットが必要であり、さまざまなサイズは要素のフィッティングよりもアートの方向性に基づいています。
  • レスポンシブなユースケース:システムは、モバイルからデスクトップまで複数のサイズに対応する必要があります。

何かを売り込むためのウェブエクスペリエンスは、このカテゴリに分類されます。野心的なものは、タイポグラフィのすべてのルールを破り、魅力的で魅力的な体験を生み出します。

これらのサイトについては多くの検討が行われていますが、将来的に構築できる拡張可能なシステムではなく、スプラッシュを作成することに焦点が当てられています。これらのサイトは一般に保存期間が短く、トップからボトムへの再設計のために完全に廃棄されます。

この高度な例は、InvisionのランディングページでLeigh TaylorとNick Jonesが使用する補間関数です。

のフォントサイズは、calc(32px +((24 *(100vw — 800px))/ 799));です。ページ上のタイポグラフィは、すべての画面サイズで機能するように細心の注意を払って計算されています。

「数学を使用してダイナミックなアートディレクションを行う」—リー・テイラー

ブログ/情報サイト

  • 目的:大量のテキストベースの情報を伝えること。
  • 要件:メインの読み取り領域では、この中記事と同じように、比率ベースの行の高さシステムを使用できます。
  • レスポンシブなユースケース:レスポンシブである可能性が高いですが、読みやすさに重点を置いています。

この中記事は、長時間読むために構築されたWebエクスペリエンスの例です。

焦点は、小さな視覚化の解釈やフォームへの記入ではありません。選択したサイズ比は、読みやすさを目的として、目的の行の長さを得るために特別に構築されています。タイポグラフィは、読者としての私のニーズに合わせて慎重に作成されているため、各行を快適に読むことができます。

製品

  • 目的:税金の申告、gitリポジトリの管理、パフォーマンスメトリックの視覚化などのユーザーの問題を解決するために構築されています。
  • 要件:テキストは要素階層にうまく収まる必要があります。テキストは主にラベル、指示、表示データに使用されます。
  • レスポンシブなユースケース:最小限のレスポンシブ。高度に開発された製品は、モバイルとデスクトップで異なるエクスペリエンスを意味する適応設計を利用します。焦点は、ユーザーエクスペリエンスをサポートする要素の階層にあります。

Googleのマテリアルデザインは、多くの製品のユースケースに適用できる人気のあるデザイン言語です。

マテリアルの間隔方法は、8ptコンポーネントグリッドシステムとタイポグラフィ用の4ptベースライングリッドに基づいています。 4の増分で行の高さをスケーリングしようとします。ベースライングリッドで8の増分でスケーリングすることは、利用可能な行の高さが一部のテキストサイズに対して離れすぎているため困難な場合があります。

一部のフォントサイズに、より適切な行の高さを設定できるようにすることは、大きな前進です。特定の行の上または下の間隔を常に4pxバンプして、より大きなアトミックグリッドに揃えることができます。

ベースライングリッドシステムを適用すると、要素空間システム(8ptグリッド)をタイポグラフィシステムに合わせて、デザインに魅力的な垂直リズムを作成することができます。

Webタイポグラフィの実装—実際には

長い形式の読み取り領域も備えた8ptグリッドに準拠した、意見に基づいた構造化されたUIを使用することができます。

固定ベースライングリッドシステムが構造化コンポーネント内のテキストを処理できるようにし、モジュラースケールを使用して、サイトに追加したブログまたはドキュメントに最適な読書体験を作成します。

ほとんどのデジタル製品会社は、マーケティングランディングページ、デジタル製品、およびドキュメント間で既にこれを行っています。これらの活版印刷領域を個別に構造化する決定を下すと、持続不可能な複雑さから解放されます。

コンテンツタイプの混合

落とし穴— Ems、rem、およびピクセル

明確で一貫性のあるシステムを表現するには、タイポグラフィの測定値を作成する製品チームが簡単に解釈する必要があります。

レムやemのような相対的な単位は時々誤解され、私の経験では、これは持続不可能なタイポグラフィシステムにつながります。たとえば、14pxのフォントサイズと20pxの行の高さの比率は、フォントサイズが大きくなるにつれて変化するため、相対的な単位でキャプチャするべきではありません。

1.4285714286emの行の高さを定義するのはばかげています。ほとんどの人は頭の中でそのような計算を行うことができないからです。 font-sizeが16pxに増加すると、ブラウザーは22.857142pxの行の高さをレンダリングし、その種のピクセル分割は発生を待つ頭痛の種です。これは混乱を引き起こし、相対的なユニットの誤用です。絶対単位と相対単位の完全なリストはこちらをご覧ください。

なぜ今日、多くの設計システムが相対的なサイズ設定に基づいているのですか?答えは「アクセシビリティ」です。

ただし、コマンド+でズームインすると、ブラウザは基本フォントサイズをスケーリングしません。それを必要とするユーザーのために基本フォントサイズを拡大縮小するアクセシビリティツールがあります。適切にテストして、ユーザーが期待するエクスペリエンスであることを確認することをお勧めします。チェックボックスのアクセシビリティは、それが役立つ以上に害を及ぼす可能性があります。

サイト/アプリでレムとemを使用するのは驚くほど強力です。非常に興味深いユースケースが数多くあり、それらはツールキットの重要な部分であるはずです。

私の提案は、それらをしっかりと使用するまで控えめに使用することです。それらをタイポグラフィシステムのコアに組み込むと、混乱や予期せぬユーザーエクスペリエンスが発生する可能性があります。

8ptグリッドタイポグラフィ

8ptグリッドコンセプトの最も強力な部分は、設計全体で一貫性を維持できることです。ユーザーのニーズと、それらのニーズを満たすようにタイポグラフィを拡大縮小する最良の方法を評価する必要があります。

設計とエンジニアリングが、企業/製品のこれらの標準の最終化に協力することを強くお勧めします。

Googleマテリアル、Pivo​​tal、Atlassian、Intuitなど、よく知られた名前のサンプルを次に示します。

標準スケールに収まるように簡素化されたサンプル

参考資料と関連資料

  • Priyanka Godbole:設計開発者のハンドオフを高速化するための予測可能かつ調和のとれたスペーシングシステムを作成するためのフレームワーク
  • リチャード・ラッター:ウェブに適用される活版印刷スタイルの要素
  • Ian Yates:モジュラータイポグラフィスケールを確立する方法
  • ネイサンカーティス:デザインシステムの空間
  • Vincent De Oliveira:ディープダイブCSS:フォントメトリック、行の高さ、垂直方向の配置
  • Kezz Bracey:Remベースのレイアウトを使用する理由

以前の8ポイントグリッドの記事:

  1. 8ポイントグリッドシステムの概要
  2. 8ポイントグリッド:ボーダーとレイアウト
  3. 8ポイントグリッド:垂直リズム

質問:

これは私がまだ模索しているものです。共有する良い例はありますか? 8ptタイポグラフィシステムに別のアプローチがありますか?

ご意見がありましたら、コメントを残すか、Twitterでご連絡ください。