FontFlex – Change font sizes dynamically

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.

Related post:  Roll-out Navigation with CSS3 Transitions

Browser Support

– Google Chrome
– Safari ( Desktop and Mobile )
– Internet Explorer ( 9, 10, 11 )
– Firefox

 Live Demo  Download


Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close