Typography utils

Table of Contents


typogr.js provides a set of functions which automatically apply various transformations to plain text in order to yield typographically-improved HTML.

typogr.js is inspired by these awesome packages:

It's recommended to install via npm:

npm install -g typogr


typogr.js has no external dependencies and can be used both on the server and in the browser.

// Only for server side 
var typogr = require('typogr');
typogr.typogrify('<h1>"Pretty header ...</h1>');
'<h1><span class="dquo">&#8220;</span>Pretty header&nbsp;&#8230;</h1>'
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/ekalinin/typogr.js/master/typogr.min.js"></script>
$(document).ready(function() {
// Only for server side 
var typogr = require('typogr');
typogr('<h1>"Pretty header ...</h1>').typogrify();
'<h1><span class="dquo">&#8220;</span>Pretty header&nbsp;&#8230;</h1>'
// Only for server side 
var typogr = require('typogr');
typogr('<h1>"Pretty header ...</h1>').chain().initQuotes().value();
'<h1><span class="dquo">"</span>Pretty header ...</h1>'
typogr('<h1>"Pretty header ...</h1>').chain().initQuotes().smartypants().value();
'<h1><span class="dquo">&#8220;</span>Pretty header &#8230;</h1>'


Wraps ampersands in HTML with <span class="amp"> so they can be styled with CSS. Ampersands are also normalized to &amp;. Requires ampersands to have whitespace or an &nbsp; on both sides. Will not change any ampersand which has already been wrapped in this fashion.

Wraps initial quotes in <span class="dquo"> for double quotes or <span class="quo"> for single quotes. Works inside these block elements:

  • h1, h2, h3, h4, h5, h6
  • p
  • li
  • dt
  • dd

Also accounts for potential opening inline elements: a, em, strong, span, b, i.

  • Straight quotes ( " and ' '") into “curly” quote HTML entities (‘ | ’ | “ | ”)
  • Backticks-style quotes (``like this''') into “curly” quote HTML entities (‘ | ’ | “ | ”)
  • Dashes (“--” and “---”) into n-dash and m-dash entities (– | —)
  • Three consecutive dots (“...”) into an ellipsis entity (…)

Based on Shaun Inman's PHP utility of the same name, replaces the space between the last two words in a string with &nbsp; to avoid a final line of text with only one word.

Works inside these block elements:

  • h1, h2, h3, h4, h5, h6
  • p
  • li
  • dt
  • dd

Also accounts for potential closing inline elements: a, em, strong, span, b, i.

Wraps multiple capital letters in <span class="caps"></span> so they can be styled.

Wraps number suffix's in <span class="ord"></span> so they can be styled.

Applies all of the following filters, in order:

  • amp
  • widont
  • smartypants
  • caps
  • initQuotes
  • ord


A command line interface can be used to typogrify html files.

% typogr --help

  Usage: typogr [options] [input] [output]


    -h, --help     output usage information
    -V, --version  output the version number
    -i, --inplace  Use single path as both input and output
    -f, --force    Do not prompt to verify file overwrites

  reads input from stdin, individual files, directories, or globs
  writes ouput to stdout, individual files, or directories


    $ typogr inputFile.html outputFile.html
    $ typogr < inputFile.html > outputFile.html
    $ typogr -i singleFile.html
    $ typogr inputDirectory outputDirectory
    $ typogr inputDirectory/*.html outputDirectory


See LICENSE file.