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

  • By Joshua Rudd
  • Last update: Jan 8, 2023
  • Comments: 4

Typeset.css

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

What this is

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.

And what this is not

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.

When to use this

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™.

Why this was made

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.

How to use this

  1. Download and add the typeset.css file to your page.
  2. Add the typeset class to the parent element that wraps the content you want styled with Typeset.css.

Example:

<div class="typeset">
  <p>Like the generations of leaves, the lives of mortal men. Now the wind scatters the old leaves across the earth, now the living timber bursts with the new buds and spring comes round again. And so with men: as one generation comes to life, another dies away.</p>
</div>

Also, check out https://joshuarudd.com/typeset.css/ for examples of all the HTML elements styled with Typeset.css.

Github

https://github.com/joshuarudd/typeset.css

Comments(4)

  • 1

    Added applet tag in the media section

    Just as with the embed and object tags I assume you would want to style the applet tag the same. If not only to fully live up to the claim of styling all markup ;-)

    It is already present in the meyer reset part.

  • 2

    License

    I'd suggest MIT cause it's awesome:

    Copyright (c) 2012 Joshua Rudd

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  • 3

    Line heights in em?

    I noticed that you are setting line heights in ems. I switched to using unit less line height a while back and like it a lot better. The big advantage is that when you change the font size the line-height will adjust automatically.

  • 4

    2.0

    Typeset 2.0 adjusts line-heights of all elements to align on a 1.5em baseline grid. It’s not overly strict, so inline images can push the baseline off a bit, but all text should align nicely.

    • Added CSS variables for colors (with fallback defaults for IE 11)
    • Removed outdated and unnecessary vender prefixes
    • Added optional typeset-baseline class for debugging the baseline grid
    • Added left border to block quotes

Popular Tag

Related