文字を正しい枠に収めても、組版の仕事は終わらない。字面、数字の幅、アイコンの重さによって、行全体の安定感は変わる。
まず改行と更新される数値を扱い、次に字形、混植、アイコンを見る。以下の値は固定した試料のもので、書体や言語、内容が変われば見直しが必要だ。
この記事は元の文章を再編し、内容を加えたものだ。数値は各試料の条件を示し、あらゆる画面に共通する設定ではない。シリーズの背景とツールは 総論。
改行と数値
改行も構図の一部にする
見出しの最終行に短い単語だけが残ると、その下の余白が片側に偏りやすい。バランスを取る折り返し（balanced wrapping） は指定幅の中で文字を再配分し、行ごとの分量を近づける。この対照は行幅220 px、文言、文字サイズ、字間を固定し、折り返し方だけを変えた。
短い説明では、各行の重みをそろえる必要はない。自然な長短を残しつつ、最終行だけが極端に短くならないかを見たい。prettyによる折り返し（pretty wrapping） は、ブラウザーに改行位置を調整する余地を与える。次の対照でも文言と行幅を固定した。
この選択は実際の文言と一緒に見る必要がある。見出しには意味の切れ目があり、短文には読みやすい幅がある。英単語と繁体字中国語の句読点では改行条件が異なり、ブラウザーの結果も変わりうる。まず容器に適切な伸縮性を持たせ、狭い画面と長い翻訳を確かめてから、balancedやprettyを採るか決めたい。
数字が変わるとき、まず各桁を安定させる
タイマーが11:11から08:08に変わるとき、字形の幅が異なれば文字列全体の分量も変わる。等幅数字（tabular figures） は各桁を同じ幅にし、更新される値、カウンター、一覧する数値列に向く。
主な数字は両側ともGeistで、文字サイズと内容も同じだ。変えるのはプロポーショナル数字と等幅数字の機能だけ。小さな注記は別の等幅書体を使っており、この字幅比較には含めない。
桁が増える分の場所も先に取る
各桁が等幅でも、文字列全体が長くなる問題は残る。9から99、100へ増えれば文字数は変わる。次の図は両側とも等幅数字を有効にし、右だけさらに3桁分の幅を確保して右揃えにした。これで後ろの説明の始点を保てる。
3桁はこのカウンターで想定した範囲だ。桁区切り、負号、さらに大きな数が入るなら場所を取り直す。日付、カウントダウン、割合にもそれぞれ最長の形式がある。数値は確保した領域内で変え、その周りの文字や操作を安定させたい。
金額を小数点に沿って揃える
同じ列の金額を素早く比べるには、表示精度、数字幅、揃える方向を一緒に決める必要がある。この図は負数を加え、小数点以下2桁、等幅数字に固定し、金額の整列方向だけを変えた。右揃えにすると、小数点と一の位を同じ線に並べられる。
単位は独立した、少し控えめな列に置き、金額から一定の距離を取る。ここで小数点が揃うのは表示精度が同じだからだ。同じ列で小数桁数を混在させる必要があれば、整数部と小数部も分けて並べたい。負号は値の一部として残し、整列のために省かない。等幅数字は出発点であり、実際の書体のカーニングも配置に影響しうる。機能が有効かだけでなく、同じ正負の金額で確かめている。
字面とアイコン
中央に置いたあと、見える形を見る
光学的な中央揃え（optical centering） は見える形の重みを扱う。右向き三角形は左側に面積が寄るため、外接枠を中央にしても左寄りに見えることがある。ここではボタンを固定し、同じ図形だけを右に1 px動かした。この値は図の三角形に属し、別のアイコンなら見直しが必要だ。
文字枠を中央にしたあと、字面の高さを見る
文字のレイアウト範囲には書体が上下に確保する空間があり、見える字面はその一部だ。flexで中央に揃えても、ボタンの文字が少し上や下に見えることがある。図は同じSave、同じ書体、同じ行高で、左は文字枠を残し、右は大文字高とベースラインで上下を修整してから、同じ高さのボタンに置いた。
文字ボックスの修整（text-box trimming） は、この空間を書体の縁に基づいて扱う。細い角の印と中央線は差を見るためのものだ。実際にはアセンダー、ディセンダー、隣のアイコンも確かめる。繁体字中国語、かな、韓国語は各書体の字面で判断し直す必要があり、英語のcap／baselineの値だけですべての言語を光学的に中央へ置くことはできない。未対応環境では元の文字枠による配置を保つ。
字面を見てから混植を整える
同じ24 pxでも、漢字、仮名、ハングル、欧文は異なる大きさに見えることがある。文字サイズが示すのは字枠であり、目に見える字面はその一部だ。字面の比率や位置は書体、ウェイト、実際の文字列で変わる。隣にアイコンがあるときも、外枠の中心だけでなく、見える形を組み合わせて判断する。
言語指定とフォールバックの順序も先に決める。中国語、日本語、韓国語には地域に適した字形が必要で、一つの混植文字列を複数のフォントが描画することもある。CSSのfamily名だけでは、各文字の描画元は分からない。W3Cの中国語組版要件でも、地域差と字面を取り上げている。
前のcap／alphabeticによるトリミングは、あの欧文ラベルを説明するためのものだ。CJKではideographicの境界も検討できるが、実際のフォント情報とブラウザーの対応を確認する。欧文、数字、上付き文字を含む場合は全体で判断し、未対応の環境では通常の字枠を保つ。
字間、約物、改行を一緒に考える
空白にも種類がある。字間は文字同士の距離、文字種間の空きは漢字・仮名と欧文・数字の境界、約物の空きは約物自体が持つ余白だ。文章全体の字間を詰めるだけでは、それぞれを独立して調整できない。
text-autospace は本文を変更せずに組版時の空きを加えられるが、既存のスペースも確認が必要だ。text-spacing-trim は一部のCJK約物の空きを扱い、上下の字枠を整えるtext-boxとは別の機能だ。対応状況を個別に確認し、韓国語の分かち書きもその言語の慣習に沿って判断する。CSS Textに各機能の定義がある。
狭い画面では、実際の見出しや説明、長い翻訳文から確認する。中国語の例ではInterfaceCraftを一つの単語として保ち、日本語では小書き仮名の禁則、韓国語では音節単位と語単位の改行を比べる。本文の行間、短いラベル、複数行の見出しはそれぞれ調整し、文字が拡大されたらコンテナーも伸びるようにする。
アイコン側の余白を、見える分量で調整する
文字に矢印を添えると、矢印の周りの空間もまとまりの重みに加わる。ここでは文字、図形、間隔、上下の内側余白を固定し、アイコン側の水平内側余白だけを16 pxから14 pxにして、組み合わせを少し引き締めた。
2 pxはこの矢印と文字列の調整量だ。塗りつぶしアイコン、別の書体、文字より前のアイコンなら、まとまり全体を見直したい。アイコンが自分のキャンバス内ですでに偏っているなら、先に原稿を直すことで、ボタン側の補正をひとつ減らせる。
小さいアイコンは線幅を考え直す
線の太さ（stroke weight） も、図形全体と一緒に縮小すればよいとは限らない。この14 pxフォルダーでは、左は24 px原稿の1.5 px線を同比率で0.875 pxへ縮め、右は1.25 pxへ修整している。図形の寸法は変えず、最終的な線を調整した。
私は原寸で、線端、角、内部余白、隣の文字を一緒に見る。このアイコンに必要な重みが、もっと密な形にも合うとは限らない。
小ラベルには独自の字間を持たせる
英語の全大文字ラベルは数字や見出しの近くに置かれることが多い。文字が詰まりすぎると、小さい字が重い塊に見える。字間（tracking） を少し開けると、明瞭なリズムを保ちやすい。
この比較では10 px、ウェイト500、同じ全大文字ラベルを固定し、字間0と0.05 emだけを比べる。下の内容も、ラベルからの距離も変えていない。
文字サイズ、太さ、長さも一緒に判断する。この大文字ラベルは少し空気を入れるのが合う一方、繁体字中国語の小見出しや本文は字面の密度が異なる。役割ごとに重みを整え、文章全体の階層は単純に保ちたい。
数値の更新、言語の切り替え、文字の拡大をした後で、私は行全体をもう一度見る。字枠、字面の釣り合い、情報の整列は別々の確認事項だ。実際の内容でも成立して初めて、微調整に意味が生まれる。