The Proportional Web — プロポーショナル幅タイポグラフィのためのWebスタイルシート

(owickstrom.github.io)

1 ポイント投稿者 GN⁺ 3 시간 전 | 1件のコメント | WhatsAppで共有

The Proportional Webは、Robert Bringhurstの『The Elements of Typographic Style』から一部の原則を取り入れてブラウザに適用したデザインであり、The Monospace Webのプロポーショナル幅版の後継で、再利用可能なスタイルシートでもある
本文にはAlegreyaとAlegreya SC、コードにはCourier Primeを使用し、16pxのルートフォントとrem、1.2remの行高を基準に、サイズと垂直リズムを一貫して揃える
現代ブラウザのword-break、text-wrap、hyphensを活用して両端揃えを適用する一方、単語間隔や空白の川（river）が悪化するならtext-align: leftを使うことを推奨している
セマンティックなHTML5を中心に、見出し、引用、図、表、コードブロックをスタイリングし、広い画面のサイドノートは右余白に置き、小さい画面では装飾付きのインライン段落へ切り替える
書籍・ジャーナル・ブログ・マニュアル・Wikiのような散文中心の文書に適しており、動的Webアプリケーションには推奨されない。GitHubのソースをダウンロードしてCSSとJavaScriptを追加したり、Pandocと併用したりできる

The Monospace Webからプロポーショナル幅へ

The Monospace Webは、個人ブログやアプリケーションインターフェイスに採用されるほど、予想以上に広く広がった
The Proportional Webはそのプロジェクトの精神的後継であり、等幅ではなくプロポーショナル幅フォントを使いながら、自由に再利用できるよう設計されている
Robert Bringhurstの『The Elements of Typographic Style』を読んだ後、本のレイアウトとタイポグラフィをブラウザで実装する作業として始まった
印刷物と異なり、Webには固定されたページサイズがなく、プログラム可能なプラットフォームでもあるという違いがあるため、同じ規則をそのまま適用するのは難しい
- 代わりに、有用または見た目が良いと判断した要素を選んで使えるよう公開している
HTML生成にはPandocを使用したが、スタイルシートは少し修正すれば他の環境でも動作し得る

フォント体系

複数の書体を混ぜるより、1つの多用途な書体を選ぶというBringhurstの原則をデザインの基盤にしている
Alegreyaファミリーは用途に応じて使い分ける
- Alegreya Regularは本文と第3レベルの見出しに適用する
- Alegreya SCは、タイトルケースの第1レベル見出し、小型大文字で表示する第2レベル見出し、HTMLのようなインライン略語に使用する
等幅のコード断片にはCourier Primeを適用する

相対単位と垂直リズム

すべてのサイズは16pxのルートフォントサイズを基準にrem単位で指定する
標準サイズは0.75・0.875・1・1.125・1.25・1.375・1.5・2・2.5・3・4remで、それぞれ12・14・16・18・20・22・24・32・40・48・64pxに相当する
ルートフォントサイズだけを変えれば、デザイン全体をまとめて拡大・縮小できる
- 例えば画面幅が480px以下のとき、:rootのfont-sizeを14pxに変更できる
行高は1.2remであり、すべての要素の垂直方向の揃えをこの値の倍数に合わせようとしている
The Monospace Webほど極端に適用するわけではないが、文書全体で共通の整列リズムを保つ

現代ブラウザで実装した両端揃え

Bringhurstの本のように、本文を右側ラグ組みではなく両端揃えで配置する
Webでは両端揃えを避けるべきだという認識が強いが、改善されたブラウザ機能を踏まえれば再び試せると判断している
改行とハイフネーションは次のCSSプロパティで制御する
- word-break
- text-wrap
- hyphens
- ハイフネーションの適用範囲を制御するhyphenate-limit-chars
両端揃えには、単語間隔が過度に広がったり、段落に空白の**川（river）**が生じたりするリスクがある
現在の文書は、行長、フォントサイズ、コンテンツの組み合わせにおいて無難な結果を出しており、扱いにくい一部の単語にはソフトハイフンを手動で入れている
コンテンツに合わない場合は、text-align: leftに変える方が適切である

段落インデントと色

