Minimal Type Boilerplate

Typesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101.

Download: Regular | Minified

How to use

  1. Include typesettings.css in the head section after your main stylesheet:

    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="path/typesettings.css">
  2. Add class="typesettings" to your article element:

    <article class="typesettings"> … </article>

Change Log

2/9/2015: Release 1.1, various color and spacing fixes.


Modifiers are additional classes you can add to the class="typesettings" element.

  • sans-serif

    class="sans-serif" sets the body text to sans-serif and heading text to serif.

  • indented

    class="indented" uses indents instead of paragraph spacing.

  • golden

    class="golden" turns on the golden ratio between article width and white space (on large screens).

  • dark

    class="dark" applies a dark theme to the article.

<article class="typesettings sans-serif indented golden dark">

Bells & Whistles

Awesome Opening

If you want to enable the awesome opening (such as the opening on this very page), organize your article using sections.

<article class="typesettings">
  <section> … </section>
  <section> … </section>

Drop Cap

You can activate drop cap by using a combination of header + p.

<article class="typesettings">
    <header> … </header>
    <p> … </p>

Enhanced elements

  • p
  • ol
  • ul
  • h1 ~ h6
  • aside
  • hgroup
  • header
  • footer
  • blockquote
  • section
  • figure
  • code
  • pre
  • hr

Kitchen Sink

Paragraphs. Bold, italic, linked, code.

Chuck shank kielbasa, shankle ground round corned beef ribeye pig filet mignon alcatra ball tip. Kielbasa ham drumstick pastrami. Sirloin kevin bacon, ribeye swine.

Bresaola pork capicola ham, doner turducken beef. Strip steak rump flank salami fatback meatloaf, short loin bresaola kevin cupim leberkas drumstick. Doner meatloaf t-bone turkey meatball rump ball tip drumstick short loin.

Pull quote FTW leberkas capicola tri-tip porchetta turducken short ribs shoulder salami. Pork belly tail alcatra turducken prosciutto hamburger picanha.

  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  padding: .5em 1em; border-left: 5px solid $gray-light; background-color: $gray-lightest;

H1 Article Title

H2 Article Subtitle




Figure caption