レスポンシブウェブタイポグラフィの規則

Feb 4, 2026

操作方法

レスポンシブウェブタイポグラフィは難しい - デザインチョップと技術的なノウハウの両方を持つ必要があります。しかし、タイポグラフィがWebデザインの礎石であるため、それが間違っているかもしれませんが、それが間違っているかもしれません。

デザインとコード権の両方をどのように手に入れますか？開発者はピクセルプッシュデザイナーとどのように通信しますか？あなたのデザイナーはどのようにして非切り盾がタイポグラフィを気にすることができますか？最速かつ最も簡単な方法は、あなたのデザイナーや開発者が同じ言語を話すようになり、彼らの工芸品のためにお互いを尊重し、そしてウェブタイポグラフィの原則と制限の両方を理解しようとしています。

この記事は、タイポグラフィの主題についてのコミュニケーションを開始するための基礎と設計者と開発者の両方を提供することを目的としています。必要な設計原則をカバーし、実用的なソリューションを探索します。 レスポンシブタイポグラフィ 。

良いタイポグラフィとは

「良い」は常に主観的です。通信を蝶番的にヒンジできるようにする固定アンカーではありません。設計者や開発者が効果的に通信するためには、両側が理解できる一般的な分母について話すことから始めなければなりません。その分母はタイポグラフィの目的です。

タイポグラフィはテキストの外観です。私たちはテキストアップを着ています。ドレッシングの目的は、会話を引き付けるのに十分な着用者を魅力的にすることですが、他の当事者が会話から気を取られるようになったことに多くの注意を払わないようにすることです。

同様に、タイポグラフィの目的は、読者がテキストの内容に集中して没頭することを可能にすることです。定義上の優れたタイポグラフィは、テキストがコミュニケーションの目的を果たすのに役立つタイポグラフィです。

2つのことが読者がテキストに集中して没頭するために起こらなければならない。第一に、タイポグラフィは適切な（いれば）感情を伝える必要があります。第二に、テキストは読みやすくなければなりません。これはあなたが正しく得るために必要な4つの本質的な特性に私たちをもたらします。

フォントファミリー
フォントサイズ
ラインハイト（リーディングとも呼ばれます）
テキスト幅（テキストメジャーとも呼ばれる）

正しいフォントファミリを得ることは、テキストの根本的な感情を照らすのを助けます。他の3つのプロパティを手に入れる権利は、テキストが読みやすくなります。ほとんどの場合、デザイナーは正しいフォントファミリを見つけるのに優れています。だから、この記事の残りの部分では、他の3つの要素に焦点を当てます。

A modular scale derived from a base font size of 16px and a ratio of 1.5 — ベースフォントサイズ16pxと1.5の比率から派生したモジュラースケール

読みやすいテキストの芸術

任意のプロジェクトの最初のステップは設定することです。 フォントサイズ 、 行の高さ そして幅あなたの体のテキストの。このプロセスは組版と呼ばれます。ユーザーが必要とする情報を含むページで定式設定することから始めます。できるだけ多くの場合、このページには、H1、H2、H3、ボディテキスト、キャプションのような複数の要素を含める必要があります。あなたのページにはより多くの要素が含まれているほど、ボード全体で動作するタイプのスキームを設定する可能性が高くなります。

を選択すると フォントサイズ 、 行の高さ そしてあなたのボディテキストのための測定で、必ず実際の内容を使用してください。実際のコンテンツがない場合は、Lorem IPSumの代わりにウィキペディアからのテキストを使用してください。

あなたはまた、読者の目と画面の間の距離が異なるデバイスでは異なるので、あなたは同じような状況に自分自身を置く必要があります。モバイルデバイスを複製している場合は、電話を介して出力を見てください。あなたがラップトップに合格しているなら、あなたのラップトップであなたの机の中に座ってください。

正しい環境で自分を解決したら、最初に選択して定階セットプロセスを始めます。 フォントサイズ 、その後に測定され、ついに 行の高さ 。完璧な組み合わせはありません - あなたが良いタイポグラフィがあると感じる他のページを見てください、そしてあなたはそれらのどれも同じものを使っていないことがわかります フォントサイズ 、 行の高さ そして測定。だから、あなたが目指しているのは、読みやすいテキストです。

正しいサイズを設定することは、書面で説明するのが難しいので、私はあなたを助けるためにいくつかのビデオを作りましたフォントサイズ、測定そしてリジタル。

これはあなたが良いフォントサイズ、リーディングおよびメジャーを確実にするのを助けるためのいくつかの素早いガイドラインです。

以下の場合は、フォントが小さすぎます。

あなたはテキストを読むために集中する必要があります
あなたはあなたの目を刺す必要があります
ズームインするという衝動があります

次の場合は、フォントが大きすぎます。

あなたはコンテンツを読む代わりにレターフォームに気付い始めました
あなたは一度に1つだけ読むことができます
あなたはズームアウトするという衝動を持っています

次の場合は、テキストメジャーが長すぎます。

あなたはあなたの頭を読むためにあなたの頭を変えなければなりません
あなたは中心からの集中を失います

