これらの詳細により、設計者は完全に制御できるようになり、設計において美しく一貫した活版印刷ソリューションを作成できます。 これはすべてさまざまなタイプのメディアに適用されますが、この記事では、CSSを使用してそれらをWebデザインに適用する方法に焦点を当てます。 CSSを使用してタイポグラフィを改善し、全体的な使いやすさを向上させる8つの簡単な方法を次に示します 。
1.寸法
行サイズを入力します。 読者の目には、長い線や短い線は退屈です。 長い-読者が次のテキスト行を見つけるのが難しいため、リズムを破壊します。 短い行が受け入れられる唯一の状況は、少量のテキストです。 読みやすくするために、行の長さはスペースを含めて40〜80文字にする必要があります。 テキストが1列のデザインでは、65文字が理想的です。
文字列の長さを計算する簡単な方法は、Robert Bringhurstの方法を使用することです。これは、フォントサイズに30を掛けます。つまり、フォントサイズが10ピクセルの場合、30を掛けると300ピクセル、つまり1行あたり約65文字になります。 コードは次のようになります。
p {
font-size: 10px;
max-width: 300px;
}
pxを使用すると計算が大幅に簡素化されますが、emも使用できます。
2.リーディング
リーディングとは、メモの本文内のテキスト行の間のスペースであり、読みやすさに大きな役割を果たします。 正しい行分離により、読者は行をより簡単にたどることができ、テキストの外観が改善されます。 先行は、テキストの活版印刷の色も変更します。これは、コンポジションの密度またはトーンです。
行送りは、書体、フォントサイズ、フルネス、状況（？） 、行の長さ、単語間隔など、多くの要因に影響されます 。 ラインが長いほど、リードが大きくなります。 フォントサイズが大きいほど、リードは小さくなります。 ヘッドセットによっては、フォントサイズよりも2〜5ポイント多くリードを設定することをお勧めします 。 そのため、フォントが12ptの場合、Webリーダーの場合は15ptまたは16ptになります。
適切なリードを見つけるにはいくらかの器用さが必要ですが、以下はコードがどのように見えるかの例です。
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
3.見積もりの処理
テキストフィールドで引用符を処理する必要があります。 引用符がテキストと結合すると、左マージンが壊れ、テキストブロックの韻律に違反します。 引用符を処理しても、左揃えとバランスが崩れないため、読みやすさが向上します。
これは、blockquote要素を使用してCSSを使用して簡単に実現できます。
blockquote {
text-indent: -0.8em;
font-size: 12px;
}
負のインデントは、ヘッドセット、フォントサイズ、およびマージンに依存します。
4.垂直リズム
ベースラインのグリッドは、ページ上の一定の活版印刷リズムの基礎です。 読者がテキストを簡単にたどることができるため、読みやすさが向上します。 縦方向のスペースに一定のリズムがあると、テキストが一定のグリッドに維持されるため、フォントサイズ、 行間 、行の長さに関係なく、ページ全体で縦横比とバランスが変化しません。
CSSを使用して垂直のリズムを維持するには、要素と行間隔（行送り）の間の距離がベースラインのグリッドのサイズに等しいことが必要です。 ベースラインの 15px グリッドを使用し、各グリッド線が15pxであることを意味するとします。 リードは15ピクセルになり、段落間隔も15ピクセルになります。 以下に例を示します。
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}
これにより、テキストの垂直方向のリズムを維持しながら、各段落をグリッドに配置できます。
5.上下の吊り線
上部の吊り線 -段落の最後のテキスト行または単語。 下にぶら下がっている行は、テキストの残りの部分から分離されている列の先頭または末尾にある単語または短いテキスト行です。 上下の垂れ下がった線は不器用な部分を形成し、読者の視線を遮り、読みやすさに影響します。 これは、フォントサイズ、行送り、行長、単語間隔、文字間隔を増やすか、手動で改行を入力することで回避できます。
残念ながら、CSSでぶら下がり線を防ぐ簡単な方法はありません。 それらを取り除く1つの方法は上記で説明しましたが、もう1つはjQWidon'tで、jQueryプラグインは要素の最後の2つの単語の間に不可解なスペースを配置します。
6.隔離
読者をそらすことなく言葉を強調することが重要です。 斜体スタイルは、強調表示の理想的な形式と見なされることがよくあります。 強調表示の他の一般的な形式には、太字、大文字、スモールキャップ、フォントサイズ、色、下線、またはその他の書体があります。 どちらを使用する場合でも、1つだけを使用するようにしてください。 小さいカプセルなどの組み合わせ-太字-斜体は気を散らし、ぎこちなく見えます。
CSSを使用して強調表示する方法は次のとおりです。
span {
font-style: italic;
}
h1 {
font-weight: bold;
}
h2 {
text-transform: uppercase;
}
b {
font-variant: small-caps;
}
font-variantは、フォントがスモールキャップをサポートしている場合にのみ機能することに注意してください。
7.スケール
従来のスケールが60年代に開発され、誰もが慣れ親しんだスケールでも、あなたが発明したスケールでも、常にスケールを補います。 読みやすさを改善し、調和を作成し、テキストの認知的適合性を改善する活版印刷階層を作成するため、スケールは重要です。
CSSで定義された活版印刷のスケールの例：
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
}
8.引き裂かれたエッジをクリーニングします
左右に揃えてテキストブロックを作成するときは、破れたエッジ（不均一な行）をクリーンアップし、予期しない「穴」や不器用なテキストブロックなしでテキストのバランスをとることを忘れないでください。 引き裂かれた端は、読者をそらすことができます。 良いエッジは、長すぎたり短すぎたりしない「ソフト」で均一なものです。 CSSでこれを制御することはできないため、適切なエッジを得るにはテキストを手動で編集する必要があります。
ハイフンでエッジを改善できますが、残念ながらここではCSSは無力です。 おそらく「近い」将来、CSS3が何らかの制御を提供するでしょう...しかし、それにもかかわらず、すべてが失われるわけではありません。 自動ハイフネーションを実行するサーバー側およびクライアント側のソリューションがいくつかあります。 たとえば、 phpHyphenator 、 Hyphenator、またはオンラインジェネレーター 。
Hyphenator.jsは、クライアント側で自動ハイフネーションを実行するJavascriptライブラリです。
さらなる研究のためのリソース
詳細に役立つトピック関連の記事と書籍のリストを次に示します。
- より良いタイポグラフィへの5つの簡単なステップ
マーク・ボールトン
- 増分リード
マーク・ボールトン
- 垂直のリズムに合わせて作成する
リチャード・ラッター-24の方法
- Web上のタイプをベースライングリッドに設定
ウィルソンマイナー-リスト別
- Webタイプをベースライングリッドに設定
クレイグ・グラネル-オペラ
- Webに適用される活版印刷スタイルの要素
ロバートブリングハースト
- CSSでテキストのサイズを設定する方法
リチャード・ラッター-別のリスト
- ベースラインリズム計算機
ジェフリー・グローゼンバッハ
- タイポグラフィの詳細
ヨスト・ホチュリ
- 活版印刷スタイルの要素
ロバートブリングハースト
- タイプで考える
エレン・ラプトン
- グラフィックデザインのグリッドシステム
ヨーゼフ・ミュラー・ブロックマン
著者について
アントニオ・カルソーネは、ニューヨークに拠点を置くグラフィックデザイナーであり、グラフィックデザインとタイポグラフィに特化したブログであるAisleOneの著者です。TheGrid Systemは、グリッドシステムとThinking for a Living Networkで着実に拡大しているリソースです。
翻訳者について
翻訳はI RavenまたはSilent Impによって行われました。
私はフリーランスのタイプセッター、プログラマーです。
そして、私は誰かがこの記事を楽しんだり、さらには利益を得ることを本当に期待しています。
ご意見をお待ちしております。