Правильная адаптивная типографика с FlowType.JS

от автора

image

Согласно законам типографики, контент страницы хорошо читается, если в строке от 45 до 75 символов. При разработке адаптивного дизайна это сложно реализовать только лишь с помощью Media Queries. Появился jQuery плагин FlowType, который помогает добиться такого соотношения при любом размере экрана и ширине окна.

FlowType меняет размер шрифта и междустрочный интервал в соответствии с шириной блока контента. Кроме того можно задавать параметры плагина, например максимальную и минимальную ширину окна, при которой FlowType будет работать:

$('body').flowtype({  minimum : 500,  maximum : 1200 }); 

А также пределы размеров шрифта на странице:

$('body').flowtype({  minFont : 12,  maxFont : 40 }); 

Из-за того, что все шрифты различаются, иногда целесообразно задать некий коэффициент, который будет масштабировать шрифт в междустрочный интервал на странице для лучшей читабельности:

$('body').flowtype({  fontRatio : 30,  lineRatio : 1.45 }); 

FlowType — проект с открытым кодом (страница на GitHub), распространяется под лицензией MIT. Демонстрация, где весь контент масштабируется плагином.

ссылка на оригинал статьи http://habrahabr.ru/post/191106/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *