Typesettings.css

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: Release 1.7 (14 kb)

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

  • 11/10/2017: Release 1.7, aesthetics fine tuning and small added.
  • 11/09/2017: Release 1.6, light and dark theming rework.
  • 11/08/2017: Release 1.5, color contrast update.
  • 10/02/2017: Release 1.4, heading font-size and font-weight rework.
  • 09/28/2017: Release 1.3, aside spacing fix, UI System Font implementation, and font-size rework.
  • 06/29/2017: Release 1.2, pre line wrap fix.
  • 02/09/2015: Release 1.1, various color and spacing fixes.

Modifiers

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

Example

<article class="typesettings sans-serif indented golden dark">
  • 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.

Bells & whistles

  • Awesome opening

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

    <article class="typesettings">
      <section> … </section>
      <section> … </section>
    </article>
  • Drop cap

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

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

Enhanced elements

  • p
  • ol
  • ul
  • aside
  • footer
  • header
  • hgroup
  • h1 ~ h6
  • blockquote
  • section
  • figure
  • small
  • 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
pre
{
  padding: .5em 1em; border-left: 5px solid $gray-light; background-color: $gray-lightest;
}

H1 Article Title

H2 Article Subtitle

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header
Figure caption