連続する段落には、3つの0文字幅に相当する3chインデントを適用する
段落の始まりと終わりを視覚的に見つけやすくするための方法で、印刷物では少なくとも500年にわたり使われてきた
Webでは通常、インデントの代わりに段落間に縦の余白を置くが、伝統的なインデントも依然として有効な選択肢である
色は白い背景と黒いテキストに限定する
- 散文中心文書のデフォルトとして、ミニマルな構成を好んでいる
- 色を温存しておけば、複雑なデータを伝える図表のような最も重要な要素に読者の注意を集中させられる

セマンティックHTMLと見出し・強調

一部の追加クラスを除けば、ほとんどはセマンティックなHTML5マークアップだけで構成している
見出しは3段階でスタイリングする
- h1: 章単位の最上位見出し
- h2: セクション見出し
- h3: サブセクション見出し
<em>要素は一般的な期待どおりイタリック体で表示する

区切り線と折りたたみ式の詳細情報

Bringhurstの本には水平区切り線に関する明確な指針がないため、これを装飾要素として活用している
区切り線にはUnicode DingbatsブロックのU+2767 Rotated Floral Heart Bullet記号を使用する
<details>要素を使うと、ラベルを押して展開できる情報を隠しておける

サイドノートと固有名

Bringhurstが使ったサイドノートは、HTMLの<aside>で実装する
画面が十分に広い場合は、前の段落の上端に合わせて右余白に表示する
小さい画面では、装飾を含むインライン段落へ折り込んでレスポンシブに処理する
.canonical-nameクラスで区別した固有名と正式名称は、Bringhurstの例のように小型大文字でレンダリングする

引用と図

ブロック引用は、インデントされたブロックと本文周囲の引用符で構成する
フッターには著者・作品・年を配置する
画像とキャプションは、それぞれ<figure>と<figcaption>要素に入れる
図の作者と作品名には、引用と同様に小型大文字とイタリック体を使い、同じインデント体系を共有する

リストと表

箇条書きリストと順序付きリストをサポートし、順序付きリストのネスト構造も一般的な形で表示する
表ヘッダーには小型大文字ラベルと罫線を使って強く区別する
残りの表デザインは装飾を抑え、間隔に依存するシンプルな構成である

コード表現

デザイン全体はコード中心の技術文書よりも散文中心の文書に合わせているが、コードブロックとインラインコードも読みやすく構成している
コードにはタイプライターのような懐かしさを与えるCourier Primeを使い、Alegreyaおよび全体のデザインの雰囲気と調和させている
基本スタイル変数には、フォント、行高、罫線の太さ、テキスト色と背景色が含まれる
- --font-family: "Alegreya", serif
- --line-height: 1.2
- --border-thickness: 1.5px
- --text-color: #000
- --background-color: #fff

適した用途とライセンス

書籍、ジャーナル、ブログ、マニュアルのような散文中心のWeb文書のためのデザインである
個人Webサイト、特定プロジェクト、またはより大きなWikiの基盤として使える
動的に動作するWebアプリケーションには適さない可能性が高い
必要な部分をコピーしたりフォークして修正したりできるが、適切な著作者表示が必要である
ソースファイルヘッダーのライセンス情報を維持することで、表示条件を満たせる

インストールとPandocの使い方

すばやく始めるには、GitHubソースをダウンロードし、プロジェクトのthe-proportional-webディレクトリに配置する
HTMLのheadには次のファイルを追加する
- the-proportional-web/index.min.css
- the-proportional-web/index.js
Pandocでは、目次の深さ、セクション番号、CSS、JavaScript、シンタックスハイライトの無効化などの引数を指定して、MarkdownをHTMLへ変換できる
シンタックスハイライトが必要なら、このHTML出力に使ったテンプレートのようなカスタムテンプレートを検討できる
この場合、Pandocがデフォルトで含めるCSSはカスタムテンプレートから削除する必要がある

適用範囲と制作ツール

Bringhurstの方法論全体ではなく、一部のアイデアだけを取り入れてWeb向けに調整している
文書制作には次のツールを使用する
- Pandoc
- html-minifier
- esbuild
- GNU Make
デザインのアイデアと実際のレイアウトは、Robert Bringhurstの『The Elements of Typographic Style』から大きく取り入れている

