タイポグラフィ変換
グーテンベルグから Retina へ:タイポグラフィ単位をマスターする
タイポグラフィ単位は、印刷、ウェブ、モバイルの各プラットフォームにおけるデザインの基礎を形成します。1700年代に確立された伝統的なポイントシステムから、現代のピクセルベースの測定法まで、これらの単位を理解することは、デザイナー、開発者、そしてテキストを扱うすべての人にとって不可欠です。この包括的なガイドでは、22以上のタイポグラフィ単位、その歴史的背景、実用的な応用、そしてプロフェッショナルな作業のための変換テクニックについて解説します。
基本概念:タイポグラフィ測定の理解
ポイント(pt)
タイポグラフィの絶対単位、1/72インチとして標準化
ポイントはフォントサイズ、行間(リーディング)、その他のタイポグラフィの寸法を測定します。12ptのフォントとは、最も低いディセンダーから最も高いアセンダーまでの距離が12ポイント(1/6インチまたは4.23mm)であることを意味します。ポイントシステムは、メディア間で一貫して変換されるデバイス非依存の測定を提供します。
例:12pt Times New Roman = 高さ0.1667インチ = 4.23mm。プロフェッショナルの本文テキストは通常10-12ptを使用し、見出しは18-72ptを使用します。
ピクセル(px)
画面または画像上の単一の点を表すデジタル単位
ピクセルは、画面の密度(DPI/PPI)によって変化するデバイス依存の単位です。同じピクセル数でも、低解像度ディスプレイ(72 PPI)では大きく、高解像度の Retina ディスプレイ(220+ PPI)では小さく表示されます。DPI/PPIの関係を理解することは、デバイス間で一貫したタイポグラフィを実現するために不可欠です。
例:96 DPIで16px = 12pt。同じ16pxが300 DPI(印刷)では3.84ptになります。ピクセルを変換する際は、必ずターゲットDPIを指定してください。
パイカ(pc)
12ポイントまたは1/6インチに等しい伝統的なタイポグラフィ単位
パイカは、伝統的な印刷デザインにおいて、段組みの幅、マージン、ページレイアウトの寸法を測定します。 InDesign や QuarkXPress などのデスクトップパブリッシングソフトウェアでは、パイカがデフォルトの測定単位として使用されます。1パイカは正確に12ポイントに等しく、変換が容易です。
例:標準的な新聞の段組みは15パイカ幅(2.5インチまたは180ポイント)かもしれません。雑誌のレイアウトでは、しばしば30〜40パイカの測定が使用されます。
- 1ポイント(pt)= 1/72インチ = 0.3528 mm — 絶対的な物理的測定
- 1パイカ(pc)= 12ポイント = 1/6インチ — レイアウトと段組み幅の標準
- ピクセルはデバイスに依存する:96 DPI( Windows )、72 DPI(旧 Mac )、300 DPI(印刷)
- PostScript ポイント(1984年)は何世紀にもわたる互換性のないタイポグラフィシステムを統一した
- デジタルタイポグラフィはデザインにポイントを、実装にピクセルを使用する
- DPI/PPIがピクセルからポイントへの変換を決定する:DPIが高いほど物理的なサイズは小さくなる
簡単な変換例
タイポグラフィ測定の進化
中世および近世初期(1450-1737)
1450–1737
活版印刷の誕生により標準化された測定の必要性が生まれたが、地域的なシステムは何世紀にもわたって互換性がなかった。
- 1450年:グーテンベルグの印刷機が標準化された活字サイズの必要性を生み出す
- 1500年代:活字サイズは聖書の版にちなんで名付けられる(キケロ、アウグスティヌスなど)
- 1600年代:ヨーロッパの各地域が独自のポイントシステムを開発する
- 1690年代:フランスのタイポグラファー、フルニエが12分割システムを提案する
- 初期のシステム:非常に一貫性がなく、地域間で0.01-0.02mmの差があった
ディドー・システム(1737-1886)
1737–1886
フランスの印刷業者フランソワ=アンブロワーズ・ディドーが最初の真の標準を作成し、ヨーロッパ大陸全体で採用され、今日でもフランスやドイツで使われている。
- 1737年:フルニエがフランス王室インチに基づくポイントシステムを提案する
- 1770年:フランソワ=アンブロワーズ・ディドーがシステムを改良 — 1ディドー・ポイント = 0.376mm
- 1785年:キケロ(12ディドー・ポイント)が標準的な測定単位となる
- 1800年代:ディドー・システムがヨーロッパ大陸の印刷を支配する
- 現代:フランス、ドイツ、ベルギーで伝統的な印刷に今でも使用されている
アングロアメリカン・システム(1886-1984)
1886–1984
アメリカとイギリスの印刷業者がパイカ・システムを標準化し、1ポイントを0.013837インチ(1/72.27インチ)と定義し、英語圏のタイポグラフィを支配した。
- 1886年:アメリカン・タイプ・ファウンダーズがパイカ・システムを確立:1 pt = 0.013837インチ
- 1898年:イギリスがアメリカの標準を採用し、アングロアメリカン統一を創出する
- 1930年代-1970年代:パイカ・システムがすべての英語圏の印刷を支配する
- 違い:アングロアメリカン・ポイント(0.351mm)対ディドー(0.376mm) — 7%大きい
- 影響:アメリカ/イギリス市場とヨーロッパ市場で別々の活字鋳造が必要だった
PostScript 革命(1984-現在)
1984–現在
Adobe の PostScript 標準は、1ポイントを正確に1/72インチと定義することで世界のタイポグラフィを統一し、何世紀にもわたる非互換性に終止符を打ち、デジタルタイポグラフィを可能にした。
- 1984年: Adobe PostScript が1 pt = 正確に1/72インチ(0.3528mm)と定義する
- 1985年: Apple LaserWriter が PostScript をデスクトップパブリッシングの標準にする
- 1990年代: PostScript ポイントが世界標準となり、地域的なシステムを置き換える
- 2000年代: TrueType 、 OpenType が PostScript の測定法を採用する
- 現代: PostScript ポイントはすべてのデジタルデザインの普遍的な標準である
伝統的なタイポグラフィシステム
1984年に PostScript が測定法を統一する前は、地域的なタイポグラフィシステムが共存しており、それぞれに独自のポイント定義があった。これらのシステムは、歴史的な印刷や専門的なアプリケーションにとって依然として重要である。
ディドー・システム(フランス/ヨーロッパ)
1770年にフランソワ=アンブロワーズ・ディドーによって確立
ヨーロッパ大陸の標準であり、フランス、ドイツ、および東ヨーロッパの一部で伝統的な印刷に今でも使用されている。
- 1ディドー・ポイント = 0.376mm( PostScript の0.353mmに対して) — 6.5%大きい
- 1キケロ = 12ディドー・ポイント = 4.51mm(パイカに匹敵)
- フランス王室インチ(27.07mm)に基づいており、メートル法に似た単純さを提供する
- ヨーロッパのアートブックや古典的な印刷で依然として好まれている
- 現代の用途:フランス国立印刷局、ドイツのフラクトゥール・タイポグラフィ
TeX システム(学術)
1978年にドナルド・クヌースによってコンピュータ組版のために作成
数学および科学出版の学術標準であり、正確なデジタル組版に最適化されている。
- 1 TeX ポイント = 1/72.27インチ = 0.351mm(古いアングロアメリカン・ポイントと一致)
- デジタル化以前の学術出版物との互換性を維持するために選択された
- 1 TeX パイカ = 12 TeX ポイント( PostScript パイカよりわずかに小さい)
- 科学出版の主要システムである LaTeX で使用されている
- 重要:学術論文、数学テキスト、物理学ジャーナル
Twip(コンピュータシステム)
Microsoft Word および Windows のタイポグラフィ
ワードプロセッサの内部測定単位であり、デジタルドキュメントのレイアウトを細かく制御できる。
- 1 twip = 1/20ポイント = 1/1440インチ = 0.0176mm
- 名前:「ポイントの20分の1」 — 非常に正確な測定
- 内部的に使用: Microsoft Word 、 Excel 、 PowerPoint 、 Windows GDI
- 浮動小数点演算なしで小数点のポイントサイズを可能にする
- 20 twip = 1ポイント、プロの組版で0.05ptの精度を可能にする
アメリカンプリンターズポイント
1886年アメリカン・タイプ・ファウンダーズ標準
英語圏の印刷におけるデジタル化以前の標準であり、 PostScript とはわずかに異なる。
- 1プリンターズポイント = 0.013837インチ = 0.351mm
- 1/72.27インチに等しい( PostScript の1/72に対して) — 0.4%小さい
- パイカ = 0.166インチ( PostScript の0.16667に対して) — ほとんど知覚できない違い
- 1886年から1984年まで PostScript 統一以前に支配的だった
- 遺産の影響:一部の伝統的な印刷所は今でもこのシステムを参照している
一般的なタイポグラフィサイズ
| 用途 | ポイント | ピクセル(96 DPI) | 注記 |
|---|---|---|---|
| 小さい文字 / 注釈 | 8-9 pt | 11-12 px | 最小限の可読性 |
| 本文(印刷) | 10-12 pt | 13-16 px | 書籍、雑誌 |
| 本文(ウェブ) | 12 pt | 16 px | ブラウザのデフォルト |
| 小見出し | 14-18 pt | 19-24 px | セクションの見出し |
| 見出し(H2-H3) | 18-24 pt | 24-32 px | 記事のタイトル |
| 主要な見出し(H1) | 28-48 pt | 37-64 px | ページ/ポスターのタイトル |
| ディスプレイタイプ | 60-144 pt | 80-192 px | ポスター、看板 |
| 最小タッチターゲット | 33 pt | 44 px | iOS のアクセシビリティ |
| 標準的な段組み幅 | 180 pt (15 pc) | 240 px | 新聞 |
| 標準的な行間 | 14.4 pt(12ptのテキストに対して) | 19.2 px | 120%の行間 |
タイポグラフィに関する興味深い事実
「フォント」の語源
「フォント」という言葉は、フランス語で「鋳造された」または「溶かされた」を意味する「fonte」に由来します—伝統的な活版印刷で個々の金属活字を作るために型に流し込まれた溶融金属を指します。
なぜ72ポイントなのか?
PostScript は1インチあたり72ポイントを選びました。なぜなら72は2、3、4、6、8、9、12、18、24、36で割り切れるため、計算が容易になるからです。また、伝統的なパイカ・システム(72.27ポイント/インチ)にも非常に近かったのです。
最も高価なフォント
Bauer Bodoni は完全なファミリーで89,900ドルかかります—これまでに販売された中で最も高価な商用フォントの1つです。そのデザインは、1920年代のオリジナルの金属活字標本からデジタル化するのに何年もかかりました。
Comic Sans の心理学
デザイナーに嫌われているにもかかわらず、 Comic Sans は不規則な文字形状が文字の混同を防ぐため、ディスレクシアの読者の読書速度を10-15%向上させます。実際には貴重なアクセシビリティツールなのです。
普遍的なシンボル
「@」シンボルは、異なる言語で異なる名前を持っています:「カタツムリ」(イタリア語)、「サルのしっぽ」(オランダ語)、「小さなネズミ」(中国語)、「巻いたニシンの酢漬け」(チェコ語)—しかし、それは同じ24ptの文字です。
Mac の72 DPIの選択
Apple は、オリジナルの Mac で PostScript ポイントと正確に一致させるために72 DPIを選択しました(1ピクセル = 1ポイント)。これにより、1984年に初めてWYSIWYGデスクトップパブリッシングが可能になりました。これはグラフィックデザインに革命をもたらしました。
タイポグラフィ進化のタイムライン
1450
グーテンベルグが活版印刷を発明—活字測定基準の最初の必要性
1737
フランソワ=アンブロワーズ・ディドーがディドー・ポイント・システム(0.376mm)を作成
1886
アメリカン・タイプ・ファウンダーズがパイカ・システムを標準化(1 pt = 1/72.27インチ)
1978
ドナルド・クヌースが学術的な組版のために TeX ポイント・システムを作成
1984
Adobe PostScript が1 pt = 正確に1/72インチと定義—世界的な統一
1985
Apple LaserWriter が PostScript をデスクトップパブリッシングにもたらす
1991
TrueType フォントフォーマットがデジタルタイポグラフィを標準化
1996
CSS がピクセルベースの測定法でウェブタイポグラフィを導入
2007
iPhone が@2x Retina ディスプレイを導入—密度非依存デザイン
2008
Android が dp (密度非依存ピクセル)でローンチ
2010
ウェブフォント( WOFF )がオンラインでのカスタムタイポグラフィを可能にする
2014
可変フォント仕様—単一ファイル、無限のスタイル
デジタルタイポグラフィ:スクリーン、DPI、プラットフォームの違い
デジタルタイポグラフィは、同じ数値が画面の密度によって異なる物理的サイズを生み出す、デバイス依存の測定法を導入する。プラットフォームの慣習を理解することは、一貫したデザインにとって不可欠である。
Windows (96 DPI標準)
96 DPI(1インチあたり96ピクセル)
Microsoft は Windows 95で96 DPIを標準化し、ピクセルとポイントの間に4:3の比率を作成した。これはほとんどのPCディスプレイでデフォルトのままである。
- 96 DPIで1 px = 0.75 pt(4ピクセル = 3ポイント)
- 16px = 12pt — 一般的な本文テキストサイズの変換
- 歴史:元の64 DPI CGA標準の1.5倍として選択された
- 現代:高DPIディスプレイは125%、150%、200%のスケーリングを使用する(120、144、192 DPI)
- ウェブのデフォルト: CSS はすべてのpxから物理単位への変換で96 DPIを想定している
macOS (72 DPIレガシー、220 PPI Retina )
72 DPI(レガシー)、220 PPI(@2x Retina )
Apple の元の72 DPIは PostScript ポイントと1:1で一致していた。現代の Retina ディスプレイは、鮮明なレンダリングのために@2x/@3xスケーリングを使用する。
- レガシー:72 DPIで1 px = 正確に1 pt(完全な対応)
- Retina @2x:ポイントごとに2つの物理ピクセル、実効220 PPI
- Retina @3x:ポイントごとに3つの物理ピクセル、330 PPI( iPhone )
- 利点:ポイントサイズが画面と印刷プレビューで一致する
- 現実:物理的な Retina は220 PPIだが、110 PPI(2×)として表示されるようにスケーリングされている
Android (160 DPIベースライン)
160 DPI(密度非依存ピクセル)
Android のdp(密度非依存ピクセル)システムは160 DPIのベースラインに正規化され、さまざまな画面に対応する密度バケットがある。
- 160 DPIで1 dp = 0.45 pt(160ピクセル/インチ ÷ 72ポイント/インチ)
- 密度バケット:ldpi(120)、mdpi(160)、hdpi(240)、xhdpi(320)、xxhdpi(480)
- 式:物理ピクセル = dp ×(画面DPI / 160)
- 16sp(スケール非依存ピクセル)= 推奨される最小テキストサイズ
- 利点:同じdp値がすべての Android デバイスで物理的に同じように表示される
iOS (72 DPI @1x、144+ DPI @2x/@3x)
72 DPI(@1x)、144 DPI(@2x)、216 DPI(@3x)
iOS は PostScript ポイントと同一の論理単位としてポイントを使用し、物理的なピクセル数は画面の世代(非 Retina @1x、 Retina @2x、スーパー Retina @3x)に依存する。
- 1 iOS ポイント@1x = 1.0 pt PostScript (72 DPIベースライン、 PostScript と同じ)
- Retina @2x:iOSポイントごとに2つの物理ピクセル(144 DPI)
- スーパー Retina @3x:iOSポイントごとに3つの物理ピクセル(216 DPI)
- すべての iOS デザインはポイントを使用し、システムがピクセル密度を自動的に処理する
- 17pt = 推奨される最小本文テキストサイズ(アクセシビリティ)
DPI対PPI:スクリーンと印刷の密度の理解
DPI(ドット・パー・インチ)
プリンタの解像度 — 1インチに収まるインクドットの数
DPIはプリンタの出力解像度を測定します。DPIが高いほど、1インチあたりのインクドット数が多くなり、より滑らかなテキストと画像が生成されます。
- 300 DPI:プロフェッショナルな印刷の標準(雑誌、書籍)
- 600 DPI:高品質なレーザー印刷(ビジネス文書)
- 1200-2400 DPI:プロフェッショナルな写真印刷と美術品の複製
- 72 DPI:スクリーンプレビューのみ — 印刷には不適切(ギザギザに見える)
- 150 DPI:ドラフト印刷または大判ポスター(遠くから見る場合)
PPI(ピクセル・パー・インチ)
画面の解像度 — 1インチのディスプレイに収まるピクセルの数
PPIはディスプレイの密度を測定します。PPIが高いほど、同じ物理的スペースにより多くのピクセルを詰め込むことで、より鮮明なスクリーンテキストが作成されます。
- 72 PPI:オリジナルの Mac ディスプレイ(1ピクセル = 1ポイント)
- 96 PPI:標準的な Windows ディスプレイ(1ポイントあたり1.33ピクセル)
- 110-120 PPI:低価格のラップトップ/デスクトップモニター
- 220 PPI: MacBook Retina 、 iPad Pro (2倍のピクセル密度)
- 326-458 PPI: iPhone Retina /スーパー Retina (3倍のピクセル密度)
- 400-600 PPI:ハイエンドの Android スマートフォン( Samsung 、 Google Pixel )
DPIとPPIはしばしば同じ意味で使われますが、異なるものを測定します。DPIはプリンタ(インクドット)用、PPIはスクリーン(発光ピクセル)用です。デザインする際は、常に「96 PPIのスクリーン」または「300 DPIで印刷」と指定してください。曖昧なので「DPI」だけではいけません。
実用的な応用:適切な単位の選択
印刷デザイン
印刷では絶対単位(ポイント、パイカ)を使用します。なぜなら、物理的な出力サイズは正確でデバイスに依存しない必要があるからです。
- 本文:書籍は10-12pt、雑誌は9-11pt
- 見出し:階層とフォーマットに応じて18-72pt
- 行間:フォントサイズの120%(12ptのテキスト = 14.4ptの行間)
- 絶対的な寸法はパイカで測定:「段組み幅:25パイカ」
- プロフェッショナルな印刷には常に300 DPIでデザインする
- 印刷にピクセルは絶対に使わない — ポイント/パイカ/インチに変換する
ウェブデザイン
ウェブタイポグラフィはピクセルと相対単位を使用します。なぜなら、画面のサイズと密度は様々だからです。
- 本文:16pxがデフォルト(ブラウザの標準)= 96 DPIで12pt
- CSS で絶対的なポイントサイズは絶対に使わない — ブラウザの表示が予測不能になる
- レスポンシブデザイン:スケーラビリティのためにrem(ルートフォントに対する相対単位)を使用する
- 最小テキスト:本文は14px、キャプションは12px(アクセシビリティ)
- 行の高さ:1.5(単位なし)で本文の可読性を確保
- メディアクエリ:320px(モバイル)から1920px+(デスクトップ)までを考慮してデザインする
モバイルアプリ
モバイルプラットフォームは、異なる画面密度で一貫した物理的サイズを確保するために、密度非依存単位(dp/pt)を使用します。
- iOS :ポイント(pt)でデザインし、システムが自動的に@2x/@3xにスケーリングする
- Android :レイアウトにはdp(密度非依存ピクセル)を、テキストにはspを使用する
- 最小タッチターゲット:44pt( iOS )または48dp( Android )でアクセシビリティを確保
- 本文:最小16sp( Android )または17pt( iOS )
- 物理的なピクセルは絶対に使わない — 常に論理単位(dp/pt)を使用する
- 複数の密度でテストする:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi
学術・科学
学術出版では、数学的な正確さと既存の文献との互換性のために TeX ポイントが使用されます。
- LaTeX は、レガシー互換性のために TeX ポイント(1インチあたり72.27)を使用する
- 標準的な学術雑誌:10ptの Computer Modern フォント
- 2段組みフォーマット:3.33インチ(240pt)の段組みと0.25インチ(18pt)の段間
- 数式:正確なポイントサイズは数学的表記にとって不可欠
- 慎重に変換:1 TeX pt = 0.9963 PostScript pt
- PDF出力: TeX が自動的にポイントシステムの変換を処理する
一般的な変換と計算
日常的なタイポグラフィ変換のためのクイックリファレンス:
基本的な変換
| 変換元 | 変換先 | 式 | 例 |
|---|---|---|---|
| ポイント | インチ | pt ÷ 72 | 72pt = 1インチ |
| ポイント | ミリメートル | pt × 0.3528 | 12pt = 4.23mm |
| ポイント | パイカ | pt ÷ 12 | 72pt = 6パイカ |
| ピクセル(96 DPI) | ポイント | px × 0.75 | 16px = 12pt |
| ピクセル(72 DPI) | ポイント | px × 1 | 12px = 12pt |
| パイカ | インチ | pc ÷ 6 | 6pc = 1インチ |
| インチ | ポイント | in × 72 | 2in = 144pt |
| Android dp | ポイント | dp × 0.45 | 32dp = 14.4pt |
完全な単位変換リファレンス
すべてのタイポグラフィ単位と正確な変換係数。基本単位: PostScript ポイント(pt)
絶対(物理)単位
Base Unit: PostScript ポイント(pt)
| Unit | To Points | To Inches | Example |
|---|---|---|---|
| ポイント(pt) | × 1 | ÷ 72 | 72 pt = 1インチ |
| パイカ(pc) | × 12 | ÷ 6 | 6 pc = 1インチ = 72 pt |
| インチ(in) | × 72 | × 1 | 1 in = 72 pt = 6 pc |
| ミリメートル(mm) | × 2.8346 | ÷ 25.4 | 25.4 mm = 1 in = 72 pt |
| センチメートル(cm) | × 28.346 | ÷ 2.54 | 2.54 cm = 1 in |
| ディドー・ポイント | × 1.07 | ÷ 67.6 | 67.6 Didot = 1 in |
| キケロ | × 12.84 | ÷ 5.6 | 1 cicero = 12 Didot |
| TeX ポイント | × 0.9963 | ÷ 72.27 | 72.27 TeX pt = 1 in |
スクリーン/デジタル単位(DPI依存)
これらの変換は画面のDPI(ドット・パー・インチ)に依存します。デフォルトの想定:96 DPI( Windows )、72 DPI(旧 Mac )
| Unit | To Points | Formula | Example |
|---|---|---|---|
| ピクセル @ 96 DPI | × 0.75 | pt = px × 72/96 | 16 px = 12 pt |
| ピクセル @ 72 DPI | × 1 | pt = px × 72/72 | 12 px = 12 pt |
| ピクセル @ 300 DPI | × 0.24 | pt = px × 72/300 | 300 px = 72 pt = 1 in |
モバイルプラットフォーム単位
デバイスの密度に応じてスケーリングされるプラットフォーム固有の論理単位
| Unit | To Points | Formula | Example | |
|---|---|---|---|---|
| Android dp | × 0.45 | pt ≈ dp × 72/160 | 32 dp ≈ 14.4 pt | |
| iOS pt(@1x) | × 1.0 | PostScript pt = iOS pt(同一) | 17 iOS pt = 17 PostScript pt | |
| iOS pt(@2x Retina ) | iOS ptあたり2つの物理ピクセル | 2倍のピクセル | 1 iOS pt = 2スクリーンピクセル | |
| iOS pt(@3x) | iOS ptあたり3つの物理ピクセル | 3倍のピクセル | 1 iOS pt = 3スクリーンピクセル |
レガシーおよび特殊単位
| Unit | To Points | Formula | Example |
|---|---|---|---|
| Twip(1/20 pt) | ÷ 20 | pt = twip / 20 | 1440 twip = 72 pt = 1 in |
| Q(1/4 mm) | × 0.7087 | pt = Q × 0.25 × 2.8346 | 4 Q = 1 mm |
| PostScript ビッグポイント | × 1.00375 | 正確に1/72インチ | 72 bp = 1.0027 in |
基本的な計算
| Calculation | Formula | Example |
|---|---|---|
| DPIからポイントへの変換 | pt = (px × 72) / DPI | 16px @ 96 DPI = (16×72)/96 = 12 pt |
| ポイントからの物理的サイズ | インチ = pt / 72 | 144 pt = 144/72 = 2インチ |
| 行間 | 行間 = フォントサイズ × 1.2~1.45 | 12ptフォント → 14.4-17.4ptの行間 |
| 印刷解像度 | 必要なピクセル =(インチ × DPI)幅と高さ | 8×10インチ @ 300 DPI = 2400×3000 px |
タイポグラフィのベストプラクティス
印刷デザイン
- 常にポイントまたはパイカで作業する — 印刷にピクセルは絶対に使わない
- ドキュメントは最初から実寸(300 DPI)で設定する
- 本文には10-12ptを使用する。それより小さいと可読性が低下する
- 快適な読書のために、行間はフォントサイズの120-145%にする
- マージン:製本と取り扱いのために最低0.5インチ(36pt)
- 商業印刷所に送る前に、実寸でテスト印刷を行う
ウェブ開発
- フォントサイズにはremを使用する — レイアウトを崩さずにユーザーがズームできる
- ルートフォントを16px(ブラウザのデフォルト)に設定する — それより小さくしない
- 固定の高さではなく、単位なしの行の高さの値(1.5)を使用する
- CSS で絶対的なポイントサイズは絶対に使わない — 表示が予測不能になる
- ブラウザのサイズ変更だけでなく、実際のデバイスでテストする — DPIが重要
- 最小フォントサイズ:本文は14px、キャプションは12px、タッチターゲットは44px
モバイルアプリ
- iOS :@1xでデザインし、@2xと@3xのアセットを自動的にエクスポートする
- Android :dpでデザインし、mdpi/hdpi/xhdpi/xxhdpiでテストする
- 最小テキスト:アクセシビリティのために17pt( iOS )または16sp( Android )
- タッチターゲット:最低44pt( iOS )または48dp( Android )
- 物理的なデバイスでテストする — シミュレータは実際の密度を表示しない
- 可能な場合はシステムフォントを使用する — プラットフォームに最適化されている
アクセシビリティ
- 最小本文テキスト:16px(ウェブ)、17pt( iOS )、16sp( Android )
- 高コントラスト:本文は4.5:1、大きなテキスト(18pt+)は3:1
- ユーザースケーリングをサポートする:固定サイズではなく相対単位を使用する
- 行の長さ:最適な可読性のために1行あたり45-75文字
- 行の高さ:ディスレクシアのアクセシビリティのためにフォントサイズの最低1.5倍
- スクリーンリーダーと200%ズームでテストする
よくある質問
なぜ Photoshop と Word でテキストのサイズが違って見えるのですか?
Photoshop は画面表示に72 PPIを想定していますが、 Word はレイアウトに96 DPI( Windows )を使用します。 Photoshop の12ptのフォントは、 Word よりも画面上で33%大きく表示されますが、どちらも同じサイズで印刷されます。印刷作業では、正確なサイズを確認するために Photoshop を300 PPIに設定してください。
ウェブ用にポイントとピクセルのどちらでデザインすべきですか?
ウェブ用には常にピクセル(またはrem/emのような相対単位)を使用してください。ポイントは絶対的な物理単位であり、異なるブラウザやデバイスで一貫性がなく表示されます。12ptは、あるデバイスでは16px、別のデバイスでは20pxになる可能性があります。予測可能なウェブタイポグラフィのためにはpx/remを使用してください。
pt、px、dpの違いは何ですか?
pt = 絶対的な物理単位(1/72インチ)、px = スクリーンピクセル(DPIによって変化)、dp = Android の密度非依存ピクセル(160 DPIに正規化)。印刷にはpt、ウェブにはpx、 Android にはdp、 iOS には論理ptを使用してください。各システムはそれぞれのプラットフォームに最適化されています。
なぜ12ptはアプリによって違って見えるのですか?
アプリケーションは、DPIの想定に基づいてポイントを異なる方法で解釈します。 Word は96 DPIを使用し、 Photoshop はデフォルトで72 PPI、 InDesign は実際のデバイスの解像度を使用します。12ptは印刷すると常に1/6インチですが、DPI設定のために画面上ではサイズが異なって見えます。
TeX ポイントを PostScript ポイントに変換するにはどうすればよいですか?
TeX ポイントに0.9963を掛けて PostScript ポイントを取得します(1 TeX pt = 1/72.27インチに対し、 PostScript は1/72インチ)。差はごくわずか(わずか0.37%)ですが、数学的な表記で正確な間隔が重要な学術出版にとっては重要です。
どの解像度でデザインすべきですか?
印刷:最低300 DPI、高品質なら600 DPI。ウェブ:96 DPIでデザインし、 Retina 用に@2xアセットを提供する。モバイル:論理単位(pt/dp)で@1xでデザインし、@2x/@3xをエクスポートする。古い Mac ディスプレイをターゲットにしない限り、72 DPIでデザインしないでください。
なぜ16pxがウェブの標準なのですか?
ブラウザのデフォルトのフォントサイズは16px(96 DPIで12ptに相当)であり、一般的な視聴距離(18-24インチ)で最適な可読性を得るために選ばれました。それより小さいと、特に高齢のユーザーにとって可読性が低下します。相対的なサイジングの基準として常に16pxを使用してください。
ディドー・ポイントについて知る必要がありますか?
ヨーロッパの伝統的な印刷、フランスの出版社、または歴史的な複製物を扱う場合のみです。ディドー・ポイント(0.376mm)は PostScript ポイントより6.5%大きいです。現代のデジタルデザインは普遍的に PostScript ポイントを使用しており、ディドーは主に古典的なタイポグラフィやアートブックに関連しています。