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.
Install using either
bower, or download the
latest release from GitHub
and include it in your project manually.
Typeset.css includes no vendor-prefixed properties — use Autoprefixer or a similar tool when compiling to ensure cross-browser support.
@import the main Typeset file into your Sass as usual —
ideally after any "resets", but before your custom styles.
Typeset's default variables are located in
_settings.scss. Update and enable
different styles and functionality by defining new values for these before
Some of Typeset's variable and mixin names can be prefixed with an optional namespace string, in cases where the names cause a conflict.
Use these mixins & functions for simple, fine-grained control over advanced typography settings.
Opentype settings provide a lot of control over typefaces that support them.
Browsers don't currently provide fine-grained control over the different
font-feature-settings is widely-available, which doesn't allow
for inheriting settings.
opentype function, in conjunction with a baseline array of Opentype
settings to cleanly adjust the settings you need on different elements.
typ-tracking() mixin provides an easy way to adjust
Using the same tracking value from Photoshop as a parameter, the mixin converts
that to an em value.
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.
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.
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
property, as well as centering with auto left and right margins.
Take hyphenation to the next level by manually modifying the DOM with a JS library like Hypher.
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.
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.
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:
- Apply this to a paragraph — usually the first in an article — to have it stand out.
- 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.
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.
Default block quotation styles assume a particular semantic, accessible markup style.
All lists —
<dl> — have a single-direction margin
declaration. Nested lists have no
Definition lists in particular, have updated styling. For simpler styling,
clear hierarchy, and better spacing,
<dt>s have an increased
margin-left to zero and a
margin-bottom of half the base
<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
margin-bottom matching the base line-height.
- Anchors define a hyperlink, a destination of a hyperlink, or both.
- Used for abbreviations Dr. or initialisms like HTML. Combine with a
titleattribute or containing
dfnelement on the first instance to provide definition.
- According to the HTML 5 Specification, the
citeelement represents a reference to a creative work.
- When representing HTML code, remember to encode the reserved characters < and > with their HTML entity equivalents (
delappear to perform the same function
marking obsolete contentthey differ in pendantrysemantics.
- The dfn element indicates the defining instance of a term.
- Use the
emelement to emphasize text.
- Foreign words used in English are sometimes italicized, sometimes not, depending on how common they are. For instance, you would italicize your bête noire and your Weltanschauung, but not your croissant or your résumé.
inselement represents a range of text that has been
addedinto a document.
- Denotes user input, typically keyboard input, such as ⌘ + S.
- Denotes the relevance of a span of text, as opposed to its importance, such as text that has been marked or highlighted.