サイトを作りはじめるとき、最初に読み込むリセットCSSには余白やボックスの扱いをそろえる指定を入れるのが定番でした。ところが最近は、行の折り返し方や行の上下の余白、フォントの細かな調整まで、CSSだけで決められる範囲が広がっています。海外の制作系メディアCSS-Tricksに、こうした文字組みの指定を一枚のスタイルシートにまとめた記事が載りました。中身を追いながら、どこまでを最初から入れてよいのか、どこからが様子見なのかを整理してみます。

リセットCSSの役目が文字組みまで広がってきた

記事が紹介しているのは、tidy-typography.cssという名前のスタイルシートです。描画まわりの下ごしらえ、可変の文字サイズ、縦方向のリズム、折り返し、ハイフンでの分割、OpenTypeの機能といった項目を、既定のスタイルとしてひとまとめにしています。全部を使ってもよいし、いま困っている箇所に効く宣言だけを抜き出してもよい、という立て付けです。

筆者が強調しているのは、これらの多くが、これまで別の場所に漏れ出していた作業を引き取るものだという点です。段落の最後に一語だけ残るのを防ぐJavaScript、行間のぶんを打ち消すための負のマージン、部品ごとに書き足していたメディアクエリ。そうした後付けの手当てを、CSSの宣言に置き換えていけるという見方です。

一方で、一部の機能は実験的でブラウザごとの対応にばらつきがあり、何も考えずに入れるのではなく歯止めを添える必要がある、とも書かれています。新しい指定を並べて見せる記事というより、初期スタイルに何を入れるかを考え直す材料として読むのがよさそうです。

行の折り返しをブラウザに任せる

いちばん取り入れやすいのが折り返しの指定です。見出しや引用、図の説明にはtext-wrap: balanceを当て、各行の長さをそろえます。最後の行に短い語だけが残る、あの落ち着かない見え方を避けられます。本文の段落やリストにはtext-wrap: prettyを当て、段落全体をそろえることはせずに、最後の行に一語だけ取り残されるのを防ぎます。

MDNの解説を合わせて読むと、使い分けの理由がわかります。balanceは行ごとの文字数を数えてそろえるため計算の負荷が高く、対象になる行数に上限があります。Chromium系では6行まで、Firefoxでは10行までです。行数が限られているぶん、表示速度への影響はごく小さいとされています。prettyのほうは、速さよりも仕上がりを優先する遅めの計算方法を使うため、表示速度には不利に働きます。MDNは、見た目のほうが大事な長めの文章に絞って使うよう勧めています。

もうひとつ、編集できる領域にはtext-wrap: stableを当てる、という指定も入っています。文字を打つたびに前の行まで組み直されるのを防ぐためのものです。問い合わせフォームの入力欄ではあまり意識しませんが、contenteditableを使った編集画面を作るときには効いてきます。

行の上下の余白を削る指定がそろった

行の高さには、大文字の上端より上と、ベースラインより下に、目に見えない余白が含まれています。文字だけを見ているぶんには気になりませんが、アイコンや画像、枠線と文字をぴったりそろえたいときに、この余白がずれの原因になります。これまではフォントごとに負のマージンで微調整するのが現場の定番でした。

text-box-trimはこの余白を削る指定で、どこまで削るかは対になるtext-box-edgeで決めます。記事では、上は大文字の高さ、下はベースラインに合わせる組み合わせを、見出しと段落、引用、リスト項目にまとめて当てています。二つをまとめて書けるtext-boxという短縮形もあります。

MDNによると、text-box-trimは今年8月から主要ブラウザの最新版でそろって使えるようになりました。ただし、そろったばかりの段階なので、古い端末や古い版のブラウザでは効かないことがあります。効かない環境では余白が残るだけで表示が壊れるわけではありませんが、余白が削られる前提でまわりの間隔を詰めてしまうと、未対応の環境では逆に間延びして見えます。

