Typeset.css

A no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content.

You can download this project in either zip or tar formats.

Inline elements

Common user-generated content includes anchors, bold and italic text.

Also common phrase tags are <code>, strong and emphasis (much like bold and italic).

Additional inline styles

Lists

Block-level elements use line-height: 1.3em; and margin-bottom: .7em; to stack vertical space, like this paragraph!

Unordered lists

Ordered lists

  1. Ordered list item 1
  2. Ordered list item 2
    1. Nested list item 2.1
    2. Nested list item 2.2
  3. Ordered list item 3

Definition list

Term
Description of an item in a definition list.

Block elements

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquotes

Because WYSIWYG editors use <blockquote> to indent content, we haven’t styled other than a left margin.

Preformatted text

Text in a <pre> element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks

Tables

Table caption
Table Header Another column
Column 1 Column 2

Media

Images

“He’ll never know #happyfriday” by chadbercea

Figures

I Will Never Lego
I Will Never Lego - print

Embeds

Fork me on GitHub