simplefocus/flowtype.js

FlowType.JS is a jQuery plugin that automatically adjusts the font size on a web page based on how wide the containing element is. The goal is to keep text at a readable line length, roughly 45 to 75 characters per line, across all screen sizes. Without something like this, setting a fixed font size often results in lines that are either too long on wide screens or too short on narrow ones. The plugin works by measuring the width of a target element, then computing and setting a font size that produces a good character count at that width. You apply it by calling a single jQuery function on any element, and all child elements inside it are updated as well. The fontRatio option controls how aggressively the font scales, and you can set minimum and maximum width thresholds so the scaling stops at certain breakpoints. Installation requires including jQuery and the FlowType.JS script on your page, setting a base font size in CSS so the page still works for visitors with JavaScript disabled, and then calling the plugin before the closing body tag. The README includes step-by-step setup instructions and code examples for common configurations. There is an important note at the top of the README: as of 2021, the same effect can be achieved with plain CSS using what is called fluid typography, and the README links to a CSS-only approach. This means FlowType.JS is essentially a historical tool that solved a problem that CSS has since addressed natively. The plugin is licensed under the MIT license. Line-height support was removed in version 1.1 and the README recommends using unitless line-height values directly in CSS instead.