コニファ・ロゴ

csstest:jQueryプラグインFlowType.JSを使って、親要素のサイズに合わせて、フォントサイズ変更

下側のスライダーボタンを左右にドラッグすると、青いラインで囲まれた要素のサイズが変わります。そのサイズに合わせてフォントサイズも変わります。

What does FlowType.JS do?

Ideally, the most legible typography contains 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—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.

Additional options, reviewed below, allow you to configure FlowType.JS to fit your needs. These options include element size thresholds, font-size thresholds and font-size/line-height ratios. The element size thresholds will stop FlowType.JS from performing its magic once the element reaches beyond specific pixel dimensions. The font-size thresholds will stop FlowType.JS from resizing the text beyond certain font-sizes. Lastly, you have full control over the base font-size and line-height ratios, so that you can set your typography perfectly.

FlowType.JS is extremely easy to use. Visit the getting started section, follow the four easy steps and you will be on well on your way to performing magic.

Drag to watch the type change.

 

戻るボタン