タイポグラフィをレスポンシブにする方法

レスポンシブなタイポグラフィは、周囲の空間が変わっても、見出しの読みやすさと適切な目立ち方を保ちます。流動的なタイポグラフィは範囲内で連続的にサイズを変え、ブレークポイント式は選んだ幅で変えます。どちらにも、上限と下限、内容に合うテキスト列が必要です。スマートフォンで文字を小さくするのは、その一部にすぎません。枠内に収まる見出しも、窮屈だったり、不自然に折り返したり、説明の段落を圧倒したりすることがあります。

架空の見出し「A calmer way to manage complex projects」を考えます。広いページなら二行で整って見えても、狭い画面では密な五行になり、末尾のprojectsだけが取り残されるかもしれません。小さくすればよいとは限りません。列が必要以上に狭い、書体の字幅が広い、デスクトップ用の改行が形を崩している、といった可能性があります。

GOV.UKが変えたのは、大見出しだけではなかった

「モバイルではすべて小さくする」への有用な対照例がGOV.UKです。現在のタイプスケールでは、19pxの本文を小さい画面でも19pxに保ち、特大の見出しは48pxから32pxに変えています。読む上での仕事が違うため、役割ごとに変化も違います。

タイポグラフィ改訂の説明では、小さな文字をさらに縮めることや、視覚に障害のある人への影響について、コミュニティから懸念が寄せられたと報告しています。以下の値の参照先は現在の実装で、以前の記事は変更の動機を説明するものです。

製品ページでも、一緒にされがちな二つの判断を分けられます。装飾性の強い見出しは、狭い画面で視覚的な重みを減らす必要があるかもしれません。一方、手順、利用条件、本文は、快適に読む必要があります。すべての役割を同じ倍率で縮めると、見出しを解決する代わりに本文の問題を作りかねません。

試して確かめられる、流動的な文字サイズのCSS

大きな見出しには、例えば次を出発点にできます。

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

ルートが初期値の16pxなら、画面幅390pxでは約32px、768pxでは約43px、1440pxでは約63pxです。役立つのは、文字に下限と上限があることです。

この計算には、確かめたい二つの切り替わりがあります。画面幅400px未満では下限の32pxが使われます。約1467pxを超えると上限の64pxです。その間は、画面幅が100px増えるごとに見出しが3px大きくなります。900px付近で不自然な一行が増えたら、別のモバイルサイズを勘で選ぶ代わりに、列の幅とこの増加率を比べられます。

この式は、あくまで候補です。中間幅で、列より見出しのほうが速く大きくなり、画面が広がるのに行が増える場合があります。曲線を採用する前に、最長の実際の見出しと本物の画像を並べます。中間が失敗するなら、増加率を下げるか、列への幅の配分を変えます。すべてのタイトルに手動改行を足すと、代わりに保守の問題が生まれます。

remを含むからといって、文字拡大の確認に自動的に合格するわけではありません。ブラウザーのズームは実効的な画面幅と文字サイズの両方を変え、ビューポート単位の項が拡大を一部相殺することがあります。ズームと既定の文字サイズを大きくして、表示結果を試します。必要なのは、相対単位がスタイルシートにあることではなく、内容が読めて使えることです。

フォントを変える前に、何が不快かを言葉にする

見出しが変に感じたら、何を見ているかを特定します。「大きすぎる」と「行数が多すぎる」は違います。「詰まっている」は、文字同士、行同士、テキスト全体と画像の距離のどれかもしれません。それぞれ、調整する場所が違います。

声に出して読み、その文がどこで行に分かれるかを見ます。短い接続語の直後で終わる行は、自然な読むリズムを止めるかもしれません。極端に短い最後の行は、意図しない形に見えるかもしれません。どちらも必ず使い勝手の失敗になるわけではありませんが、整ったはずのページが未完成に感じられる理由になります。

次に、周りの絵を少し隠します。それで快適になるなら、問題は文字だけでなく構成かもしれません。画像の端が、列を実際より狭く感じさせることがあります。空の背景では明確だった言葉と、にぎやかなイラストが注目を奪い合うこともあります。

各見出しの階層に、役割を与える

ページ名、セクション見出し、カード見出しの仕事は違います。ページ名は主題を示し、セクション見出しは論点や内容をたどる助けになり、カード見出しは繰り返す項目を区別します。同じ書体だからといって、すべて同じ勢いで拡大するべきではありません。

プロジェクト管理の例では、主見出しは表情豊かでもよいでしょう。「Keep decisions with the work」というセクションは、最初の注目を奪わずに目立つ必要があります。「Project history」というカードは、説明と並んで落ち着く必要があります。全階層をデスクトップで大きくすると、販促バナーの寄せ集めのように感じられます。

