diff --git a/.eslintrc.js b/.eslintrc.js index dacbda5..5bd4fbb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,6 +7,7 @@ module.exports = { "prettier" // ensures .prettierrc is honored ], "env": { - "browser": true // lets ESLint know `window` and `document` are defined + "browser": true, // lets ESLint know `window` and `document` are defined + "node": true // allows `module` to be used for gruntfile.js } } \ No newline at end of file diff --git a/README.md b/README.md index 9710a72..cf8726c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,19 @@ # 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. +A javascript tool for adjusting font size, leading, and more 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: +Based on your settings for the minimum and maximum widths of a flexible container, the script interpolates settings at the container's current width for: -- minimum/maximum font size -- minimum/maximum line height -- minimum/maximum container width -- minimum/maximum grades (variable fonts only) +- **font-size** +- **line-height** +- **letter-spacing** + +For [variable fonts][vf], the script can also adjust: + +- **font-weight** (to simulate grades — micro-variations in weight to set smaller sizes slightly bolder — for variable fonts with a `weight` variation axis) +- **font-stretch** (for variable fonts with a `width` variation axis) + +[vf]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## To initialize, add the element to be resized (required) @@ -19,22 +25,25 @@ Textblock([{ ## Parameters -- **`target`** (required  ): The element that should be resized `".your‑class"`, `"#some-id p"` -- **`minWidth`**: default `320` -- **`maxWidth`**: default `960` +- **`target`** (required): The element that should be resized `".your‑class"`, `"#some-id p"` +- **`container`**: The container width to measure. Defaults to `"parent"` and can alternately be set to `"self"`. +- **`minWidth`**: The container's minimum width in `px`. Defaults to `320`. +- **`maxWidth`**: The container's maximum width in `px`. Defaults to `960`. - **`minWidthFontSize`**: default `1.0` - **`maxWidthFontSize`**: default `1.8` +- **`fontSizeUnits`**: default `em` +- **`minWidthFontStretch`**: e.g. `80` (percentage values only) +- **`maxWidthFontStretch`**: e.g. `100` (percentage values only) +- **`minWidthFontWeight`**: e.g. `450` +- **`maxWidthFontWeight`**: e.g. `400` +- **`minWidthLetterSpacing`**: e.g. `.125` +- **`maxWidthLetterSpacing`**: e.g. `.25` +- **`letterSpacingUnits`**: default `em` - **`minWidthLineHeight`**: default `1.33` (unitless values only) - **`maxWidthLineHeight`**: default `1.25` (unitless values only) -- **`minWidthVariableGrade`**: A variable font weight for the small size, for example `450` -- **`maxWidthVariableGrade`**: A variable font weight for the large size, i.e. `400` -- **`container`**: The container width to measure. Defaults to `"parent"` and can alternately be set to `"self"`. -- **`units`**: default `em` 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 `minWidthVariableGrade` / `maxWidthVariableGrade` parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder). - ## Example Including Extra Parameters ``` @@ -46,8 +55,8 @@ Textblock([{  maxWidthFontSize: 2.6,  minWidthLineHeight: 1.33,  maxWidthLineHeight: 1.25, - minWidthVariableGrade: 366, - maxWidthVariableGrade: 300, + minWidthFontWeight: 366, + maxWidthFontWeight: 300,  container: "self",  units: "rem" }]); @@ -66,8 +75,8 @@ Textblock([   target: ".another-class",   minWidthFontSize: 2.4,   maxWidthFontSize: 3.6, -  minWidthVariableGrade: 450, -  maxWidthVariableGrade: 400, +  minWidthFontWeight: 450, +  maxWidthFontWeight: 400,   container: "self"  } ]); diff --git a/gruntfile.js b/gruntfile.js index 3ceecb4..8acd546 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -1,25 +1,32 @@ module.exports = function(grunt) { - // Project configuration. grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), uglify: { options: { - banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' + banner: '/*! <%= pkg.name %> <%= pkg.version %> */' }, textblock: { + options: { + mangle: { + properties: { + // compress object properties... + reserved: ['Textblock', 'units'] // ...but not these ones... + } + }, + reserveDOMProperties: true // ...or any used by the browser + }, files: { 'textblock.min.js': ['src/textblock.js'] } } }, - watch:{ + watch: { scripts: { - files:['src/demo.html', 'src/demo.css', 'src/textblock.js'], - tasks:['uglify:textblock'], + files: ['src/textblock.js'], + tasks: ['uglify:textblock'] } } }); @@ -31,5 +38,4 @@ module.exports = function(grunt) { // Defaults // grunt.registerTask('default', ['postcss:dist','uncss:dist']); grunt.registerTask('default', ['uglify:textblock']); - }; diff --git a/package-lock.json b/package-lock.json index f8e9aca..69663c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,17 +91,6 @@ "uri-js": "^4.2.2" } }, - "align-text": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", - "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", - "dev": true, - "requires": { - "kind-of": "^3.0.2", - "longest": "^1.0.1", - "repeat-string": "^1.5.2" - } - }, "ansi-escapes": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", @@ -232,15 +221,6 @@ "concat-map": "0.0.1" } }, - "browserify-zlib": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz", - "integrity": "sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=", - "dev": true, - "requires": { - "pako": "~0.2.0" - } - }, "browserslist": { "version": "1.7.7", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", @@ -303,16 +283,6 @@ "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=", "dev": true }, - "center-align": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", - "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", - "dev": true, - "requires": { - "align-text": "^0.1.3", - "lazy-cache": "^1.0.3" - } - }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", @@ -361,17 +331,6 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, - "cliui": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", - "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", - "dev": true, - "requires": { - "center-align": "^0.1.1", - "right-align": "^0.1.1", - "wordwrap": "0.0.2" - } - }, "coffeescript": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-1.10.0.tgz", @@ -426,17 +385,6 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, - "concat-stream": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.0.tgz", - "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "readable-stream": "^2.2.2", - "typedarray": "^0.0.6" - } - }, "connect": { "version": "2.3.9", "resolved": "https://registry.npmjs.org/connect/-/connect-2.3.9.tgz", @@ -607,6 +555,12 @@ "esutils": "^2.0.2" } }, + "duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=", + "dev": true + }, "ecc-jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", @@ -1278,23 +1232,51 @@ } }, "grunt-contrib-uglify": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/grunt-contrib-uglify/-/grunt-contrib-uglify-1.0.2.tgz", - "integrity": "sha1-rmekb5FT7dTLEYE6Vetpxw19svs=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/grunt-contrib-uglify/-/grunt-contrib-uglify-4.0.0.tgz", + "integrity": "sha512-vy3Vop2KDqdiwcGOGAjyKvjHFrRD/YK4KPQWR3Yt6OdYlgFw1z7HCuk66+IJ9s7oJmp9uRQXuuSHyawKRAgiMw==", "dev": true, "requires": { - "chalk": "^1.0.0", - "lodash": "^4.0.1", - "maxmin": "^1.1.0", - "uglify-js": "~2.6.2", + "chalk": "^2.4.1", + "maxmin": "^2.1.0", + "uglify-js": "~3.4.8", "uri-path": "^1.0.0" }, "dependencies": { - "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } } } }, @@ -1429,13 +1411,12 @@ } }, "gzip-size": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-1.0.0.tgz", - "integrity": "sha1-Zs+LEBBHInuVus5uodoMF37Vwi8=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz", + "integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=", "dev": true, "requires": { - "browserify-zlib": "^0.1.4", - "concat-stream": "^1.4.1" + "duplexer": "^0.1.1" } }, "har-validator": { @@ -1669,12 +1650,6 @@ "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", "dev": true }, - "is-buffer": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", - "dev": true - }, "is-builtin-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", @@ -1832,21 +1807,6 @@ } } }, - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } - }, - "lazy-cache": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", - "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", - "dev": true - }, "lcov-parse": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/lcov-parse/-/lcov-parse-0.0.10.tgz", @@ -1888,12 +1848,6 @@ "integrity": "sha1-euTsJXMC/XkNVXyxDJcQDYV7AFY=", "dev": true }, - "longest": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", - "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true - }, "loud-rejection": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", @@ -1921,15 +1875,15 @@ "dev": true }, "maxmin": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-1.1.0.tgz", - "integrity": "sha1-cTZehKmd2Piz99X94vANHn9zvmE=", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-2.1.0.tgz", + "integrity": "sha1-TTsiCQPZXu5+t6x/qGTnLcCaMWY=", "dev": true, "requires": { "chalk": "^1.0.0", "figures": "^1.0.1", - "gzip-size": "^1.0.0", - "pretty-bytes": "^1.0.0" + "gzip-size": "^3.0.0", + "pretty-bytes": "^3.0.0" } }, "meow": { @@ -3607,12 +3561,6 @@ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, - "pako": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz", - "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=", - "dev": true - }, "parent-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.0.tgz", @@ -3736,13 +3684,12 @@ } }, "pretty-bytes": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz", - "integrity": "sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-3.0.1.tgz", + "integrity": "sha1-J9AAjXeAY6C0gRuzXHnxvV1fvM8=", "dev": true, "requires": { - "get-stdin": "^4.0.1", - "meow": "^3.1.0" + "number-is-nan": "^1.0.0" } }, "process-nextick-args": { @@ -3833,12 +3780,6 @@ "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", "dev": true }, - "repeat-string": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", - "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", - "dev": true - }, "repeating": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", @@ -3898,15 +3839,6 @@ "signal-exit": "^3.0.2" } }, - "right-align": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", - "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", - "dev": true, - "requires": { - "align-text": "^0.1.1" - } - }, "rimraf": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", @@ -4384,12 +4316,6 @@ "prelude-ls": "~1.1.2" } }, - "typedarray": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", - "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", - "dev": true - }, "typedarray-to-buffer": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.2.tgz", @@ -4400,31 +4326,29 @@ } }, "uglify-js": { - "version": "2.6.4", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.6.4.tgz", - "integrity": "sha1-ZeovswWck5RpLxX+2HwrNsFrmt8=", + "version": "3.4.9", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", + "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", "dev": true, "requires": { - "async": "~0.2.6", - "source-map": "~0.5.1", - "uglify-to-browserify": "~1.0.0", - "yargs": "~3.10.0" + "commander": "~2.17.1", + "source-map": "~0.6.1" }, "dependencies": { - "async": { - "version": "0.2.10", - "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", - "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=", + "commander": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, - "uglify-to-browserify": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", - "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true - }, "underscore.string": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.5.tgz", @@ -4530,12 +4454,6 @@ "isexe": "^2.0.0" } }, - "window-size": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", - "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", - "dev": true - }, "wordwrap": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", @@ -4574,26 +4492,6 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", "dev": true - }, - "yargs": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", - "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", - "dev": true, - "requires": { - "camelcase": "^1.0.2", - "cliui": "^2.1.0", - "decamelize": "^1.0.0", - "window-size": "0.1.0" - }, - "dependencies": { - "camelcase": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", - "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", - "dev": true - } - } } } } diff --git a/package.json b/package.json index 069df78..8137c0f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "textblock", "version": "0.10.0", - "description": "A javascript tool for adjusting size, leading, and grades to cast continuously responsive typography.", + "description": "A javascript tool for adjusting size, leading, and weights to cast continuously responsive typography.", "main": "textblock.min.js", "license": "MIT", "README": "README.md", @@ -13,7 +13,7 @@ "eslint-plugin-prettier": "^3.0.1", "grunt": "^1.0.3", "grunt-contrib-nodeunit": "~0.4.1", - "grunt-contrib-uglify": "^1.0.0", + "grunt-contrib-uglify": "^4.0.0", "grunt-contrib-watch": "^0.6.1", "grunt-reload": "^0.2.0", "prettier": "^1.16.4" diff --git a/src/AmstelvarAlpha-VF.ttf b/src/AmstelvarAlpha-VF.ttf new file mode 100644 index 0000000..10b6411 Binary files /dev/null and b/src/AmstelvarAlpha-VF.ttf differ diff --git a/src/demo.html b/src/demo.html index abddeec..c53366e 100644 --- a/src/demo.html +++ b/src/demo.html @@ -16,37 +16,47 @@ target: ".saturn", minWidth: 400, maxWidth: 800, - minWidthFontSize: 18, - maxWidthFontSize: 24, - minWidthLineHeight: 1.33, - maxWidthLineHeight: 1.2, - units: "px" + minWidth_FontSize: 18, + maxWidth_FontSize: 24, + minWidth_LineHeight: 1.33, + maxWidth_LineHeight: 1.2, + fontSizeUnits: "px" }, { target: "#jupiter", - minWidthFontSize: 1.8, - maxWidthFontSize: 2.4, - minWidthVariableGrade: 490, - maxWidthVariableGrade: 400, + minWidth: 400, + maxWidth: 800, + minWidth_FontSize: 2.0, + maxWidth_FontSize: 4.6, + minWidth_FontWeight: 460, + maxWidth_FontWeight: 300, + minWidth_FontStretch: 100, + maxWidth_FontStretch: 50, + minWidth_LetterSpacing: 0.5, + maxWidth_LetterSpacing: 0, + letterSpacingUnits: "px", + minWidth_LineHeight: 1.3, + maxWidth_LineHeight: 1.1, container: "self" }, { target: ".mars", minWidth: 400, maxWidth: 800, - minWidthFontSize: 4, - maxWidthFontSize: 2, - minWidthLineHeight: 1, - maxWidthLineHeight: 2, - minWidthVariableGrade: 400, - maxWidthVariableGrade: 800 + minWidth_FontSize: 4, + maxWidth_FontSize: 2, + minWidth_LineHeight: 1, + maxWidth_LineHeight: 2, + minWidth_FontWeight: 400, + maxWidth_FontWeight: 800 }, { target: "#legacy-params", minWidth: 400, maxWidth: 800, - minFontSize: 1.8, - maxFontSize: 2.4, + minFontSize: 18, + maxFontSize: 24, + units: "px", minLineHeight: 2, maxLineHeight: 1, minVariableGrade: 490, @@ -56,6 +66,12 @@