Webタイポグラフィまとめ

2009–01–22

フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。

1. オールドスタイル数字
2. アンパサンド（“＆”）
3. スモールキャップ
4. ハイフンとダーシ
5. 各種スペース
6. 合字
7. 約物
8. 約物はぶら下げる
9. :beforeと:after
10. 見出しのサイズ
11. 初期フォントサイズ
12. 行間の調整
13. 余白の調節
14. 各国の日付表記

年始にサンプル作って安心放置してたら、今月のWebDesigningがWebタイポ特集だったという罠。やられました。完全に出遅れましたね。まあ良いか。

2009.01.26: 「見出しのサイズ」に一筆追加しました。

オールドスタイル数字

1. .date {
2. font-family: Georgia, Constantia, Hoefler Text, serif;
3. font-weight: normal;
4. }

オールドスタイル数字というのは、文章中で数字だけ飛び出して見えないように作られている数字のこと。一部の数字が小文字yとかgとかみたいにベースラインより下に出ているのが特徴的。主として欧文のセリフ書体に用意されています。欧文だと本文で数字出すときに使うんですが、Webだとブログの日付表記や日めくりカレンダー風に使うとカッコ良いですね。

font-familyで指定しているフォントですが、GeorgiaはWindows/IE、ConstantiaはVista、Hoefler TextはMac OSにそれぞれ標準で含まれているフォントです。

ちなみに皆が普通に使ってる高さの揃った数字は「ライニング数字」と言って、数字が文章の中で飛び出しても構わない場合――新聞や経済関係の雑誌、大文字だけの中に数字が混じる場合など――に使われます。

アンパサンド（“＆”）

1. .amp {
2. font-family: Baskerville, Palatino, "Palatino Linotype", "Book Antiqua", serif;
3. font-style: italic;
4. }

アンパサンドってのは「and per se and」――それ自体でandって意味を持つ文字であり、もともとが装飾が目的なので書体によっていろいろな様々な形が存在します。なので、そういった特徴的なアンパサンドを採用しているフォントを選んで指定してやれば、特に見出しにおいて非常に面白いデザインになります。画像を使わずに。

BaskervilleとPalatinoはMac OS、Palatino LinotypeはWindows標準のフォントです。ちなみに“＆”の字形はラテン語の「et」に由来します。

この方法を紹介したのはSimpleBitsの中の人で、Web2 Berlinなんかでも紹介されてますね。

Use the Best Available Ampersand, SimpleBits

スモールキャップ

1. .scaps {
2. font-family: Baskerville, Palatino, "Palatino Linotype", "Times New Roman", serif;
3. font-variant: small-caps;
4. }

スモールキャップというのは、大文字を小文字のxハイトくらいに小さくしたものです。だいたいは見出しで使われ、ただ大文字を並べるのと違って流れを壊さず表記できます。あと略称と勘違いされにくいって付加価値もあり。たとえば 11:00am とかはスモールキャップが用いられることが多いようです。

本物のスモールキャップは単に大文字を小さくしたわけでなく、専用に字形や字間を調整されて作られているので、すべて大文字で組まれた場合にも比較的読みやすくなっています。

Small Caps, Fonts.com

ハイフンとダーシ

約物	実体参照	用例	説明
‐	‐	non‐existest / up‐to‐date	ハイフン。複数の単語から構成された熟語の間に置かれる。 単語途中での改行時に使用されるのは、厳密にはソフトハイフン。
–	–	3–6 April / 25-30mm	enダッシュ。区間や範囲を表す。
—	—	a phrase marker—thus—with no spaces —Doesn't sound much like a bee to me. —It's a bloody aardvark!	emダッシュ。 文と文の間、字句と字句の間に用いられて、時間の経過を表す。 括弧のように2本のダッシュで囲んで、説明や副題などを表す。 行頭に用いられて、引用を表す。 単語の後に用いられて省略を表す。
−	−	4−1=3	マイナス。減算記号を表す。

