The stylesheets linked below are a summary of the best practices covered in the previous sections. Each stylesheet is heavily commented; while some elements may be adjusted it is recommended that most should not, as vertical rhythm and white space would be compromised. The stylesheets are designed with a base size of 16 pixels, with appropriate line-spacing and content area min and max-widths.
The stylesheets cover all aspects of text - font-stacks, sizes and weights; line-spacing and line length (through min/max-width); lists and menus; headings, body text and sidebar text. While the demos below have html page structures it is intended that these would be used by id and class reference only, and should be discarded after use.
The stylesheets are further broken into four categories -all serif, all sans-serif and two combined serif and sans-serif styles. Sample pages have been included for each style. There is also a minified version of each style — harder to read, but smaller in size.
Serif headings and body text
- Stylesheet (commented, zipped, CSS 8.1k).
- Stylesheet (minified, zipped, 2.2k).
- Demo — opens in a new tab.
Sans-serif headings and body text
- Stylesheet (commented, zipped, 8.1k).
- Stylesheet (minified, zipped, 2.2k).
- Demo — opens in a new tab.
Serif headings and sans-serif body text
- Stylesheet (commented, zipped, 8.3k).
- Stylesheet (minified, zipped, 2.3k).
- Demo — opens in a new tab.
Sans-serif headings and serif body text
- Stylesheet (commented, zipped, 8.3k).
- Stylesheet (minified, zipped, 2.3k).
- Demo — opens in a new tab.
License
These works are offered under the Creative Commons Attribution- ShareAlike license model. Others may remix, tweak and build upon these works, including for commercial purposes, as long as this author is credited and the new creations are licensed under identical terms. All new works based on this will carry the same license, therefore any derivatives will also allow commercial use.
View license deed | View Legal code