[CSS]WEBにおける文字[HTML]

こんにちわ、あついです。須藤です。

今日はWEBの文字についてちょっと考えたいと思います。

最近ではwebフォントを使うことも多くなってきています。また、レスポンシブやシンプルなデザインが多い今、文字の重要性は結構高いのではないでしょうか。

広告やエディトリアルをメインでやっている人からするとWEBの文字組は、文字に対する認識が甘いって思ってる人も結構いるんじゃないでしょうか。

色々な理由があるかと思います。

・デバイスによって、フォントが違うので、やってられない。

・デバイスのサイズが同じではない、縦横の比率、サイズ、見る人とデバイスの距離などの理由からやってられない。

・文字のことよりも他にやることがたくさんある。

・そんなことにかけている時間はない、読めれば良い。

・文章が間違っていなければ大丈夫！

・紙媒体では修正がすぐ出来ない、WEBだとすぐに出来る。

などなど。

ただ、文字組(字詰めとか大きさとか)の感覚は、時代や人それぞれの感覚や何を表現するかよって、違うと思うのでとっても難しいことだと思います。

文字に関して、みんなが思う共通の「良い」をしっかり持ってる人ってのはかなり少ないんじゃないかと思います。

自分はイラレとかで文字を組むときは、とりあいずオプティカル、ベタでやって、あとはちょこちょこ調整して、これくらいで良いかって感じだったります。

これは個人的な感覚ですが、英語の字詰めは気になるけど、日本語はそこまで気にならなかったりってものあります。

前置きが長くなってしましましたが、文字に対する意識を高めるためにwebにおける文字の基本的なCSSをいくつかまとめたいと思います。

文字間隔
letter-spacing

[html]
letter-spacing:-0.1em;
[/html]

後ろで大きな爆発音がした。俺は驚いて振り返った。

[html]
letter-spacing:1em;
[/html]

後ろで大きな爆発音がした。俺は驚いて振り返った。

行間
line-height

[html]
line-height:1;
[/html]

後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。

[html]
line-height:2;
[/html]

後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。

両端揃え
text-align:justtify

[html]
text-align:justify;
text-justify:inter-ideograph;
-ms-text-justify:inter-ideograph;
[/html]

通常時(何も指定してない場合)
親譲りの無鉄砲でchildの時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

両端揃え
親譲りの無鉄砲でchildの時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

字下げ
text-indent

[html]
text-indent:1em;
[/html]

親譲りの無鉄砲でchildの時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

字下げ（２行目以降）
text-indent padding-left

[html]
text-indent:-1em;
padding-left:1em;
[/html]

※注意事項とかを書くとき
親譲りの無鉄砲でchildの時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

文字の太さ
font-weight

[html]
font-weight:bold;
[/html]

文字の太さ
文字の太さ

スモールキャップ
font-variant

[html]
font-variant:small-caps;
[/html]

SMALL CAPS
Small Caps

ドロップキャップ
font-size

[html]
font-size: 3em;
float: left;
display:block;
margin-right:0.2em;
line-height:1;
[/html]

親譲りの無鉄砲でchildの時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。