12のパラグラフタイポグラフィとCSS

1.ブラウザデフォルトスタイル

2.ブロックの左寄せ、右ラグ

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: left;
}

3.正当化されたブロック

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: justify;
}

4.境界で1emインデント

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em;
text-align: left;
}
p + p {
text-indent: 1em;
}

5.境界なしで2リードインデント

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}

6.境界線のない2つのトップインデント

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: justify;
}
p + p {
text-indent: 2.5em;
}

7.左寄せ、右ラグ、境界のないアウトデント

CSS

p {
font-size: 1em;
line-height: 1.25em;
text-indent: -1em;
text-align: left;
}

8.連続したテキスト、分割された段落

CSS

p {
font-size: 1em;
line-height: 1.25em;
display: inline;
text-align: justify;
}
p + p:before {
content: "¶ ";
}

9.高められたキャップ

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
text-align: justify;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
}

10.大胆な開始を備えた文字見出し

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
font-weight: 400;
float: left;
margin: -0.107em 0.107em 0 0;
}
p:first-line {
font-weight: 800;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
}
p + p:first-line {
font-weight: 400;
}

11.開いている大胆なスモールキャピタルを備えたアウトデントキャップ

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
padding: 0 0 0 8em;
text-align: justify;
}
p:first-line {
font-weight: 800;
font-variant: small-caps;
}
p:first-letter {
font-size: 8em;
line-height: 1em;
font-weight: 400;
float: left;
margin: -0.156em 0 0 -0.1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
}
p + p:first-line {
font-weight: 400;
font-variant: normal;
}

12.イニシャルアウトデントブロック

CSS

p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
padding: 0;
text-align: justify;
}
p:before {
content: "§ ";
}
p + p {
padding: 0 0 0 8em;
}
p + p:before {
content:: "• ";
}

:beforeと:first-letterはIEではサポートされてないので、注意が必要です。