Тэги <h1>, <h2> и т.д. очень важны в SEO, но при этом обычные заголовки выглядят как-то убого. Так как же совместить приятное с полезным? Опять же воспользуемся CSS!

После того, как вы определите стиль для заголовков, можно определить стиль и для вложенных элементов.

HTML будет выглядеть так:

CSS Back to Basics Tips, Tricks, & Practical Uses of CSS

А CSS будет выглядеть так:

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*--Не поддерживается IE--*/
}
h1 span {
color: #cc0000;
font-weight: bold;

}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*--Выделяем для тэга small отдельную линию--*/
}

Дополнительные материалы по теме:

• 10 Examples of Beautiful CSS Typography, and How They Did It
• 12 CSS Tools and Tutorials for Beautiful Web Typography
• CSS Gradient Text Effect
• 50 Useful Design Tools For Beautiful Web Typography
• 6 Ways to Improve Your Web Typography
• CSS Typography: Contrast Techniques, Tutorials and Best Practices
• 8 Simple Ways to Improve Typography in Your Designs
• How to Size Text in CSS

Читайте так же