Web Typography

Best Viewed: Safari on iOS, Mac OS X, Windows

Many web pages use images to display text in fonts that are not installed on every platform. However, you can apply a few CSS properties directly to the text elements in your web page to create stunning graphics, navigation menu items, buttons, and other user interface elements. When you use text styled with CSS instead of an image, the result is easier to create and maintain, downloads faster, and is automatically selectable, scalable, accessible to screen readers, and indexable by search engines.

In this example:

Custom fonts are displayed with the @font-face rule.
Font metrics are adjusted via line-height, letter-spacing, color, opacity, and text-shadow.
Text is rotated with -webkit-transform.