Home

Awesome

Vanilla fontFlex

VanillaJS extension (based on jQuery.fontFlex) for dynamically changing font sizes according to container / browser width. Intended for use with responsive or adaptive CSS layouts.

Installation

Include the fontFlex.min.js before the </body> of your HTML document:

<script src="fontFlex.min.js"></script>

How to Use

Define a default CSS font base by setting font-size: 1em and line-height: 150% on the body or intended element. Declaring the font-size is optional, but highly recommended in case javascript is disabled. Finally, call the plugin on said element.

Syntax Example

FontFlex({
    min: 20,
    max: 60,
    mid: 40,
    target: 'h1'
});

Custom Parameters min Minimum font-size in pixels max Maximum font-size in pixels mid Mid-range buffer. Values ranging from 60 to 70 produce the best results. Lower values produce a larger initial font-size, while higher values produce the opposite. Adjust accordingly to fit your requirements.

Browser support

IEChromeFirefoxOperaSafari
IE 9+ ✔Latest ✔Latest ✔Latest ✔Latest ✔

Contributing

Check CONTRIBUTING.md for more information.

History

Check Releases for detailed changelog.

License

MIT