About
Flowtype.js is a JavaScript library that alters the font size and line height of text based on the width of a web element or browser viewport.
Education
The presence of flowtype.js allows for more responsive text adjusting to the size differences between desktop monitors or mobile phone screens.
Improves the user experience by preventing text from becoming ineligible and maintaining a consistent look of a website or application.
Saves time on development by reducing the need to manually adjust the CSS and allows designers to focus on the design rather than worrying about responsiveness.
Will only work on the element and child elements that are specified in the closing document's call.
Installation Guide
Step 1: Set Typography Base
Prepare for FlowType.JS by making sure that the typography is flexible. Start with this CSS and make changes as necessary:
Step 2: Download from GitHub
Download FlowType.JS on GitHub and include both the jQuery and the flowtype.jQuery.js file in the head of your HTML document.
GitHub DownloadStep 3: Call FlowType.JS
To begin the process, simply call FlowType.JS before the close of your body tag:
Step 4: Make Changes
Make changes to the default settings. To do so, simply include these options in your code and tweak away:
Examples
Ex 1:
Ex 2:
Text Resizing Demo
Resize your browser window or use the slider to adjust text size.
Sample Text
This paragraph demonstrates dynamic text resizing. As you resize your browser window or adjust the slider, you'll notice that the font size changes to maintain readability. This ensures that the text always looks great, regardless of the screen size or your preference.
Ex 3
Team Members
Amina King
Caitlynn Campbell
Interactive Design Major
Game Design and Development Major
Reev Manikandan
Technical Communication Major
Scott Rzasa
Interactive Design Major