次の場合は、テキストメジャーが短すぎます。

テキストが次の行に折れているときにイライラされます
あなたの目は左に跳ね返って急速に右に疲れています

次の場合、あなたの先行は狭すぎます。

このテキストは密集して圧倒的に感じます
あなたは誤ってテキストの間違った行を読みました

次の場合、あなたの先行は大きすぎます。

あなたは単語の行の間の空白に気を取られます

常に良いタイポグラフィの定義を覚えておいてください：あなたは完璧さの後ではありません、あなたは単に読みやすいテキストのために銃をつけるだけです。そうする間、あなたはあなたの聴衆との組立セットの選択をテストしたいと思うでしょう（友人や同僚は素晴らしいテスターも大いテスターを作りました）。ボディテキストを修正したときに他の要素のサイズを設定するためにのみ移動してください。

他の要素を定式化する

多くのデザイナーと開発者がを選びました フォントサイズ H1とH2のような要素については、これらの魔法の数字がデザインでうまく機能することを願っています。しかし、薄い空気から数を引くだけではありません。テイトグラフィーはこれを助けるために何世紀にもわたってタイポグラフィスケールを使用しました。あなたがすることは、タイポグラフィスケールからあなたの要素のサイズとして数を選ぶことです。残念ながら、これらのスケールは印刷デザイン用に構築されているため、Webに直接使用できません。

Tim Brown、タイポグラフィの分野の専門家で、モジュラースケールと呼ばれる解決策が思い付きました。それはあなたが決定したボディテキストでモジュラースケールを構築することを除いて、タイポグラフィスケールのように機能します。

Typographers have used this typography scale to select type sizes for centuries — テイポグラーgraphersは何世紀にもわたってタイプサイズを選択するためにこのタイポグラフィスケールを使用しました

モジュラースケールを作成するには、ボディテキストを取ります フォントサイズ （基本フォントサイズとも呼ばれ、）スケールが得られるまで、数値でそれを多数掛けます。多くの場合、使用する比率は音楽から派生しています（音楽が調和しているので）。上記は、Aの助けを借りて作成されたスケールの例です。モジュラースケール計算機。

モジュラースケールを構築し終わったら、あなたの要素の残りの部分を組版して、あなたのスケールから数字を選ぶことができます。 フォントサイズ 。次に、読み取り可能な要素のバランスが良いまで、同じプロセスでリーディングとメジャーを設定します。

垂直リズム

次のステップは、垂直リズムと呼ばれる技術を使用して個々の要素を一緒にゲル化するのを助けることです。 1つの要素が次の要素に調和的に流れ込むために、私たちは彼らに結合するものを微調整する必要があります：空白。このホワイトスペースは、1つの要素を次のものと区別するのに十分な大きさでなければなりませんが、フローが破損していないことを確認するのに十分小さくなければなりません。

どのくらいの空き容量を使うべきですか？多くのデザイナーは10pxのような数字を選択してください。一方、多くの開発者は、別のグリッドシステムまたはオンラインで読んだ記事のいずれかから、乱数（6pxのような）を泡立てている傾向があります。これら2つは通信できないのも不思議です。

想像できるように、空白の魔法の数に頼る必要はありません。の倍数を使うことができます 行の高さ 私たちの体のテキストの価値これは、テキスト内の白い空間パターンを本能的に認識するためです。パターンが強く、私たちが感じるより安全なもの、そしてそれが私たちの心をコンテンツにさまよわせることです。

垂直リズムを使用するには、次のとおりです。

要素間の空白をベースの倍数に設定します 行の高さ
をセットする 行の高さ 他のすべての要素の倍数の倍数に 行の高さ

問題の倍数は整数である必要はありません。 0.5xと1.25xのような値を使用できます。 行の高さ より柔軟性を提供するため。垂直リズムは繰り返しの原理を使用するため、これらの値が機能します。

We instinctively recognise the white space is equal to the base line-height since it's already repeated strongly — それはすでに強く繰り返されるので、私たちは本能的にベースライン高さと等しいと認識しています

ベースライングリッドまたはいいえ？

垂直リズムについて言及するたびに、ベースライングリッドの概念は必然的に絵の中に入ります。ベースライングリッドは潜在的に役立つ可能性がありますが、初心者がテキストを作ることに多くのエネルギーを焦点を合わせることで、垂直リズムを正しく得ることは不可能であると感じていると感じています。

正直なところ、タイポグラフィの数学には常にサブピクセルが含まれており、すべてのブラウザは副画素を異なる方法で扱うので、ベースライングリッドをWeb上で完全に動作させることは決してないだろう。たとえば、ブラウザによってはページ上のすべての要素が1pxでオフになっています。これらの1pxエラーは、グリッドをさらにオフにしても、ページを下にしても任意の要素を蓄積してプッシュします。その結果、ベースライングリッドを使用することをお勧めします。

進行中に、応答的な慣習の領域に入り、複数の画面の設計を進めましょう。

Due to the presence of subpixels, elements quickly end up misaligned from the baseline grid — サブピクセルの存在のために、要素はベースライングリッドから誤って位置合わせされた

