WebAppers

/ best free open source web resources /

Shopify

Use Responsive Web Typography with FlowType.js

Posted · Category: CC License, Tools

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size, and subsequently the line-height based on a specific element’s width. This allows for a perfect character count per line at any screen width.

Additional options allow you to configure FlowType.JS to fit your needs. These options include element size thresholds, font-size thresholds and font-size/line-height ratios. You have full control over the base font-size and line-height ratios, so that you can set your typography perfectly. FlowType.JS is extremely easy to use.

flowtype-js

Requirements: JavaScript Enabled
Demo: http://simplefocus.com/flowtype/
License: Creative Commons 3.0 License

2 Comments
  • John Wilson

    Thanks for the post guys! It might be worth nothing that we change the license from CC to MIT.

  • Michael Montana

    Just wanted to take the time to thank you for the script. I came upon an article talking about using this script to help readers follow along better. Being an avid reader I surely did agree with the article. So I am applying it to my site articles! To everyone in the Open Source Community that contributed their talent and time, I just want to say , YOU ROCK! You are helping us create jobs here in America and all around the world!

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons