現代のウェブサイトのためのより良いタイポグラフィを見る

デジタルテキストは非常に多くの種類でフォーマットできます。 Webフォントとブラウザスクリプトのさらなる進歩により、開発者が利用できる新しいプロジェクトコードが登場しました。 Webデザイナーも、Webサイトをコーディングし、すべてのページ間で統一された印刷スタイルを構築するための最善の戦略を探しています。.

最新の機能やサービスなど、多くのプロのWebデザイナーがこのトピックについて書いています。あなたはそれぞれのWebページをあなたのルートレイアウトデザインから切り離している一つのドキュメントとして考える必要があります。この見解の下では、タイポグラフィがどのようにページからページへと流れることができるかを見ることが容易で、創造性のためのユニークな出口を提供します。そしてこれはあなたの段落と見出しのためのユニークなクラスを構築することで特に明白になります.

以下では、Webの構築に興味があるタイポグラフィデザイナーを志望するためのいくつかの素晴らしいアイデアを紹介します。ブログ、ソーシャルネットワーク、そして企業は、常に現在のWebサイトを更新しようとしています。 WebタイポグラフィのCSSスタイルは、ページの更新を開始するための優れた情報源です。.

今日のインターネットの違い

現代のウェブは2000年初めから劇的に進歩しました。ウェブデザイナーがグラフィックデザイン、ロゴ、バナー、そして事実上何か他のものの素晴らしい作品を作成するための新しい機能がたくさんあります。 HTML 5およびCSS 3仕様のリリースもまた、Webフォントを構築する古い方法を犠牲にしました。.

CSSにあなた自身のフォントを含めることは今や完全に可能です @フォントフェイス 財産。どれでも使えます TrueType（.ttf）または OpenType（.otf）ファイルを作成し、コピーをサーバーにローカルに保存します。それからいくつかのCSS3マジックであなたのウェブページ上のどこにでも家族を含めなさい!

この技術だけでは、現代のインターネットがどのように発展してきたかを見ることができます。.

そして、jQueryの人気が日々高まっているので、驚くべきアニメーション効果とカスタムフォントを組み合わせることができます。上記のjQuery用のTTFGenプラグインの代わりに、TrueTypeフォントをWebページに含めることができます。.

この方法は、CSS3標準をサポートする最新のブラウザを必要としないため、もう少し信頼性があります。しかし、もちろんInternet Explorer 6のようなレガシーブラウザは正しくレンダリングするのに苦労します。.

しかし、ほとんどのユーザーがこれらの標準をサポートしている新しいブラウジングソフトウェアに切り替えたことに感謝します。そしてWeb用に開発しているときは、自分の市場が誰のためにあるのかを正確に検討する必要があります。あなたはいつもみんなを喜ばせることはできませんが、あなたは十分に親密になることを試みることができます.

デジタルタイポグラフィの目的

考えるべき奇妙なアイデアのようなものですが、 デジタルテキストの本当の目的は何ですか? 情報を伝え、情報源を共有し、そしてインターネットユーザーの世界にあなたの意見を提供するため. テキストは、考えやアイデアを共有するための最も単純な形式のメディアです。. しかし、それはまた非常に複雑で、写真やビデオでは使用できない大きな詳細が含まれています。.

あなたの訪問者はあなたのテキストまたは見出しのキーワードに基づいてあなたのウェブサイトを見つける可能性があります - あなたのウェブコピーに注意を払うもう一つの理由。そして、あなたがあなたのウェブサイトにいくらか注意を向けたならば、あなたは彼らの集中に固執する必要があります。これは太字の見出しと等間隔のページテキストで最も簡単に行われます。.

あなたが記事やチュートリアルを書いているなら、あなたは明確な言葉を使う必要があります。それは ページテキストの外観とコンテンツの品質も同様に重要です。. テキストが大きくなるほど、キーワードの読み取りとスキャンが容易になります。また、段落にはコンテンツの大部分が含まれるため、適切なサイズになるようにプロトタイプを作成するために多くの時間を費やす必要があります。段落は、メッセージを文章に分割したビットサイズのまとまりで伝えるために使用されます。適切なページレイアウトを得るための書き方と計画について理解する.

さらにあなたのページのテキストと一緒にメディアと二次コンテンツが付属しています。段落に主な情報が含まれている場合は、ページを盛り上げるためのグラフや画像があるかもしれません。これらのアクセントは、ユーザーがあなたのサイトを移動し続けるのにちょうどいい感じです。.

ビデオと画像はあなたのコンテンツを分割して、読者があなたの記事を通してより速く動いているように見せることができます。しかし、これらの項目を控えめに使用し、何かがあなたのコアメッセージを圧倒しないようにしてください。ユーザーは（ほとんど）情報を求めてあなたのサイトにやってくるのであまりにも多くの気を散らすことを望まない.

他のすべての書式設定オプションは、機能や目的を指定するために使用されます。たとえば、ハイパーリンクのテキストは、他とは異なる色になることがよくあります。 “クリック可能”. あなたはあなたの文章に重点を置いている太字または斜体の単語で働くかもしれません。また、ブロック引用符またはフォーマット済みテキストを使用すると、それぞれ基本的なステートメントまたはWebコードの説明に役立ちます。.

Webページのヘッダー

Webタイポグラフィにとって最も重要な資産の1つは見出しタグです。 HTMLの見出しに慣れていない場合は、

に