複数スクリーンのタイポグラフィ

複数のスクリーンのタイポグラフィの設計は意味のない妙技です。デザインの観点からする必要があるものは3つあります。

まず、ユーザーの目とその画面間の距離は、どのようなデバイスで使用しているかによって異なります。一般に、ユーザーはより大きな画面を使用しているときにデバイスをさらに離します。この現象は、デバイスの幅が大きくなるにつれてフォントサイズを大きくする必要があることを意味します。

第二に、私たちは体のテキストと他の要素の間の比率を一貫して保持したいです。これは、本文のテキストサイズを増やすにつれて、すべての要素のサイズを増やさなければならないことを意味します。

第三に、私たちが増やしたい特定のブレークポイントで フォントサイズ モジュラースケールから異なる数を選ぶことによって、特定の要素（h1のように）。そうすることで、視覚的な階層を制御することができ、ユーザーが読み取るためにユーザーを引くのに十分な注意を達成することを保証します。

応答性タイポグラフィのためのコーディング

私達は私達が比例して私達のテキストサイズを増やす必要があることを知っています。これを行う最も簡単な方法は フォントサイズ 以内 html セレクタ。私達はまた相対的な単位を使ってユーザーを尊重したいのです フォントサイズ 好み

 HTML {font-size：100％}
@media（最小幅：40em）{
 HTML {フォントサイズ：112.5％;}

また、他の要素の相対的な単位を使用したいので、HTMLによると拡張します フォントサイズ （ h2 以下の例で）。変更する必要がある場合 フォントサイズ モジュラースケールで異なる数に、あなたがするのは変更されます フォントサイズ したがって h1. 未満）。

 H1 {フォントサイズ：2.369em;}
@media（最小幅：40em）{
 HTML {フォントサイズ：3.147em;}
}

H2 {フォントサイズ：1.777em;}

このプロセスは単純に見えますが、新しい開発者は、関与する数学のためにTONの頭痛に直面する可能性があります。私はよく使います MS（） からモジュラースケールライブラリ。これにより、書くことができます MS（4） の代わりに 3.157EM. そして MS（3） の代わりに 2.369em. 。

垂直リズムを計算する負荷を容易にすることができる関数の例は次のとおりです。

 <コード> @Function VR（$ RHYTHM）{@ RETURN $ RHYTHM / 16 * 1REM;}

この v 機能を書くことができます VR（3） 自分で計算するのではなく、3つのベースラインの倍数の場合。あなたが（そして私自身）をさらに助けるために、私は呼びかけたタイポグラフィライブラリーを作成しました typ 。

The MS mixin makes it easier to get font-sizes derived from your modular scale — MSミックスインは、モジュラースケールから派生したフォントサイズをより簡単にします

相対的な単位

相対的な単位についてのすべての議論は、使用するべきかどうかの質問で終わります。 rem または em 単位。私は信じている rem そして em 独自のユースケースを持っていて、あなたはそれらをさまざまな状況で使うべきです。これは、どの単位を使用するのに役立つ可能性がある2つの規則です。

使用する em 財産が縮小する必要がある場合 フォントサイズ
そうでなければ、使う rem

これらのユニット間の選択の詳細については、この記事を見る。

それを合計する

この記事では、レスポンシブWebタイポグラフィの重要なものを学びました。もちろん、理論と実装の両方で、より深く潜っているように詳細を見つけるでしょうが、あなたがここにいるものは本物のプロジェクトで必要なものの80パーセントをカバーしています。この知識を装備している、あなたはレスポンシブウェブのための良いタイポグラフィーを設計しそしてコードする方法について、デザイナーと開発者の両方と会話を始める準備ができています。

レスポンシブタイポグラフィは信じられないほど困難ではありません。あなたが関連する原則を発見するための莫大な量の忍耐力と勤勉さを必要とし、そしてウェブに合った方法でそれらを適用するので、それはちょうど挑戦的です。

この記事は最初に登場しました ネットマガジン 。 ここで購読する 。

関連記事：

マスターアクセス可能なWebタイポグラフィ
EMベースのサイジングでレスポンシブサイトを設計します
ユーザーフレンドリーなWebフォームを作成するための10の規則

レスポンシブウェブタイポグラフィの規則

良いタイポグラフィとは

読みやすいテキストの芸術

他の要素を定式化する

垂直リズム

ベースライングリッドまたはいいえ？

複数スクリーンのタイポグラフィ

応答性タイポグラフィのためのコーディング

相対的な単位

それを合計する

操作方法 - 最も人気のある記事

フェイスマスクを着用するときにぶら下がっているのを止める方法

Facebookのプライバシー設定：プロフィールをプライベートに保つ方法

NPMで生産性を向上させるための21の方法

Houdiniとのワークイメージマスクマジック

あなたのアプリをサービス労働者とオフラインで作業させる

Zbrushのエイリアン海賊クリーチャーをモデル化する

Photoshopで二重露光をする

Adobe XDでプロトタイピングを始めましょう

カテゴリ