—— Typeset.css

Typeset.css is a Sass library that provides some sensible default styles, optional classes to use & extend as needed, and some utility functions & mixins to make elevating your typography simpler.

# Installation

Install using either npm or bower, or download the latest release from GitHub and include it in your project manually.

npm install --save typeset.css

After installing, @import the main Typeset file into your Sass as usual — ideally after any "resets", but before your custom styles.

# Configuring

Typeset's default variables are located in _settings.scss. Update and enable different styles and functionality by defining new values for these before including _typeset.

Some of Typeset's variable and mixin names can be prefixed with an optional namespace string, in cases where the names cause a conflict.

$typ-namespace: null !default;

$typ-font-size:   16px !default;
$typ-line-height: 28px !default;

$typ-use-headings:  false !default;
$typ-use-opentype:  false !default;
$typ-use-ampersand: false !default;

# Utilities

Use these mixins & functions for simple, fine-grained control over advanced typography settings.

# Opentype control

Opentype settings provide a lot of control over typefaces that support them. Browsers don't currently provide fine-grained control over the different options; only font-feature-settings is widely-available, which doesn't allow for inheriting settings.

Use the opentype function, in conjunction with a baseline array of Opentype settings to cleanly adjust the settings you need on different elements.

$typ-ot-base: (
    'kern' 1,
    'liga' 1,
    'calt' 1,
    'pnum' 1,
    'tnum' 0,
    'onum' 1,
    'lnum' 0,
    'dlig' 0
) !default;

h1, h2, h3 {
    font-feature-settings: opentype('dlig' 1);
}

# Tracking

The typ-tracking() mixin provides an easy way to adjust letter-spacing. Using the same tracking value from Photoshop as a parameter, the mixin converts that to an em value.

.selector {
    @include typ-tracking(-10);
}

.selector {
    letter-spacing: -0.01em;
    font-kerning: normal;
}

There is also an optional parameter for text that will be centered. The letter-spacing property will add space even after the last letter. The mixin adds the same amount of space to the opposite side of the text, maintaining the visual center alignment.

.selector {
    @include typ-tracking(50, center);
}

.selector {
    margin-left: 0.05em;
    letter-spacing: 0.05em;
    font-kerning: normal;
}

# Measure

The typ-measure() applies a max-width property of the number passed to it in ch units. It also applies some hyphenation properties, although these aren't widely supported. The mixin accepts optional parameters for a min-width property, as well as centering with auto left and right margins.

.selector {
    @include typ-measure(66);
}

.selector {
    max-width: 66ch;
    hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-lines: 3;
    hyphens: auto;
    word-break: break-word;
}

Take hyphenation to the next level by manually modifying the DOM with a JS library like Hypher.

# Ampersands

Occasionally, you may want to set ampersands in a different typeface for a little extra flair. Set the font-family using the variables, and apply the class or extend it onto the element you like.

# Dropcaps

The typ-dropcap() mixin gives a starting point for styling the initial letter of a paragraph. Include it with your own styles in a class and apply the class to a paragraph to see the effect.

.dropcap {
    @include typ-dropcap() {
        font-size: 5.5em;
        font-weight: 800;
        line-height: 1;
    }
}

.dropcap::after {
    display: table;
    clear: both;
    content: '';
}

.dropcap::first-letter {
    float: left;
    font-size: 5.5em;
    font-weight: 800;
    line-height: 1;
}

# Defaults

# Paragraphs

Base paragraph elements don't have much extra styling applied, besides a single-direction margin, but there are a couple of related classes useful for particular cases:

.lede

Apply this to a paragraph — usually the first in an article — to have it stand out.

.indented

Apply this on an element containing paragraphs to change the paragraph separation style.

A lead, or lede, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.

<p class="lede">...</p>
<p>...</p>

The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted. On the web, the most common method of separating paragraphs is using an extra leading or a blank line. Chunks of paragraphs make skimming online content easier.

<section class="indented">
    <p>...</p>
    <p>...</p>
</section>

# Blockquotes

Default block quotation styles assume a particular semantic, accessible markup style.

<figure>
    <blockquote>
        <p>The future is already here — it's just not very evenly distributed.</p>
    </blockquote>
    <figcaption>
        <small>William Gibson, from an interview in <cite>Fresh Air</cite>, NPR (31 August 1993)</small>
    </figcaption>
</figure>

# Lists

All lists — <ul>, <ol>, and <dl> — have a single-direction margin declaration. Nested lists have no margin-bottom.

Definition lists in particular, have updated styling. For simpler styling, clear hierarchy, and better spacing, <dt>s have an increased font-weight and <dd>s change margin-left to zero and a margin-bottom of half the base line-height.

# Address

<address> elements are for presenting contact information for the nearest ancestor (or an entire body of work). The element is updated to match regular body copy; font-style from italic to normal, inherited line-height, and margin-bottom matching the base line-height.

# Phrasing elements

a

Anchors de­fine a hy­per­link, a des­ti­na­tion of a hy­per­link, or both.

abbr

Used for ab­bre­vi­a­tions Dr. or ini­tialisms like HTML. Combine with a title at­tribute or con­tain­ing dfn el­e­ment on the first in­stance to pro­vide de­f­i­n­i­tion.

cite

According to the HTML 5 Specification, the cite el­e­ment rep­re­sents a ref­er­ence to a cre­ative work.

code

When rep­re­sent­ing HTML code, re­mem­ber to en­code the re­served char­ac­ters < and > with their HTML en­tity equiv­a­lents (< and >, re­spec­tively).

del

While s and del ap­pear to per­form the same func­tion mark­ing ob­so­lete con­tent they dif­fer in pen­dantryse­man­tics.

dfn

The dfn el­e­ment in­di­cates the defin­ing in­stance of a term.

em

Use the em el­e­ment to em­pha­size text.

i

For­eign words used in Eng­lish are some­times ital­i­cized, some­times not, de­pend­ing on how com­mon they are. For in­stance, you would ital­i­cize your bête noire and your Weltan­schau­ung, but not your crois­sant or your ré­sumé.

ins

The ins el­e­ment rep­re­sents a range of text that has been addedin­serted into a doc­u­ment.

kbd

Denotes user in­put, typ­i­cally key­board in­put, such as ⌘ + S.

mark

Denotes the rel­e­vance of a span of text, as op­posed to its im­por­tance, such as text that has been marked or high­lighted.