Readme adapted here for use in the Gantry 5 Template Framework

Responsive web typography at its finest. Font-size based on element width. Check out the demo site.

Ideally, the most legible body typography contains between 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 based on a specific element's width. This allows for a perfect character count per line at any screen width. FlowType can also be used on other elements of varying width, such as logo text.

1. Download the flowtype.js file. Download the latest release.

   a. Replace $( with jquery( When I did it, there were only two replacements.

2. Put the revised flowtype.js file on your server.

3. In Gantry 5, put a Custom HTML particle in your template header. This particle will be invisible in the front end. We are just using it to hold some script. In the next two steps, you will tell Flowtype where to take effect and how to behave.

4. In the Custom HTML particle paste the flowtype call script, for example:

   '<script src="your-path-to-this-file/flowtype.js"></script>'

   '<script type="text/javascript">'
   jquery = jQuery.noConflict();
jquery(document).ready(function() {
// jquery('body').flowtype({
   `// minimum : 500, pixel units. You set min and max width of browser window for FlowType action.'

      `//   maximum   : 1200,`   
   
      `//   minFont   : 12,         pixel units. You set min and max font size for FlowType action. `   
   
      `//   maxFont   : 20,`   
   
      `//   fontRatio: 35           Integer only. Smaller number makes font shrink faster as browser window narrows. fontRatio is the ratio of character string width / line height. `   
   
      `//   });`   
   
   
     `jquery("body").flowtype({         /* Example: body is an element tag that you might choose to be affected by Flowtype. */`   
   
          `minFont: 12,`   
   
          `maxFont: 30,                 /* Notice there is a comma after maxFont: 30,  */`   
   
          `fontRatio: 35                /* Notice there is NO comma after fontRation: 35  */`   
   
      `});`  
   
   
       `jquery("#logo-text").flowtype({     /* Example: #logo-text is a div ID that I used to have my logo font affected by Flowtype. */`   
   
           `minFont: 8,`   
   
           `maxFont : 40,`   
   
           `fontRatio: 30`   
   
       `});`   
   
   `});`   
   

   </script>

   Note that all the apostrophes (') are artifacts of the Wiki and not part of the code.

To actually display my logo, I put my logo in a different Custom HTML particle, which will show on the front end, and put the word logo-text in the block CSS ID.

5 - In your CSS style sheet or in your Custom.scss, the element's font-size should be in em units for FlowType to affect font size. For example:

  'Body`
 `{`
   `font-size: 1em;                  /* example */`
 `}`

 `h1,h2,h3,h4,h5,h6,p`
 `{`
   `line-height: 1.45;                /* recommended */`
 `}`

 `H1 {font-size: 2em;}                 /* examples */`
 `H2 {font-size: 1.5em;}    `
 `H3 {font-size: 1.25em;}  `
 `H4 {font-size: 1em;}      `
 `H5 {font-size: .83em; }`
 `H6 {font-size: .75em; }`

 `#logo-text`
  `{`
     `font-size: 1.75em;                  /* example */`
  `}`

Note that all the apostrophes (') are artifacts of the Wiki and not part of the code.

6 - In Gantry 5 / your template name / Base Outline / Page Settings / Atoms / JavaScript Frameworks / JQuery, tick Framework over to green. Apply and save. That activates jQuery as a resource.

7 - Narrow or widen your browser window and watch the font size change. Adjust Items #4 and #5, above, as needed.

This wonderful piece of magic has been brought to you by the team at Simple Focus. Follow Simple Focus on Twitter: @simplefocus.

FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.

This procedure and Readme was adapted for Gantry 5 by Pintobuck, who used it for his logo in a Gantry 5 Hydrogen template. You can see the logo text contract or expand as you narrow or enlarge your browser window size.

Expert advice was received from:

@mahagr , Gantry 5 development project at Github.com; and forum development at Kunena.org

MrT, Gantry 4 & Gantry 5 template development and expert support at Rockettheme.com