.date {
font-family: Georgia, Constantia, Hoefler Text, serif;
font-weight: normal;
}
Old‐style numbersDate Sep 19, 2008 at 10:25 am |
Normal numbersDate Sep 19, 2008 at 10:25 am |
※1 オールドスタイル数字は小文字と馴染むように作られている。
※2 対して高さの揃った数字は「ライニング数字」と言う。
.amp {
font-family: Baskerville, Palatino, "Book Antiqua", serif;
font-style: italic;
}
※1 アンパサンド = ampersand = and per se and = それ自体でandの意味
※2 字形はラテン語の「et」に由来する。
※3 もともと装飾が目的なので、書体によっていろいろな形が存在する。
Use the Best Available Ampersand, SimpleBits
.scaps {
font-family: Georgia, "Times New Roman", serif;
font-variant: small-caps;
}
Small Caps
※1 スモールキャップ = 大文字を小文字のxハイトくらいに小さくしたもの
※2 大文字をただ並べるのと違って、流れを壊さず表記できる。略称と勘違いされにくい。
※3 本文用のセリフ書体に多く用意されている。
| 約物 | 実体参照 | 用例 | 説明 |
|---|---|---|---|
| ‐ | ‐ | 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ダッシュ。
|
| − | − | 4−1=3 | マイナス。減算記号を表す。 |
※1 普通にキーボードからタイプできるのはハイフンマイナス（-:-）
※2 字形としては、ハイフンはenダッシュより短く、位置が低い。
| 約物 | 実体参照 | 用例 | 説明 |
|---|---|---|---|
| ‘□’ | ‘ ’ | 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° | 度。角度、温度を表す。 |
※1 キーボードから普通に打てるのはアポストロフィ。
※2 文字コードとしてプライムを使えない場合には、代わりにアポストロフィーを（可能ならイタリック体で）用いることがある。
| 約物 | 実体参照 | 説明 |
|---|---|---|
| ' ' | | non-breaking space |
| ' ' |   | en space |
| ' ' |   | em space |
| ' ' |   | 3-per-em space |
| ' ' |   | 4-per-em space |
| ' ' |   | 6-per-em space |
| ' ' |   | figure space |
| ' ' |   | punctuation space |
| ' ' |   | thin space |
| ' ' |   | hair space |
合字（ごうじ、Ligature）とは、複数の文字を結合した文字のこと。印刷字のスペース調整、筆記体の影響、元の字から離れて独自の意味合いを持つもの ...など経緯は様々。中でもfiやflなどは個別に置くより一文字として作った方が見やすく読みやすいため、特に見出し等でよく用いられる。
| 約物 | 実体参照 | 用例 | 説明 |
|---|---|---|---|
| Æ | Æ | 重母音 AE の大文字。デンマーク語、ノルウェー語など。 | |
| æ | æ | 重母音 ae の小文字 | |
| Œ | Œ; | HORS–D'ŒUVRE | 大文字 OE の合字。フランス語で日常的に使う。 |
| œ | œ | Hors–d'œuvre | 小文字 oe の合字 |
| ß | ß | Straße / STRASSE | ドイツ語のエスツェット（eszett）。大文字は無いため、大文字で綴るときはSSと書く。 |
| Ð | Ð | アイスランドの大文字 eth | |
| ð | ð | Iアイスランドの小文字 eth | |
| Þ | Þ | アイスランドの大文字 thorn | |
| þ | þ | アイスランドの小文字 thorn |
cite:before {content:'\201C';}/* double-quotation */
cite:after {content:'\201D';}
However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.
However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.
※1 約物は「外側にぶら下げる」つもりで設置する。
※2 文字列の左端がすっきり揃うと、タイポグラフィに気を使っている印になる。
| サイズ | 英文 | 邦文 |
|---|---|---|
| 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%とかにするんでなく、フォントが持っている大きさを指定すると綺麗な字になります。
Five simple steps to better typography - Part 4, Mark Boulton Design
divide 13 by 16 = 0.8125em
base = 16px and that muliplied by 62.5% = 10
10px = 1em
13px = 1.3em
135px = 13.5em
Mac with default 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
※1 Macの初期フォントサイズは14px→16px。旧MacOS時代に日本語フォントが16pxに対応するビットマップを持っていなかったから
※2 ブラウザの初期フォントサイズが16pxである理由は、Mosaicのデフォルトのフォントサイズが 16 px だったから
Discuss: How to Size Text in CSS, A List Aparts
How to size text using ems, Clagnut
印刷や組版でいう従うと巧くまとまる。
文字が小さければ広めに、大きければ狭く取ると良い。同様に、暗めの背景だと広く取ったほうが見やすい。
※1 ま～基本的に二分アキだあね
※2 line-heightは単位付だと継承がメンドくなる。line-height: 1.5;でおｋ！
全角と半角, Wikipedia
全角アキ: XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。
二分アキ: XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。
三分アキ: XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。
四分アキ: XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。
二分四分アキ: XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。
段落のマージンをとる場合、line-heightの値と同じだけ余白の空きを取れば、同じ幅のグリッドでリズムが生まれる。
以下はline-height: 1.5; の場合。
| margin-bottom: 0em; | margin-bottom: 3em; |
|---|---|
|
XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。 XHTML 1.0 (この仕様書) は、XHTMLファミリーにおける初めての文書型である。これは、3つのHTML4文書型を XML 1.0 [XML] のアプリケーションとして再定式化したものである。XHTML 1.0 は、XML適合でもあり、かつ、いくつかの単純なガイドラインに従えばHTML4適合ユーザエージェントでも機能するコンテンツのための言語として使われることが予定されている。コンテンツを XHTML 1.0 に移り住ませた開発者は、以下の利点を実感するであろう。 XHTMLファミリーは、インターネットの進化における次の一歩である。今日XHTMLに移り住むことにより、コンテンツ開発者は、コンテンツの後方互換性や将来的な互換性に自信をもちながら、XMLワールドに入り、その付随する利点のすべてを享受することができる。 性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 |
XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。 XHTML 1.0 (この仕様書) は、XHTMLファミリーにおける初めての文書型である。これは、3つのHTML4文書型を XML 1.0 [XML] のアプリケーションとして再定式化したものである。XHTML 1.0 は、XML適合でもあり、かつ、いくつかの単純なガイドラインに従えばHTML4適合ユーザエージェントでも機能するコンテンツのための言語として使われることが予定されている。コンテンツを XHTML 1.0 に移り住ませた開発者は、以下の利点を実感するであろう。 XHTMLファミリーは、インターネットの進化における次の一歩である。今日XHTMLに移り住むことにより、コンテンツ開発者は、コンテンツの後方互換性や将来的な互換性に自信をもちながら、XMLワールドに入り、その付随する利点のすべてを享受することができる。 |
| margin-bottom: 0em; | margin-bottom: 1.5em; |
|
XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。 XHTML 1.0 (この仕様書) は、XHTMLファミリーにおける初めての文書型である。これは、3つのHTML4文書型を XML 1.0 [XML] のアプリケーションとして再定式化したものである。XHTML 1.0 は、XML適合でもあり、かつ、いくつかの単純なガイドラインに従えばHTML4適合ユーザエージェントでも機能するコンテンツのための言語として使われることが予定されている。コンテンツを XHTML 1.0 に移り住ませた開発者は、以下の利点を実感するであろう。 XHTMLファミリーは、インターネットの進化における次の一歩である。今日XHTMLに移り住むことにより、コンテンツ開発者は、コンテンツの後方互換性や将来的な互換性に自信をもちながら、XMLワールドに入り、その付随する利点のすべてを享受することができる。 |
XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。 XHTML 1.0 (この仕様書) は、XHTMLファミリーにおける初めての文書型である。これは、3つのHTML4文書型を XML 1.0 [XML] のアプリケーションとして再定式化したものである。XHTML 1.0 は、XML適合でもあり、かつ、いくつかの単純なガイドラインに従えばHTML4適合ユーザエージェントでも機能するコンテンツのための言語として使われることが予定されている。コンテンツを XHTML 1.0 に移り住ませた開発者は、以下の利点を実感するであろう。 XHTMLファミリーは、インターネットの進化における次の一歩である。今日XHTMLに移り住むことにより、コンテンツ開発者は、コンテンツの後方互換性や将来的な互換性に自信をもちながら、XMLワールドに入り、その付随する利点のすべてを享受することができる。 |
| margin-bottom: 0em; | margin-bottom: 2em; |
|
XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。 XHTML 1.0 (この仕様書) は、XHTMLファミリーにおける初めての文書型である。これは、3つのHTML4文書型を XML 1.0 [XML] のアプリケーションとして再定式化したものである。XHTML 1.0 は、XML適合でもあり、かつ、いくつかの単純なガイドラインに従えばHTML4適合ユーザエージェントでも機能するコンテンツのための言語として使われることが予定されている。コンテンツを XHTML 1.0 に移り住ませた開発者は、以下の利点を実感するであろう。 XHTMLファミリーは、インターネットの進化における次の一歩である。今日XHTMLに移り住むことにより、コンテンツ開発者は、コンテンツの後方互換性や将来的な互換性に自信をもちながら、XMLワールドに入り、その付随する利点のすべてを享受することができる。 |
XHTMLは、HTML4 [HTML] を再生産し、サブセット化し、拡張する現在及び将来の文書型及びモジュールのファミリーである。XHTMLファミリーの文書型はXMLベースであり、究極的にはXMLベースのユーザエージェントと結びついて機能するよう設計されている。このファミリーやその進化の詳細は、将来的な方向性に関する節でさらに詳しく論じられる。 XHTML 1.0 (この仕様書) は、XHTMLファミリーにおける初めての文書型である。これは、3つのHTML4文書型を XML 1.0 [XML] のアプリケーションとして再定式化したものである。XHTML 1.0 は、XML適合でもあり、かつ、いくつかの単純なガイドラインに従えばHTML4適合ユーザエージェントでも機能するコンテンツのための言語として使われることが予定されている。コンテンツを XHTML 1.0 に移り住ませた開発者は、以下の利点を実感するであろう。 XHTMLファミリーは、インターネットの進化における次の一歩である。今日XHTMLに移り住むことにより、コンテンツ開発者は、コンテンツの後方互換性や将来的な互換性に自信をもちながら、XMLワールドに入り、その付随する利点のすべてを享受することができる。 |
| margin-bottom: 0em; | margin-bottom: 1em; |
|
性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 |
性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 性悪説によれば、人間の天性は悪だが後天的努力によって矯正できる、とされる。即ち「孔子ですら生まれてから聖人だったわけではなく、学問を修めることによって聖人となれた」となる。これを説いたのは荀子。学問による矯正を重視し、法による強制とは違う。つまり荀子は、教育の重要性を説きたかった。 |