jQuery: flexible text with FitText and BigText
Following my posts about the new mobile generation and the consequent need to create web site compatible with mobile devices like tablets and smartphones, I would like to introduce two smart jQuery plug-ins that will handle font size.
FitText can be used with fluid layouts and it can scale headlines that fill the width of a parent element.
How it works
As explained by the plug in author, FitText will resize the text according to the width of the parent element.
The basic usage, after linking to the jQuery library and FitText, is:
You can style your page as usual, but just keep in mind that if we set a font-size, that size will be our max-font-size.
FitText was designed to work with fluid layouts and it should be used in those scenarios.
BigText
On the same subject, BigText can calculate the size of a text and its word spacing to match it to a specific width. Basically, when we set the width of a container (a div for example), the text inside will use all the available space. Using the maxfontsize property we can change the default value (48 ems). At the same time we can set the initial font size (default is 11 px).
Happy coding to all!
FitText can be used with fluid layouts and it can scale headlines that fill the width of a parent element.
How it works
As explained by the plug in author, FitText will resize the text according to the width of the parent element.
The basic usage, after linking to the jQuery library and FitText, is:
$("#responsive_headline").fitText(1.2); // turn the compressor up (font will shrink a bit more aggressively)
$("#responsive_headline").fitText(0.8); // turn the compressor down (font will shrink less aggressively)You can style your page as usual, but just keep in mind that if we set a font-size, that size will be our max-font-size.
FitText was designed to work with fluid layouts and it should be used in those scenarios.
BigText
On the same subject, BigText can calculate the size of a text and its word spacing to match it to a specific width. Basically, when we set the width of a container (a div for example), the text inside will use all the available space. Using the maxfontsize property we can change the default value (48 ems). At the same time we can set the initial font size (default is 11 px).
Happy coding to all!