前者が最も重要で、後者が最も重要ではありません。 Googleではコンテンツ構造に基づいてドメインとWebページもランク付けされているため、このマークアップは理解に役立ちます。したがって、最終的には、使用するキーワードと必要な見出しの階層を管理できます。.

標準のHTML5仕様には最大6つの異なる見出しスタイルが含まれていますが、3〜4の使用をお勧めします。それらすべてをあなたのページに含める必要はありません。また、6つの異なる見出しを使用することもほとんどありません。あなたのスタイルを構築するために最初に座っているとき、あなたが好きなものを見るために見出しのためにいくつかの例を起草してみてください.

Photoshopはこのシナリオに最適です。また、HTMLでさまざまな見出しをコーディングして、ブラウザでどのように表示されるかを確認することもできます。重要なのは、ページフローを操作し、見出しに従って見出しをデザインすることです。.

たとえば、

タグは、すべてのページ見出しの中で最も際立っているはずです。.

そして

最も人気のあるタグであり、ページコンテンツをクロールするためにGoogleによって推奨されています。太字フォント、下線、破線の境界線、またはさまざまな色などのデザイン効果を使用すると、タイトルがページから飛び出してしまいます。.

間隔も重要です 見出し、またはそのことに関するあなたのコンテンツの一部になると。見出しとメインコンテンツ領域の間に余白を追加してください。フォントを十分に大きくした場合、各見出しはそれ自身のコアブロックとして際立っているはずです。明確なメッセージで読者の注意を引きたい場合、この外観は理想的です。.

独自のハイパーリンクを構築する

ページリンクのトピックについて言うことがたくさんあります。いずれにしても、コードにハイパーリンクを使用する必要があります。それらはあなたのサイトの異なるページ間の主要なナビゲーションインターフェースとして非常に重要です。また、他のブログやアーカイブされたブログ投稿にリンクして後で参照することもできます。.

あなたはあなたのリンクのために保持テキストを非常に注意深く選ぶべきです。これは、リンクスタイルによってアクセントを付けられる特定のコンテンツです。たとえば、「ここをクリック」は非常に人気があり、ほとんどの場合直接ダウンロードに使用されます。この体系的なアプローチを避けて、代わりにハイパーリンクテキストを少しクリエイティブにしてください。コンテキストを認識して新しいページに何が含まれるのかを把握できれば、訪問者はリンクをクリックする可能性がはるかに高くなります。.

リンクのスタイルを設定するときは、次の点を考慮する必要があります。 - ページ設定の変更内容, どのような背景色に取り組んでいますか, そして コントラストのテキストは何色ですか?

リンクはクリック可能なアイテムとしてページの外にはっきりと表示されるべきです - 結局のところ、それがそれらの機能です。これが、下線付きの古い青が効果的に機能する理由です。しかし、代替色のほうがうまくいくとわかった場合は、試してみる必要があります。リンク設計に万能のソリューションはありません。ちょっとウェブを見回すだけで、あなたはきっと素晴らしいものをまとめることができるでしょう.

重要な点の1つは、試すべきいくつかの機能です。 避けて. テキストフォントファミリーやフォントサイズを変更するなどの作業は非常に面倒です。これにより、テキストが変形して移動し、マウスカーソルがリンクゾーンのすぐ外側に配置される可能性があります。同様に、リンクに余白や余白を追加したり、効果を重ねたりしないでください。あなたが単純なままでいるとき、これらははるかによく働きます。色の変更や下線の追加は、ユーザーエクスペリエンスに大いに役立ちます。.

スタイル付きリストの構築

ある時点でリストを操作しなければならない可能性が高いです。 HTMLの順序付きリストと順序なしリストの両方が含まれています。これらは、ごくわずかなスペースで、アイデア、製品、人々、またはリンクの小さなコレクションをオンラインで提供するのに最適です。スタイルも段落や見出しとそれほど変わらない、.

あなたの訪問者は彼らがアイテムのリストを見ていることをすぐに理解するべきです。各リスト項目を別々にして、ページの新しい行に配置します。可能であれば、それらの間に余分なスペースを追加してください。これはいくらかの呼吸の余地を与えて、記事のテキストのための素晴らしい分割として現れるでしょう。フォントを太字にしたり、標準のレイアウトの余白から目立たないようにインデントリストを表示したりすることもできます。.

あなたのリストを際立たせるために追加の機能を追加することは必要条件ではありません。しかし、あなたがブロックレイアウトスタイルを楽しむなら、それは本当にあなたのリストに焦点を当てます。明るい背景やアイコンを追加してみてください。 List Apartには、私が思うにいくつかの非常に強力な知識のヒントが含まれていると思います。しかし、ページコンテンツを線形に保ち、必要なときにのみリストブロックを使用するのであれば、デザインの後退に遭遇するべきではありません。.

ページ内引用を作成する方法

引用と引用の出現は最近非常に限られています。初期のWebでは、これらの要素があまり使われていなかったでしょう。おそらく、社説、エッセイ、または教育論文にあります。しかし、HTML5では確かに規則が少し更新されているので、引用の引用がずっと簡単になります。.

HTML5 Doctor Webサイトには、この正確なトピックについて議論するための魅力的なリソースが含まれています。彼らは、文書構造の内部に現れるものとして、ブロッククォート内のコンテンツの使用について議論しています。したがって、見出し、段落、さらにはリストやフッターも含めることができます。の主な用途