TypeLock.js

View Demo

Clamping typography for your responsive needs using a combination of JavaScript(ES6) and CSS variables. 2 KB of pure fuel. Supports CommonJS-like environments and AMD module loaders.

Example

:root {
--foo-bar: number;
--bar-foo: number;
}
.element {
font-size:calc(var(--foo-bar) * factor);
line-height:calc(var(--bar-foo) * factor);
}

"factor" can be whatever you want to use as a numerical value within your math logic.

<scriptsrc="path/to/directory/typelock.js"></script><script>addTypeLock({cssvar: '--foo-bar',min: number,max: number,factor: number});addTypeLock({cssvar: '--bar-foo',min: number,max: number,factor: number});</script>

addTypeLock({}) can be called as many times as you need it, but be mindful that you're manipulating CSS with JS so your performance will vary.

©2017 Typeplate. Licensed under MIT. Special thanks to Tommy Hodgins, Chris Wallis and Mathew Chase.