タイポグラフィーのテンプレートまたは良い練習

Question

タイポグラフィーは、CSSでWebページをデザインするときに決して得られないものの1つです。見出しと本文は決して見えず、ウェブ上で見られるほとんどの他のウェブサイトと同じくらい良いと感じます。これによって私の主な印字は、これらのウェブサイトのように判読不能で広々と感じることはありません

私はこれらのすてきなウェブサイトのCSSをコピーしようとしますが、私は決して同じ結果を得ることはできませんそれらの技術を自分のものにして、将来私が使うことができるようにする）。加えて、タイポグラフィに関しては、私のCSSは全面にあります。後でスタイルを変更する必要がある場合は、関連する値を検索するのに長い時間を費やします

初めてCSSを学び始めたとき、ページレイアウトを正しく取得する方法（静的、ナビゲーション左/右）、タイポグラフィに関する正しいルック・アンド・フィールを得る方法には何も役立ちませんでした。一方、 はタイポグラフィに関する本がたくさんありますが、タイポグラフィをウェブ上で見栄えのよいものにする手助けはしていないようです。

私はあなたが常に保証タイプは、ウェブ上でよく見る

おかげますでしょういくつかのリソース、または任意の固定的なアプローチを提案することができます期待しています

Answer 1

この記事が役に立つことがあります。http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

ますあなたが賞賛しているサイトを突き抜けて、自分のCSSを試してみて、すでに正しいことをしています。それは学ぶための最善の方法の一つです。

一般的に、私がタイポグラフィーを使って作業しているときは、コントラスト、色、および視覚的な階層という3つの点を考慮して見栄えを良くすることができます。

• コントラスト：あなたのテキストはそれをうまく対比ない色と背景に提示されている場合は、悪い見えるようになるだろう。実際には、それは「アクセス不可能」とみなされる可能性があります。 Colour Contrast Checkなどのツールを使用して、テキストがWeb Content Accessibility Guidelinesに準拠していることを確認できます。
• カラー：楽しんでいるサイトのほとんどが真に黒いテキストを持っていないことがわかります。純粋な黒は自然界には一般的ではなく、白い背景に黒い文字が表示されます。ほとんどのサイトでは、黒いテキストを少し灰色にして色を薄くして、灰色にします。color: rgb(30,30,30);
  色を使いたい場合は、basic color theoryを使ってうまく機能するものを選んでみてください。どちらかというと、濃い色の濃い色を選び、黒をつけます。
• 視覚階層：基本的に、より重要な見出しには大きなフォントを使用します。だから、h1はほとんどの場合、それぞれのサイズがh6まで下がり、pのタグはおおよそここに表示されるテキストのサイズになるはずです。ちょうど最近に投稿されたWebdesign Tutsはかなり良いですan article on visual hierarchyを投稿しました。

希望に役立ちます！