在理想的情况下，最易读的版式包含每行的字符在45和75之间。所有的屏幕宽度只用 CSS 媒体查询是很难完成的。
FlowType.JS 简化了这一困难，基于 特定元素的宽度改变字体大小和随后的行高的，这使得在任何屏幕都有完美的排版。
Thresholds
Set minimum and maximum width thresholds to control the FlowType.JS magic within specific element widths.
In this example, FlowType.JS will stop resizing text once the element width becomes smaller than 500px or larger than 1200px.
$('body').flowtype({
minimum : 500,
maximum : 1200
});
Set minimum and maximum font-size thresholds to control the FlowType.JS magic within specific font sizes.
In this example, FlowType.JS will stop resizing text once the font-size becomes smaller than 12px or larger than 40px.
$('body').flowtype({
minFont : 12,
maxFont : 40
});
Font-size and line-height
Set your own font-size and line-height usingfontRatio and lineRatio variables.
When setting the font-size using fontRatio, increase the value to make the font smaller (and vice verse).
Note: Because each font is different, you will need to tweak fontSize and eyeball your final product to make sure that your character count is within the recommended range.
Line-height (lineRatio) is set based on thefontRatio size, and defaults to 1.45 (the recommended line-height for maximum legibility).
$('body').flowtype({
fontRatio : 30,
lineRatio : 1.45
});
Step 1: Set Typography Base
Prepare for FlowType.JS by making sure that the typography is flexible. Start with this CSS and make changes as necessary:
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;
}
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.