A no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content.
Typeset.css is a CSS file (typeset.css
) that includes all the styles you need to ensure content on your site is styled. Styles are only applied to areas that have a parent element with the class typeset
, so it can be target content-specific markup.
Typeset.css is not a CSS framework for styling the layout and design of your website - just specific blocks of content (e.g., blog posts, comments, forum content) that includes paragraphs, lists, code snippets, and so on.
Any time you have stripped a browser’s default styles or haven’t specified styles for content elements, use Typeset.css. It’s great for:
- Blog posts
- Articles
- Comments
- Helper text in web apps
- and any other content blocks on a page
Never again add content to your web page just to find that you don’t have a consistent style for it™.
Typeset was originally created for user-generated content on UserVoice feedback forums (here’s an example UserVoice forum), and then expanded to work with content generated by UserVoice-powered knowledge base articles (example article). Because users create these articles using a WYSIWYG editor with HTML-editing capabilities, we needed to make sure we had a base set of styles for any content-related markup.
- Download and add the
typeset.css
file to your page. - Add the
typeset
class to the parent element that wraps the content you want styled with Typeset.css.
Example:
<div class="comment-body typeset">
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
…
</div>
(Lorem ipsum generated by http://slipsum.com.)
Also, check out http://joshuarudd.github.com/typeset.css/ for examples of all the HTML elements styled with Typeset.css.