Правильная адаптивная типографика с 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. Демонстрация, где весь контент масштабируется плагином.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 7

      +2
      Полезная штука, спасибо!
        +1
        Иногда получается странный эффект совместно с адаптивным дизайном.

        Там в примере есть раздел с колонками, которые занимают примерно четверть ширины, и шрифт «мельче обычного», выглядит как какая-нибудь «дополнительная информация». Пока ширина окна достаточная для отображения колонок, все нормально, но при уменьшении ширины колонки ставятся друг под другом и растягиваются на всю ширину, и в этот момент шрифт становится очень большой, крупнее обычного, почти заголовочный.

        Т.е. на десктопе одна и та же информация выглядит как дополнительная, а на мобильнике будет выглядеть как доминирующая. Понятно что плагин лишь реализует алгоритм, но все же эффект может оказаться неприятный.
          +4
          Не используйте эту гадость, пожалуйста, по крайней мере без max-width



          Кликабельно, разрешение экрана 1920х1200
            0
            Да, выглядит не привычно, но текст читается достаточно легко, проще, чем если бы, допустим, первый абзац занимал бы 2 строки.
            0
            Имхо размер шрифта можно только ступенчато изменять. А не непрерывно.

            По адаптивному дизайну мне больше всего нравится, как у mashable.com/ сделано
              0
              Сыровато. Нет плавности и иногда шалят те самые отступы!
              0
              А что делать при масштабировании SVG, как оставить шрифт читаемым, при этом не делая огромным?

              Only users with full accounts can post comments. Log in, please.