Webのタイポグラフィライティングを理解する

Webデザインでは、ユーザーエクスペリエンスのあらゆる分野を検討する際に、タイポグラフィのテーマが重要です。すべてのWebサイトにはテキストが必要であり、非常に魅力的なレイアウトを構築するために従うことができるガイドラインがあります。グリッドライン、レタリング、フォントの高さ、テキストの間隔、カラースキーム、およびその他の同様のプロパティをすべて考慮に入れる必要があります。.

この記事では、Webタイポグラフィの分野について詳しく説明します。私たちは調べます 信頼できるWebページテキストのデザインの背後にある一般的なアイデア. 途中で私はいくつか紹介します 便利なCSS3プロパティ デザイナーはしばしば忘れます.

私は、Webの理論とイデオロギーにもっと焦点を当てるようにしました。これは一般的にデジタルテキストにもっと焦点を当てます、そしてあなたは、Webデザイナーがどのスタイルをどの目的に適用するかを選ぶことができます。コンテキストは常に重要であり、取り組むプロジェクトごとにこれを適切に決定する必要があります。このガイドでは、世界中の活版印刷のイノベーターによる最新のWebトレンドが詰まった参照パケットを検討してください。.

段落を測定する

あなたはこの種の測定のためにヤードスティックを破裂させる必要はありません。実際には、タイポグラフィに関する尺度は、ページ上の任意の段落の幅（水平方向）を表します。これは常に議論されるトピックではありませんが、コンテンツの読みやすさに影響します。一般的な経験則として、1行の長さは75〜85文字程度に制限します（必ずしもスペースを含む必要はありません）。.

今、これはいくつかのより広いレイアウトのための少しストレッチのように見えるかもしれません。特にあなたのデザインが流動的で、ユーザーがブラウザウィンドウのサイズを変更するときにそれに適応することを意図しているならば。いつでもCSSを設定できます 最大幅 メインコンテンツdivのプロパティ。ピクセルではなくスケーラブルな単位（パーセント、ems）で余白とフォントサイズをコーディングすることで、あらゆるレイアウト内でこのような柔軟性を実現できます。.

注意すべき最大の測定単位はありません。どのようにして内容を書き、単語を文に書くかは、各行の幅よりもはるかに重要です。しかし、短い文章と比べて長い文章は読みにくくなります。.

一流の説明

設計にあたっては、段落の尺度とともに、次のことについても考慮する必要があります。一流. その言葉は発音されている “導かれた”, 鉛筆で使用される鉛のような。この名前は、テキストの行間に鉛の細片が配置されていた昔の機械的組版の名前に由来します。.

先導は依然としてWebデザインにおいて非常に重要な概念であり、段落の尺度と密接に関係しています。段落の幅が広くなるにつれて、先導の量を同じだけ増やすか、または テキスト行間のスペース. この余分なスペースは読書をあなたの目でずっとずっと簡単にします.

あなたが非常にきつく巻かれたテキストを通してすくうことになっていたならば、あなたはそれが一行に集中するのが難しいのを見つけるかもしれません。このような場合は、CSSでリードの量を増やしてみてください。 行の高さ 財産。あなたはいつも単語の間よりもテキストの行の間にもっと多くのスペースが欲しいです。さもなければあなたのテキストブロックは新聞印刷物として現われるかもしれませんし、読み飛ばすことは非常にユーザーフレンドリーではないでしょう.

堅実なテクニックは、当初必要とされていたよりも多くのスペースを適用し、必要ならばそれを減らすことです。すべてのテキストが同じように作成されるわけではないので、太字、アンカーリンク、下線などの内部書式の異なる段落が必ず必要になります。.

ナチュラルフォントサイズを使用する

平均よりも小さいフォントサイズを使用することを選択しているWebサイトはまだいくつかあります。 11px-12pxはもっともっと “スタンダードプロ” ビジネスレイアウト用。しかし、これらのサイズは特定の情報を探している大多数の訪問者を助けません.

CSSルールを適用しない場合、通常Webブラウザはデフォルトで16pxになります。大きなテキストに対応するために、レイアウトに余分なスペースがある場合でも、これは少し小さいと考えられます。大きいフォントサイズは見栄えがよく、相対的なキーワードについては読みやすくなっています。 Serifフォントは段落の素材としてはあまり選択されませんが、それでも解決することができます。読みやすさを向上させ、注意を引くために、serifベースのフォントにはもっと大きなテキストサイズを使用することをお勧めします。.

ユーザーの環境に対応する

さまざまなフォントファミリとサイズを試してみると、それに合わせてコンテンツ領域を調整する必要があります。私がこだわる標準ユニットは ems 利用可能なスペースと画面の解像度に基づいてサイズを簡単に変更できるためです。これは最も重要なユーザー側のパフォーマンスを最適化します。.

しかし、あなたが非常に柔軟なコンテンツを持っているとき、それはあなたのレイアウトがバグの多い結果になりがちです。一部のブラウザでは、フッターまたはサイドバー領域のコンテンツが歪んだり、バランスが崩れたりすることがあります。あるいは、本文の中に画像や他の形式のメディアを並べるのが難しいかもしれません。固定スタイルのレイアウトが必要な場合は、他の方法でemsを使用することができます。ただし、両方の方法を試して、どちらが最適かを確認してください。.

