JS Library For Auto Resizing Text and Line-Height - FlowType.JS

File Size: 2.72 KB
Views Total: 1758
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
JS Library For Auto Resizing Text and Line-Height - FlowType.JS

FlowType.JS is a web typography javascript library that automatically adjusting the font size and line-height property of your text to fit the container's width. This allows for a perfect character count per line at any screen width.

Basic usage:

1. Include FlowType.JS script on your web page.

<script src="flowtype.js"></script>

2. Setting a specific font-size and line-height in your CSS file

body {
 font-size: 18px;
 line-height: 26px;
}
h1,h2,h3,h4,h5,h6,p {
 font-family: inherit;
 font-size: inherit;
}
h1 {
 font-size: 4em;
 line-height: 1em;
}
h2 {
 font-size: 3em;
 line-height: 1em;
}

3. Call the FlowType.JS with options

$('body').flowtype({
 minimum   : 500,
 maximum   : 1200,
 minFont   : 12,
 maxFont   : 40,
 fontRatio : 30,
 lineRatio : 1.45
});

This awesome jQuery plugin is developed by simplefocus. For more Advanced Usages, please check the demo page or visit the official website.