Web Typography Examples

The css rules for the examples in this demo page below are in the head tag of this individual html file. View the source code and you can see it all.

Example: Web Safe Typography

This is an example of type styled with the basic options available to all systems, with a descending list of font-family preferences. They are just that: preferences; the reader’s settings trump the styling by you.

Example: Subscription Web Fonts

This section shows type that has been styled with free Google Web Fonts. Look at the link tag appearing right after the opening of the head tag, and at the individual CSS rules for the classes in this section to see the combined parts that enable this to occur.

This displays a font called Sorts Mill Goudy.

This displays a font called News Cycle Bold.

This displays a font called Rosario Italic.

Example: @font-face

The type in the heading below has been styled with type supplied by Font Squirrel:

This font is called ChunkFive.