Continuously responsive typesetting.
Branch: development
Clone or download
Latest commit 567a0e3 Jan 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore linked src instead of built file Jan 23, 2019
.npmignore Add .npmignore Jan 26, 2019
CHANGELOG.md edit Jan 25, 2019
CONTRIBUTING.md Minor Edits Jan 25, 2019
LICENSE
README.md copy edit Jan 24, 2019
gruntfile.js moved build to root, added js to watched files Jan 23, 2019
package-lock.json 0.9.9 Jan 26, 2019
package.json 0.9.9 Jan 26, 2019
textblock.min.js copy edit Jan 26, 2019

README.md

Textblock

A javascript tool for adjusting size, leading, and grades to cast continuously responsive typography. It works over your current CSS as a progressive enhancement.

The script calculates your setting based on minimum and maximum values for font size, line height, variable grades, and container width:

  • minimum/maximum font size
  • minimum/maximum line height
  • minimum/maximum container width
  • minimum/maximum grades (variable fonts only)

To initialize, add the element to be resized (required)

Textblock([{
  target:".some-element"
}]);

Parameters

  • target (required  ): The element that should be resized ".your‑class", "#some-id p"
  • minWidth: default 320
  • maxWidth: default 960
  • minFontSize: default 1.0
  • maxFontSize: default 1.8
  • minLineHeight: default 1.33
  • maxLineHeight: default 1.25
  • container: The container width to measure. Defaults to "parent" and can alternately be set to "self".
  • units: default em
  • minVariableGrade: A variable font weight for the small size, for example 450
  • maxVariableGrade: A variable font weight for the large size, i.e. 400

For a better sense of context, set your root em to 10px with html { font-size: 62.5%; }. This makes your em units base 10 so 2.4em = 24px. But any number will do because once you start adjusting the min/max numbers, the experience is more visual than calculated. And if you prefer a more scientific approach, Textblock gives you the control you need for setting systems like modular scales.

If you’re using variable fonts, the minVariableGrade / maxVariableGrade parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder).

Example Including Extra Parameters

Textblock([{
 target: ".some-class",
 minWidth: 280,
 maxWidth: 800,
 minFontSize: 1.9,
 maxFontSize: 2.6,
 minLineHeight: 1.33,
 maxLineHeight: 1.25,
 container: "self",
 units: "rem",
 minVariableGrade: 366,
 maxVariableGrade: 300
}]);

Multiple Elements with Different Settings

Textblock([
 {
  target: ".some-class",
  minFontSize: 1.9,
  maxFontSize: 2.6
 },
 {
  target: ".another-class",
  minFontSize: 2.4,
  maxFontSize: 3.6,
  container: "self",
  minVariableGrade: 450,
  maxVariableGrade: 400
 }
]);