具体的な値より先に、関係を決めます。どの階層を最初に見せるか、通常どれほどの長さか、画像の隣に出るかを考えます。それぞれで現実的な最長例を試します。最短の見出しだけで成立する仕組みは、頼れるページのルールではなく、実演にすぎません。

曖昧な文言を、大きさで補わないようにします。「必要なものがすべて」という言葉は美しく組めても、そのセクションが何かは伝わらないかもしれません。毎段落を読まないとページの内容が分からないなら、見出しの改善には余白だけでなく、正確な言葉も必要です。

テキスト列の幅に、意味を持たせる

見出しの折り返しは、割り当てられた幅で決まります。 小さくする前に、コンテナを見ます。左右の余白、グリッドの間隔、空の列、大きすぎる画像が、言葉の場所を奪っているかもしれません。広いときには適切だった選択が、長く残りすぎた可能性があります。

同じ文字設定で、狭いレイアウトを二つ比べます。一方は大きな左右余白で細い列に押し込み、もう一方はページ全体と整合させながら、余白を控えめにします。後者なら、大きさや太さを変えなくても落ち着くかもしれません。

広い画面では逆の問題が出ます。タイトルをページ全幅に伸ばすと、長い横一線になり、下の内容との関係が弱くなることがあります。最大幅で、編集上の形を保てます。文字数が行長を保証すると考えず、実際の見出しで幅を選びます。

文字の幅は同じではありません。細い文字十二個が入る列に、幅の広い文字十二個が入るとは限りません。タイポグラフィの単位は出発点になりますが、根拠は描画された言葉です。ブランド名や技術用語を分割できない場合には、とくに重要です。

際限なく拡大せず、範囲を選ぶ

少数の段階で変えても、連続的に変えてもかまいません。下限と上限が妥当なら、どちらも使えます。重要なのは、意図して設計した画面の間でどう振る舞うかです。

web.devのタイポグラフィの教材は、流動的なサイズを説明し、文字サイズにビューポート単位だけを使わないよう注意しています。フォント選びだけで読む体験は決まらない、という広い視点も役立ちます。相対的な文字サイズの成分を残し、読む人がズームや文字設定を変えた結果を試します。

範囲の中間も見ます。最小と最大でよくても、その間で不自然な三行になることがあります。急な切り替えをもう一つ増やすより、列や増加率の調整が効くかもしれません。文章が変わった後も保守できる程度に、分かりやすいルールにします。

言葉の内外の空間を整える

行高：一つのフレーズとして保つ

行間は、複数行の見出しを一つの読みやすいまとまりにする距離です。狭すぎると、とくに背の高い大文字や下に伸びる文字の周りで、隣の行がぶつかって見えます。広すぎると、無関係なラベルがいくつもあるように見えます。

設定パネルの数字だけでなく、実際の字形を比べます。小文字の高さが大きい書体は、別の書体でよい設定でも詰まって感じられます。太い文字は暗い部分が多いため、隙間が小さく見えることがあります。アクセント付きの文字で、元のサンプルには狭すぎた行ボックスの問題が出ることもあります。

レビューには、大文字、小文字、句読点が混じる見出しを使います。「WORK BETTER」は、実際の大小文字の混じった文の代わりとしては弱く、重要な字形を隠します。複数言語を扱うなら、その文字体系も後に試す必要があります。

見出しの下の余白は、別に判断します。 段落までの距離を増やすために行間を広げると、見出しの内部が変わり、違う結果になるかもしれません。段落との間隔に独自の値を持たせ、二つがつながって感じられるかを見ます。

字間：単語の形を保つ

行に余裕があっても圧縮されて感じるなら、字間に目を向けます。大きな静止画では劇的に見える強いマイナスの字間も、小さく表示すると不快になり得ます。細い文字と太い文字でも、同じ設定の印象は変わります。

書体の標準の字間から始め、少しずつ比べます。丸い文字、斜めの線、縦棒が続く組み合わせを見ます。最初の一語だけで判断してはいけません。calmerにはよい調整でも、別の部分では間延びするかもしれません。

単語が一つの形に見えることを保ちます。字間を広げすぎると認識が遅れ、文が孤立した文字列になります。幅も増えるので、取り除きたかった折り返しが生まれることがあります。長いタイトルでは、字間と列幅を一緒に評価します。

大文字だけの見出しと、通常の文の見出しを同じに扱わないようにします。大文字の小さな肩見出しなら少し広い間隔がよくても、長い文の見出しには控えめな設定が向く場合があります。文字の役割を支えるためです。小さなラベルからコピーしたスタイルは、主タイトルのよい規則にはなりにくいものです。

折り返し：壊れやすい手動改行を避ける

意図した改行は、一つの構成をよくしても、もろくすることがあります。プロジェクト管理の見出しでmanageの後に改行を入れると、広い画面では末尾が美しく収まるかもしれません。狭い画面では、その前がすでに折り返して、予想外の一行が増えることがあります。

