HTML is a semantic markup language, but web-browsers' default presentation of semantic HTML is more based on compatibility with decades-old browsers than with readability. There are browser-addons that will take a page, strip out the presentational markup and try to present the result in a readable format, but that shouldn't be necessary if you've got sensible semantic markup to begin with.

Typesetter.css is a custom stylesheet designed to present generic, semantic HTML in the most readable way possible.

See the demonstration, or check out the git repo.


Typographic goals already achieved include:


There are certain kinds of formatting that are deliberately avoided:


To use Typesetter.css, follow these instructions:

First, copy the contents of the output directory to a convenient place in your documentation tree.

Then, add the following markup to the <head> element of each HTML document you want rendered with Typesetter.css:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="typesetter.css">

Make sure the href attribute points to the actual location of typesetter.css!

Note: Typesetter.css is designed for standards-compliant web-browsers; to put your browser into the most standards-compliant rendering mode it has, make sure the HTML starts with the HTML5 doctype:

<!DOCTYPE html>

...and if you're unsure, it's a good idea to run your HTML through the HTML5 validator to catch any markup errors that might cause your browser to get confused.


Note that output/typesetter*.css is generated from src/typesetter*.less via the LESS CSS pre-processor. If you want to submit patches, please edit the source files rather than the output files. LESS version 1.3 or higher is required, since older versions seem to mess up the formatting of negative numbers.