by designify · in Web Design · September 1, 2014

FontFlex – Change font sizes dynamically

WebAdviser.io - On Demand Developers & Designers

Post Views: 11

FontFlex will help you cope with the many different device sizes and adjust the font accordingly and your content will look great.

Have you ever spent valuable time to make sure that the content on a particular web site you are building looks good on different devices?

Probably you did it by adding a lot of media queries and adjusted the CSS so you have a beautiful website with proportional looking content. Sometimes, you just do not have the time to do all this effort. So you might want to try FontFlex which is a useful solution to help you with that. This lightweight jQuery plugin is developed by Nathan Rutzky and it is intended to be used with responsive and adaptive CSS layouts.

FontFlex – Change font sizes dynamically
See how the magic happens:

Installation

Include the latest version of jQuery and jQuery.fontFlex.js in the <head> of your HTML document:

<script src="jQuery.min.js"></script>  
<script src="jQuery.fontFlex.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

$(function() {

  // All elements
  $('body').fontFlex(14, 20, 70);

  // H1 only
  $('h1').fontFlex(24, 36, 70); 

});

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.