手動改行の前に、幅とサイズの範囲を調整します。それでもデザインに必要なら、どの条件で使うかを記し、その外も確認します。英語で選んだ改行を、すべての翻訳で維持する必要があるとは考えないでください。

好みの形を守るためだけに、長いフレーズをひと続きに固定しないようにします。全面的に折り返しを防ぐと、はみ出したり読めないほど小さくしたりする必要が出ます。短い値と単位のように、分割が意味を損なう場合に限定し、その後で残る空間を確認します。

末尾の行が短すぎるときは、意味を失わず文章を編集できないかも考えます。不要な句を取れば、文と見た目の両方がよくなるかもしれません。ただしタイポグラフィのために、製品の制限、意味のある条件、内容を識別する用語を削らせてはいけません。

色と太さで、階層を支える

大きなタイトルに、すべての強調を同時に使う必要はありません。太い文字、詰めた字間、明るいグラデーション、強い影は、一つの塊の中で競合することがあります。何で目立たせるかを決め、ほかを抑えます。

色鮮やかなイラストがあるページなら、暗い単色の見出しが最も明確な読む順序を作るかもしれません。微妙なグラデーションが必要なデザインでは、明るい部分も背景に対して読めるか確かめます。大きければ明確なタイトルも、小さくしたり明るい絵の横に置いたりすると、コントラストを失うことがあります。

補助情報は、極端に薄くする前に、大きさ、太さ、位置の組み合わせで区別します。控えめな副題も読みやすい必要があります。キャプションやラベルも同じです。ほぼ見えなくするのは、役立つ階層ではなく、情報の削除です。

一瞬の見渡しと、続けて読む場合を比べます。一瞬で主題が分かり、近くで読めば無理なく詳細が分かるべきです。すべての見出しが同じ声量なら、アクセント色を足すより、いくつかを細く、小さくするほうが効くかもしれません。

実際に読み込まれるフォントを試す

意図したフォントが使えるようになったときも、読み込めなかったときも、見た目は変わります。字幅が違えば、折り返しが変わり、近くの内容を押すかもしれません。全員がすぐ同じ文字を見ると考えず、代替フォントも確認に含めます。

開発のレビューでは、実際に描画しているフォントと、期待する太さが存在するかを確認します。ファイルにない太さを指定すると、意図しない結果になることがあります。妙に太い、細長いと感じたら、字間で補う前に、ファイルを確かめます。

形が変わったときの配置の影響を見ます。段落が下へ跳ぶか。バッジが見出しに重なるか。固定高のヒーローが最終行を切るか。「フォントが違って見える」より、レイアウトが受け止める条件を特定する観察が役立ちます。

代替フォントがブランド書体とまったく同じである必要はありませんが、ページは使えるべきです。タイトルの行数が変わっても壊れないだけの柔軟さを残します。ブランドを正確に表すことが重要でも、読み込み条件が変わる現実と両立する必要があります。

短い見出しレビューをする

主タイトル、長いセクション見出し、通常使う最長のカード見出しの三つを選びます。見本として切り離さず、周囲の内容とともに確認します。狭い、中間、広い表示を見た後、その間を変え、急な変化を探します。

各表示でフレーズ全体を読みます。折り返しが意味を保つか、内部の間隔は快適か、段落と区別できるかを見ます。その後、ブラウザーを拡大し、必要な読む作業を繰り返します。特定のサイズ指定ならよいはずと考えず、結果を観察します。

保守の確認には、もっと長い別の見出しを使います。この例なら「A calmer way to manage projects across distributed teams」に変えます。その文章を採用するためではありません。妥当な編集上の変更に、個別の修理なしで対応できるかを調べるためです。

判断は普通の言葉で残します。「狭い画面では一行増えてよい。文は維持し、セクションを伸ばす」。すべてのサイズで一枚のスクリーンショットの行数を守るより長く役立ちます。デザインが大切にするものと、変えてよいものが次の編集者に伝わります。

OpenDesignで、修正を具体的にする

OpenDesignのHTMLプレビューとデスクトップ、タブレット、モバイルの表示で、同じ見出しを比較できます。焦点を絞るには、対象の見出しと、何が不快だったかを示します。間隔や対応するスタイルだけなら手動編集で十分かもしれません。構造の変更なら、守る条件とともにチャットで伝えられます。

例えば、文章と書体を維持し、窮屈な字間を緩め、狭い表示では一行増えてよいと求めます。これなら、修正を文字の問題に保てます。ヒーロー全体に高級感を、と曖昧に頼むと、絵、色、文まで変わり、もとの読みづらさが残るかもしれません。

変更後は、三つの見出しすべてに戻ります。共有スタイルは、注目していたタイトル以外にも影響します。関係する表示を比べ、補足の文章も意図した役割を保っていることを確かめます。