普段何気なく使っている横棒にも、実はちゃんと種類や意味がありまして... 普通にキーボードを叩いて表示されるのはハイフンマイナス（-: -）といいます。字形としては、ハイフンはenダッシュより短く、位置が低い。

日本語だとあんま意識しないですが、欧文で用法間違えるとかなり間抜けに見えるので気にしたほうが良いかもです。

各種スペース

約物	実体参照	説明
' '	 	non-breaking space
' '	 	en space
' '	 	em space
' '	 	3-per-em space
' '	&#8197	4-per-em space
' '	 	6-per-em space
' '	 	figure space
' '	 	punctuation space
' '	 	thin space
' '	 	hair space

これも欧文メインですが、約物の後ろに置いたり行頭のインデントに用いたり――まあ、用途はいろいろあるわけですよ。Operaだと全部半角スペースになっちゃうんですけども。

合字

約物	実体参照	用例	説明
Æ	Æ		重母音 AE の大文字。デンマーク語、ノルウェー語など。
æ	æ		重母音 ae の小文字
Œ	Œ;	HORS–D'ŒUVRE	大文字 OE の合字。フランス語で日常的に使う。
œ	œ	Hors–d'œuvre	小文字 oe の合字
ß	ß	Straße / STRASSE	ドイツ語のエスツェット（eszett）。大文字は無いため、大文字で綴るときはSSと書く。
Ð	Ð		アイスランドの大文字 eth
ð	ð		Iアイスランドの小文字 eth
Þ	Þ		アイスランドの大文字 thorn
þ	þ		アイスランドの小文字 thorn

合字（ごうじ、Ligature）。複数の文字を結合した文字のことです。印刷字のスペース調整、筆記体の影響、元の字から離れて独自の意味合いを持つもの ...など経緯は様々ですね。中でもfiやflなどは個別に置くより１文字として作った方が見やすく読みやすいため、よく使われます。

まあ実体参照で出るような文字は、まともに使いそうなのはエスツェットくらいで、あとは本物の特殊文字だし... デザイン上「そういうものがある」くらいの意識で良いかな。Macユーザはキーボードから打てるので覚えといても良いかと。

合字（１）, デザインの現場 小林章の「タイプディレクターの眼」

約物

約物	実体参照	用例	説明
‘□’	‘ ’	She said to me, “ Obama spoke ‘Yes, we can’ in Chicago.” yesterday.	シングルクオート。引用中の引用を囲む。
“□”	“ ”	Barack Obama speak “Yes, we can”.	ダブルクオート。引用した文章を囲む。
′	′	200′	プライム。分やフィートなど。
″	″	200″	ダブルプライム。秒やインチなど。
'	'	the cat's / I'm / aren't / ev'ry	アポストロフィ。音の省略に伴い文字を省略したことを表す。
°	°	120°	度。角度、温度を表す。

キーボードから普通に打てるのはアポストロフィとかです。これは引用で使ってて「カッコ悪い」と思った人も多い筈。フィートやインチはともかく、度なんかは覚えとくと地味に便利ですね。

約物はぶら下げる

主に<blockquote>とかかな。Webだと左右に余白おいたりする例が多いけど、紙のデザインでいうと約物は「外側にぶら下げる」つもりで設置したほうが、本文の左端のラインが揃ってすっきりする。今年の24waysはこの方法で組んでましたね。

Examples of Hanging Punctuation, Mark Boulton

:beforeと:after

1. cite:before {content:'\201C';}/* double-quotation */
2. cite:after  {content:'\201D';}/* double-quotation */

あんまタイポには関係ない気もしなくはないですが、忘れやすいのでメモ。contentに実体参照を入れる場合は数値参照になります。注意。いちお良く使う記号の数値参照は前の記事に纏めてありますので、参考までに。

まあHTML5やXHTML2からは「引用符は書け」みたいな定義になったそうなので、書いといた方が良いかな？

見出しのサイズ

サイズ	英文	邦文
24px	H1 Section headings	セクション・ヘッダ
18px	H2 Entries headings	エントリー・タイトル
16px	H3 Navigation and teriary headings	小見出し
13px	h4 All other headed elements	その他の見出し要素
11px	p body copy and leading	本文やリード

