diff --git a/LICENSE.txt b/LICENSE.txt index 5bc038f..2c4839a 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2013, Simple Focus [http://simplefocus.com] +Copyright (c) 2013-2014, Simple Focus [http://simplefocus.com] Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in diff --git a/README.md b/README.md index 3cc61d6..e115529 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # FlowType.JS # -Responsive web typography at its finest: font-size and line-height based on element width. +Responsive web typography at its finest: font-size ~~and line-height~~ based on element width. Check out the [demo site](http://simplefocus.com/flowtype). ## What does FlowType.JS do? ## -Ideally, the most legible typography contains [between 45 and 75 characters per line](http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/). 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. +Ideally, the most legible typography contains [between 45 and 75 characters per line](http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/). 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 line-height~~ based on a specific element's width. This allows for a perfect character count per line at any screen width. ## Options ## @@ -34,23 +34,32 @@ $('body').flowtype({ }); ``` -### Font-size and line-height ### +### Font-size ### -Set your own font-size and line-height using `fontRatio` and `lineRatio` variables. - -When setting the font-size using `fontRatio`, increase the value to make the font smaller (and vice verse). +Set your own font-size using the `fontRatio` variable. When using `fontRatio`, increase the value to make the font smaller (and vice versa). _Note:_ Because each font is different, you will need to "tweak" `fontSize` and "eye ball" your final product to make sure that your character count is within the recommended range. -Line-height (`lineRatio`) is set based on the `fontRatio` size, and defaults to 1.45 (the recommended line-height for maximum legibility). +~~Line-height (`lineRatio`) is set based on the `fontRatio` size, and defaults to 1.45 (the recommended line-height for maximum legibility).~~ See *line-height* below. ```javascript $('body').flowtype({ - fontRatio : 30, - lineRatio : 1.45 + fontRatio : 30 }); ``` + +### Line-height ### + +In v1.0 of FlowType, we made the plugin set a specific line-height in pixels. We received many statements that setting a specific line-height is very dangerous. So, what did we do? We removed support for line-height in v1.1. + +What do I do now? It's quite simple: use unitless line-height in your CSS. It will make automatically make changes based on whatever the font-size. Here's an example of what we suggest for `line-height`: + +```css +line-height: 1.45; +``` + + ## Getting Started ## ### Step 1: Set Typography Base ### @@ -60,28 +69,22 @@ Prepare for FlowType.JS by making sure that the typography is flexible. Start wi ```css body { font-size: 18px; - line-height: 26px; } + h1,h2,h3,h4,h5,h6,p { - font-family: inherit; - font-size: inherit; -} -h1 { - font-size: 4em; - line-height: 1em; -} -h2 { - font-size: 3em; - line-height: 1em; + line-height: 1.45; } + +h1 { font-size: 4em; } +h2 { font-size: 3em; } h3 { etc... ``` -_Note:_ Setting a specific font-size and line-height in your CSS file will make sure that your website remains accessible in case your viewer has javascript disabled. These numbers will be overridden as FlowType.JS updates the font-size and line-height numbers inline. +_Note:_ Setting a specific font-size in your CSS file will make sure that your website remains accessible in case your viewer has javascript disabled. These numbers will be overridden as FlowType.JS updates the font-size number inline. ### Step 2: Include FlowType.JS ### -After you have downloaded FlowType.JS, include the `flowtype.jQuery.js` in the head of your HTML document. +After you have downloaded FlowType.JS, include both jQuery and `flowtype.js` in the head of your HTML document. ### Step 3: Call FlowType.JS ### @@ -101,8 +104,7 @@ $('body').flowtype({ maximum : 1200, minFont : 12, maxFont : 40, - fontRatio : 30, - lineRatio : 1.45 + fontRatio : 30 }); ``` diff --git a/flowtype.js b/flowtype.js index f279184..5ed5162 100644 --- a/flowtype.js +++ b/flowtype.js @@ -1,8 +1,6 @@ /* -* If you create a derivative, please leave this text intact: -* -* FlowType.JS 1.0 -* Copyright (c) 2013, Simple Focus http://simplefocus.com/ +* FlowType.JS v1.1 +* Copyright 2013-2014, Simple Focus http://simplefocus.com/ * * FlowType.JS by Simple Focus (http://simplefocus.com/) * is licensed under the MIT License. Read a copy of the @@ -22,8 +20,7 @@ minimum : 1, maxFont : 9999, minFont : 1, - fontRatio : 35, - lineRatio : 1.45 + fontRatio : 35 }, options), // Do the magic math @@ -34,25 +31,18 @@ width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw, fontBase = width / settings.fontRatio, fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase; - - $el.css({ - 'font-size' : fontSize + 'px', - 'line-height' : fontSize * settings.lineRatio + 'px' - }); + $el.css('font-size', fontSize + 'px'); }; // Make the magic visible // ====================== return this.each(function() { - // Context for resize callback var that = this; - - // Set changes on load - changes(this); - // Make changes upon resize $(window).resize(function(){changes(that);}); + // Set changes on load + changes(this); }); }; -}(jQuery)); +}(jQuery)); \ No newline at end of file