Typeset.css

tr.v  type · set  To set (written material) into type; compose.

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

Note

Typeset.css includes no vendor-prefixed properties — use Autoprefixer or a similar tool when compiling to ensure cross-browser support.

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;

Notable default settings; overwrite any of these in your own Sass code.

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);
}

Default Opentype settings and an example of using the Typeset function to change a single option while maintaining the rest of the defaults.

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;
}

Tracking mixin and CSS output. The font-kerning property is included to prevent a bug in Chrome & Opera from disabling any Opentype settings.

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;
}

Using the tracking mixin on centered text.

Measure

Note

The measure is the number of characters in a single line of a column of text. Anything from 45 to 75 characters is a satisfactory length of line. A 66-character line (counting both letters and spaces) is widely regarded as ideal.

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;
}

Basic measure setting and output.

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;
}

Basic usage of dropcap mixin.

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.

In print, first-line indent is often used to denote a new paragraph without interrupting the flow of reading. First-line indent is appearing more online for long-form reading. Whichever method you prefer, stick with one but not both.

The Elements of Typographic Style states that at least one en [space] should be used to indent paragraphs after the first, noting that that is the practical minimum. An em space is the most commonly used paragraph indent.

<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 (&lt; and &gt;, 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.