1件のコメント

GN⁺ 3 시간 전

Lobste.rsのコメント

次のようにフォントサイズをピクセル値で指定するとアクセシビリティを損なうため、避けるべき
```
@media screen and (max-width: 480px) {  
  :root {  
    font-size: 14px;  
  }  
}  
```
- CSSのpx単位は、もはや物理ピクセルと1:1で対応しておらず、max(1/96in, 1 pixel)を意味する
- 私が好む方法は、:rootのfont-sizeを0.625に設定して1remを10pxに対応させ、bodyには1.6remや2remを指定してページ全体に継承させること
  フォントにはpx、特にwvやwhを使わず、remまたはemを使い、フォントサイズに合わせて拡大する必要のないレイアウトには主にpx、wv、whなどを使えばよい
  視力の弱いユーザーがブラウザのテキストサイズ変更機能を利用できるよう、フォントにはpxよりもemやremを強く推奨する
  フォントサイズにwvやwhを使うと、デスクトップでCtrl-+で拡大したときにinnerWidthとinnerHeightも同じ比率で小さくなり、テキストサイズがそのままなので避けるべき。大画面でだけ少し大きくするfont-size: calc(1.6rem + 2wv)のような控えめな混在利用は問題ない
- ブラウザの既定のフォントサイズは変えないほうがよい。単純なテキスト文書なら問題ないが、Webの大半ではレイアウトが崩れる可能性がある
  複雑なWebサイトが任意のフォントサイズをすべて処理するように設計するのは事実上難しく、デザイン上の制約も非常に大きくなる
  視覚障害などアクセシビリティ上の必要があるなら、ブラウザの既定のズーム率を変えるべき。そうすればサイト側は任意のビューポートサイズを自然に処理する一般的なレスポンシブ設計だけを担当すればよく、現実的に可能になる
  以前のブラウザはユーザーにフォントサイズを直接調整させていたが、ユーザー体験が良くなかったため、何十年も前からページ全体をズームする方式に移行した
モバイルでも読めるように作られているのか疑問
Bringhurstの本にあるタイポグラフィをかなりよく再現していて印象的
ただし、行の高さが固定された均一なグリッドから時々外れる。たとえばCourierに設定されたテキストが1行に混ざると、行の高さがわずかに大きくなる
- これを防ぐには<code>に**line-height: 1**を指定する必要がある。0のほうがよいかについて合意があるのかは分からない
  また『The Elements of Typographic Style』に従うなら、箇条書きと番号付きリストの記号を余白に配置する必要があるが、これが明示的な要件だったかは覚えていない
古典的なタイポグラフィ本を探究した成果がすばらしく、オンラインでこうした制約ベースのデザインをもっと見られるのはうれしい
この分野では、2009年に出た http://lamb.cc/typograph/ が今でも私にとって最高
相対的なサイズ調整はすばらしいが、ルートフォントサイズを上書きすることは間違いだと思う
サイトはユーザーのフォントサイズ設定を尊重すべきであり、比率と関係性を基準に設計する相対的なサイズ体系はそれによく合っている
テキストが最も重要で、表現方法は重要ではないふりをするのは簡単だが、丁寧に設計されたページレイアウトはブログ記事や小説、記事をずっとプロらしく見せる
優れたページ組版はある程度忘れられた技術になりつつあり、こうした試みは歓迎したい
初期にtuft.cssを導入し、数年間調整が必要だったが、今までうまく活用してきた。これはいくつかの面ではより良く見えるが、乗り換えるほどではない

The Proportional Web — プロポーショナル幅タイポグラフィのためのWebスタイルシート

The Monospace Webからプロポーショナル幅へ

フォント体系

相対単位と垂直リズム

現代ブラウザで実装した両端揃え

段落インデントと色

セマンティックHTMLと見出し・強調

区切り線と折りたたみ式の詳細情報

サイドノートと固有名

引用と図

リストと表

コード表現

適した用途とライセンス

インストールとPandocの使い方

関連するタイポグラフィプロジェクト

適用範囲と制作ツール

関連記事

1件のコメント

Lobste.rsのコメント