固定幅と段落サイズでは、デザインの多くの設定が固定されます。これは、静止した美的効果を多く含むコンテンツに最適です。背景画像やさまざまなサイドバーウィジェットを検討してください。右側の固定サイドバーを使用して、左側の列に流動的なコンテンツ領域を構築するのも簡単なプロセスです。.

文脈に基づくスタイル

他にも非常に優れたCSSトリックが主流の設計から隠されています。具体的には、適切な状況で適用できる印刷作業からコピーされた傾向があります。.

多くのWebデザイナーは、テキストインデントCSSプロパティさえも使用したことがありません。この規則の対象となる段落の最初の行を字下げする値を指定します。単位はピクセル、ポイント、ems、パーセンテージなどの標準のテキストオプションに従います。これは、ほとんどのブログで見られる傾向ではありません。テキストの大きなブロックを読みながらそれはそれは素晴らしいページのリズムを提供します.

として知られているCSSセレクタの別の種類があります 疑似要素. これは、コンテンツセレクタの特定の部分をターゲットにすることができます。 CSS3：最初の文字の擬似セレクタは、重要な段落に派手なスタイルを作成するのに最適です。太字や斜体、さらには書体を変更して、各段落の冒頭の手紙を読み上げることができます。あなたが利用できるいくつかの余分なCSSコードを含むドロップキャップのこの美しい例をチェックしてください.

文字間隔で遊ぶ

私たちの多くがトラッキングという用語を聞いたことがあると確信していますが、それがCSSのletter-spacingプロパティと同じアイデアであることに気付いたことは一度もありません。これら2つの概念は同じもので、活字とデジタル活版印刷の間で関係しています。単位は、任意の1行のテキスト内の文字間のスペースに関連しています。これはあなたのサイト内のヘッダやいくつかの小さなコンテンツブロックにさえ適用するのに本当にきれいな効果です。.

文字間隔とカーニングを混同しないことが重要です。どちらも活版印刷と文字間の距離に関連しています。しかしカーニングとは、単語内の2つの文字間の距離を意味します。 letter spacingプロパティはに適用されます 要素全体 テキスト、単語、段落、ヘッダー、アンカーリンクなど。あなたがスタイルのための新しいアイデアで遊んでいるときこれを覚えておいてください.

すべての大文字のヘッダーには、数ピクセル/ポイントの文字間隔を使用することがよくあります。これは個々の文字をいくつかの余分なスペースで分割し、また非常に定義されたものとして表示されます。 “見出し” 見て。負の文字間隔も正しい文脈でうまく機能します。私は一般的にもっと小さいユニット、たぶん-0.03emか-0.1emに固執する.

書体の組み合わせと一致

Webタイポグラフィの背後にあるデザインコンセプトは確かに芸術の一種であり、それほど科学的なものではありません。あなたが従うことができるガイドラインがありますが、あなたが制限している堅固なルールはありません。これは、あなたがあなたがアクセスすることができる異なったフォントを混合しそして合わせることを実験するための莫大な量の自由があることを意味します.

これまでで最も普及している書体の組み合わせには、ヘッダーと段落の内容用のserif / sans-serif分割があります。私は両方を切り替えるのが好きですが、もっと頻繁に私はヘッダーセクションでセリフフォントを使います。各文字に余分なマーキングやストロークがあると、それらはページのテキストの主流としてよりお世辞を表します。.

さらに、サンセリフフォントは、文章でまとめるのがよりクリーンで簡単です。それはセリフフォントが段落で機能しないというわけではありません。実際、たくさんの素晴らしい例があります。しかし、x-heightという名前のあまり知られていない概念は、書体の複雑さを区別するために極めて重要です。いくつかの単語のベースラインを見ることから、そのようなフォントがどのように機能するかを理解するでしょう。 “適合する” お互いに.

これらの異なる要素間のスペースの重要性も注目に値します。おそらく2つか3つの異なるヘッダースタイルを使用することになるので、これらはそれぞれ異なる外観で表示されます。 h2 / h3要素を次の段落ブロックに少し近づける傾向があります。これは、コンテンツ間に相関関係があることを意味するためです。.

この相関関係は、まったく異なる2つの書体を隣同士に使用している場合に特に役立ちます。私は1セットのコンテンツにつき3つ以下の異なるフォントファミリーをお勧めします。あまりにも多くのカスタマイズをした後にあなたの言葉が一緒にごちゃ混ぜになって見え、ページ全体が誤解されたフォントの寄せ集めのように見えます.

結論

これらの概念がデジタルタイポグラフィの複雑な主題に何らかの光を当てることが私の願いです。特にトピック全体があなたにとって異質のものである場合は、デザイナーとしての仕事に実際に参加するのは難しい場合があります。しかし、勉強を続け、束全体を練習するようにしてください!

来週： いくつか調べてみましょう。 役に立つツールとリソース より良いウェブタイポグラフィのために.

もっと…

これはもっとタイポグラフィー関連の投稿です：

美しいタイポグラフィを使用したWebデザインのショーケース
現代のウェブサイトのためのより良いタイポグラフィ
タイポグラフィーのクイックガイド：学び、触発される