記事にはもうひとつ、見出しの各レベルをまとめて指す:headingという書き方も登場します。こちらはまだどのブラウザにも入っていないため、対応を確かめる@supportsの中に閉じ込めておくよう書かれています。最終版のスタイルシートでは、見出しのタグを:is()で並べる従来どおりの書き方が使われていました。

文字サイズを画面幅ではなく入れ物の幅に合わせる

画面幅に応じて文字サイズをなめらかに変える手法は、すでに広く使われています。ただ、画面幅を基準にすると、その文字が入っている場所の幅まではわかりません。記事が挙げているのは、幅の狭いサイドバーに置いた見出しが、画面いっぱいに広がっているつもりで大きくなってしまう例です。

そこで、包む要素にcontainer-type: inline-sizeを指定し、clamp()の中のvwを、入れ物の幅を基準にする単位cqiに置き換えます。同じ見出しが、記事の本文欄でも幅300pxのサイドバーでも、その場所に合った大きさになります。部品ごとにメディアクエリを書き足す必要がなくなる、というのが筆者の説明です。

ブロックの組み合わせでページを作るWordPressのサイトでは、同じ見出しがカラムの中にも全幅の帯にも置かれます。置き場所で大きさを決める考え方は、こうした作り方と相性がよさそうです。

フォントが持っている情報を使う細かな指定

後半には、フォント自身が持っている情報を引き出す指定が並びます。font-synthesis: noneは、太字や斜体の書体が用意されていないときに、ブラウザが見かけだけの太字や斜体を作り出すのを止めます。font-size-adjust: from-fontは、ウェブフォントが読み込まれて代替フォントと入れ替わる瞬間の、見かけの大きさの変化を小さくします。

可変フォント向けの工夫もあります。暗い背景の上の明るい文字は、同じ太さでも重く見えます。フォントにグレードという軸がある場合、ダークモードのときだけその値を下げて、字の形や幅を変えずに見かけの重さを調整する書き方が示されています。軸を持たないフォントでは、この指定は無視されるだけです。

引用符の扱いも目を引きます。言語ごとに違う引用符の種類と入れ子の順番をquotesで宣言しておき、q要素に自動で付けさせる方法です。どの指定も:where()で包んで詳細度をゼロにしてあり、案件側のクラスひとつで上書きできます。初期スタイルは意見を持った既定値であり、後から覆せる形にしておくべきだ、という筆者の考え方がここに出ています。

日本語のサイトに持ち込むときに確かめたいこと

このスタイルシートは欧文を前提に組まれています。単語の途中にハイフンを入れて行を分けるhyphensまわりの細かな調整は、lang属性に合った辞書をブラウザが使う仕組みで、英語の文章が混じる箇所でなければ日本語のサイトで出番は多くありません。上下の余白を削る基準も、大文字の高さとベースラインという欧文の物差しです。日本語の書体でどう見えるかは、使うフォントごとに実機で確かめたほうがよさそうです。

font-synthesis: noneも、少し立ち止まりたい指定です。太字の書体を持たないフォントを使っているサイトにそのまま入れると、ブラウザが作っていた見かけの太字がなくなり、強調したつもりの箇所が強調されなくなるおそれがあります。入れる前に、使っているフォントがどの太さまで持っているかを見ておくと安心です。

筆者自身も、ここに並べた指定のいくつかは、土台のリセットに入れるにはまだ新しすぎると書いています。未対応のブラウザでは宣言が無視されるだけですが、それが助けになるのは、指定が効かない状態の文字組みがそれだけで見られるものになっている場合に限られます。ニュース記事と宣伝用のページ、編集できる管理画面とでは、文字に求めるものが違います。

折り返しの指定のように効かなくても困らないものから入れ、余白の切り詰めのようにまわりの寸法に響くものは、対象のブラウザを決めてから入れる。そのくらいの順番で、自分たちの初期スタイルを少しずつ育てていくのがよさそうです。