HEARTWOOD

still very much beta!

Providing a core for beautiful typography

This all begain as an experiment. A place to test and document interesting parts of web typography as I learned them.

It has turned into this growing list of Sass mixins. Git them on Github!

@mixin document-type
@mixin module-type
@mixin element-type
@mixin margin
@mixin p
@mixin dropcap
@mixin a
@mixin underline
@mixin h
@mixin code
@mixin hr
@mixin blockquote
@mixin list
@mixin list-reset

Font Size

Heartwood is based on the concept of setting the font size at different levels of the design. At the document level the size is set in percent, at the module level in rem's, and at the element level in em's.

This allows type to scale together or seperately depending on your needs. I first encountered this idea in this article by Chris Coyier. If you'd like to see a live demo check the link.

To use this system all you need to do is @include the correct mixins in your stylesheet.

Modular Scale is awesome so it is used to calculate the the relationship of the headings.

html {
  @include document-type;
}

header {
  @include module-type;
}

p {
  @include p;
}

Let's say the header needed to be scaled down for mobile. Easy!

header {
  @media (max-width: 486px) {
    @include module-type(0.75);
  }
}

Paragraphs & Headers

The majority of type on the web is in paragraph tags and heading tags. So let's make sure they are beautiful and legible. Paragraph tags have a simple mixin as you can see below and headings have one as well that takes the heading level as an argument.

p {
  @include p;
}

h1 {
  // Excepts levels 1 - 6
  @include h(1);
}

Links

The biggest trouble with the typography of links on the web is the dreaded underline. Browsers render "text-decoration: underline;" differently all the time. And invariably the underlines are too thick and of course they cut right through the descender's glyphs. I had pretty much dispaired until I read this article by Marcin Wichary of Medium's design team.

The underlines in Heartwood are based on this idea. The line is provided by setting a background image on the link tag. Then to prevent the descenders from being cut a text-shadow is set. This works great unless you find the link being placed on a background other than white.

Heartwood makes it easy to have either fancy or simple links.

a {
  // fancy by default
  @include a;
}

a {
  @include a(simple);
}

Other Elements

Though not as common there are some other important typographic elements we need to address.

// Monospaced font. This mixin is used on all the code blocks on this page.
@include code;
// Targets :first-child:first-letter of the element it's called on
@include dropcap;

Example of a dropcap Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod sit amet tortor non vulputate.

@include hr;

Example hr


@include list;

// Completely un-styles a list
@include list-reset;
  1. First
  2. Second
  3. Third
@include blockquote(quote);

When 900 years old, you reach... Look as good, you will not.

@include blockquote(border);

He's holding a thermal detonator!