とあるアルファベット圏から引っ張ってきた目安。まあアルファベットは字形が単純なので、日本語ではもう一回り大きいほうが良いでしょう。あとは、てきとーに120%とかにするんでなく、フォントが持っている大きさを指定すると綺麗な字になります。

欧文のフォントサイズは16世紀に開発された6pt–72ptでほぼ統一されており、メジャーな書体や多くのアプリケーションもこれに倣っていますね。具体的には6pt、7pt、8pt、9pt、10pt、11pt、12pt、14pt、18pt、21pt、24pt、36pt、48pt、60pt、72pt...です。この中から選べば綺麗に組めます。

Five simple steps to better typography - Part 4, Mark Boulton Design

初期フォントサイズ

1. body {
2. font-size: 62.5%; /* 10px */
3. }

フォントサイズの取り決めには諸説ありますね。Web界隈でもハッキリとは纏まってないと思いますが、Sig.が良く使うのは62.5%メソッドです。

base = 16px
base = 16px * 62.5% = 10px
1em    = 10px  = 1em
1.3em  = 13px  = 1.3em
13.5em = 135px = 13.5em

殆どのブラウザの初期フォントサイズが16pxである事実に依存してますが、特に問題になったことはありません。例外的に古いMacでは初期サイズが14pxだそうで、その場合は以下の様に。

base = 14px
base = 14px * 62.5% = 8.75
1em    = 1 * 8.75    = 9px
1.3em  = 1.3 * 8.75  = 11px
13.5em = 13.5 * 8.75 = 118px

ちなみにブラウザの初期フォントサイズが16pxである理由は、Mosaicのデフォルトのフォントサイズが16pxだったからで、旧MacOSが14pxなのは日本語フォントが16pxに対応するビットマップを持っていなかったから、だそうですよ。

他の方法としては、やはり初期サイズが16pxと仮定して「0.8125em = 13px」というのもあります。こっちはサンプルファイルをサクっと作るときに楽ですね。

Discuss: How to Size Text in CSS, A List Aparts
How to size text using ems, Clagnut

行間の調整

行間（line-height）は、印刷や組版でいう二分アキとかに従うと巧くまとまる気がします。経験的に、文字が小さければ広めに――大きければ狭く取ると良いですね。同様に、暗めの背景だと広く取ったほうが読みやすいようです。

• 全角アキ: ほぼ正方形の文字の高さと同じ量 (2)
• 二分アキ: 全角アキの半分の量 (1.5)
• 三分アキ: 全角アキの3分の1の量 (1.33...)
• 四分アキ: 全角アキの4分の1の量 (1.25)
• 二分四分アキ: 全角アキの4分の3の量 (1.75)

ま～基本的に二分アキだあね。あとline-heightは単位付きで指定すると継承がメンドくなるので、「line-height: 1.5;」みたいに単位無しで指定すると後々面倒が無いです。

余白の調節

段落のマージンをとる場合、line-heightの値と同じだけ余白の空きを取れば、同じ幅のグリッドでリズムが生まれます。なのでemサイズで管理すると楽ですね。以下は、line-height: 1.5;の場合。

英語圏でフォントのグリッドとかいうと、もっと厳密にpxでガチガチに計算してたりするんですが、コーダが意識する分にはこれくらいで肩の力を抜いたほうがほど良いかと。

Add and delete vertical space in measured intervals, The Elements of Typographic Style Applied to the Web

各国の日付表記

例	説明
2008年04月21日	年・月・日。日本式。
21 April 2008	日・月・年。イギリス式。
April 21, 2008	月・日・年。アメリカ式。日の次にカンマが入る。

ここまで来ると単なるトリビアなんですが、いちお。例では月名を文字で表してますが、実際「01-11-2008」みたいに普通に出てくるので、英語圏のサイトを閲覧するときは頭に入れとくと混乱が少ないかもですね。