CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 280

Remember, the first value is the horizontal offset of the shadow, the second value is
the vertical offset, the third value is the blur, and the fourth value is the color. This will
create outlined text like Figure 6-27 .
Figure 6-27. Outlined text created using the text-shadow property
Note WebKit-based browsers (Safari and Google Chrome) have implemented a
property called text-stroke . It is not in any CSS specification at the W3C, so
you're best to avoid it until (if) it appears in any of the CSS3 modules. To use it, you
need the webkit prefix; the property is -webkit-text-stroke , which takes a
width and a color, as in -webkit-text-stroke: 1px #f00 .
Rules of typography
There's a rule of composition promoted in Robin William's book The Non-Designer's
Design Book that states elements on the page that are merely similar should be avoided.
If design elements on a layout are different, make them very different in order to create
contrast in the layout. Use the contrasting differences among the design elements as a
way to help visually organize the page. This fits into typography when you think about
the typefaces you choose to use. Fonts fall into two main categories: serif and sans serif.
Serif fonts are typefaces with embellishments to the edges of the letters (called serifs ).
These include Times New Roman, Georgia, Palatino, and so on. Sans serif (meaning
“without serifs”) includes Arial, Helvetica, Verdana, and so on. If you start including
different serif or different sans serif fonts in the same design, pause for a moment and
consider whether it is really necessary to have, for example, Arial and Helvetica togeth-
er in the same layout. Typefaces that are similar yet distinct enough that their differ-
ences are noticeable are best avoided. Along those same lines, it's best to avoid using
more than two typefaces overall on the page. There is so much you can do with bolding,
italicizing, color, and so on, that even using one typeface offers a plethora of stylistic
choices and treatments.
When thinking about the overall organization of textual content, use typography to
create a hierarchy of information on the page, clearly identifying what content is more
important to read over other content. This is the purpose of headlines, titles, subtitles,
and so on; they create a hierarchy your eye can quickly scan to get deeper and deeper