Итак, у вас есть резиновый лейаут и изображения, которые меняют размеры, но вам нужно заставить так же изменяться и текст. Один и тот же размер шрифта не подойдет ко всем возможным размерам экранов!

Мы привыкли думать, что для изменения размеров тескта достаточно указать значение относительно размеров базового шрифта, используя em’ы или проценты. В адаптивном web-дизайне мы пишем кучу правил и устанавливаем кучу ограничений, чтобы удостовериться, что наш лейаут хорошо отображается на различных разрешениях. Текст — это замечательная изменчивая среда, но, указав один размер не получится красиво заполнить им страницу. Мы рассмотрим несколько простых советов как добиться того, чтобы текст красиво заполнял лейаут, невзирая на размер экрана или устройство на котором он отображается.

Конечно, это слишком обширная тема, чтобы раскрыть ее в одном уроке. Поэтому в конце перечислено несколько полезных ресурсов на эту тему.

Заставляем типорграфику масштабироваться

Ах, этот адаптивный web-дизайн! Эти прекрасные резиновые сетки и медиа-запросы (media queries), которые помогают нашим дизайнам заполнять экраны любых размеров. К счастью для нас текст может масштабироваться практически безгранично и заполнять любой контейнер, в который мы его поместим. Наврядли нам нужно что-то еще придумывать для наших адаптивных дизайнов… или нужно? В идеале, когда наш основной лейаут масштабируется, то же должен делать и текст, и вот один способ как этого добиться.

Наша тестовая страница

Для нужд этого примера я приготовил очень простую страницу, которая использует для демонстрации несколько первых абзацев из произведения “Алиса в Стране чудес” в качестве рыбы. Ваш сайт, надеюсь, представляет из себя нечто большее, но простота этой страницы идеально подходит нам для наших тестов, а эта техника может быть применена и к более сложным страницам.

Давайте взглянем на наш исходник и посмотрим, что у него под капотом. <h1> в качестве заголовка и несколько параграфов, обернутых в <div>, которому назначен класс wrap. Мы используем этот контейнер для управления длиной строки в нашем примере. Для вашего сайта ширина контейнера будет основываться на вашей сетке и ее адаптивном поведении, но идея остается неизменной.

Быстрое погружение в CSS расскажет нам, что мы установили размер шрифта у body в 100% (что, для справки, составляет около 16px). Размеры остальных елементов задаются при момощи em. Замечательно! Мы взяли хороший старт:

body {
    font-size: 100%;
    line-height: 1.6875;
    font-family: Georgia;
}

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

Сначала проверяем наименьший экран

Давайте начнем смотреть на нашу разметку на экране очень маленькой ширины, допустим что-то около 320 пикселей по ширине. примерно это вы увидите на большинстве популярных мобильных устройствах.

Изначально, при такой малой ширине ширина строки будет немного меньше чем общепринятая оптимальная длина в 45 — 75 символов. Или, если вы не фанат подсчета количества символов в строке, вы можете заметить, что строки кажутся короткими и за текстом трудновато следить. Лично я, как правило, часто перечитываю строку по несколько раз.

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

Чтобы справиться с ситуацией, давайте напишем медиа-запрос для максимальной ширины в 400 пикселей. Да, это не 320 пикселей, но я предпочитаю устанавливать ограничения там где дизайн в них действительно нуждается, а не основываясь на размерах экранов у устройств.

Самый простой способ сменить размер всех шрифтов — сменить font-size у

:

@media only screen and (max-width: 400px) {
    body {
        font-size: 90%;
    }
}

Благодяря тому факту, что мы изначально указали размеры шрифтов в em, мы можем сменить все размеры на странице, просто исправив одну строчку кода. Слава относительным размерам шрифта!

Движемся дальше

Если мы сделаем так как делают web-дизайеры и продолжим увеличивать окно браузера до огромных размеров, наш контейнер с текстом начнет становиться все больше и больше и текст в нем будет перерисовываться так, чтобы заполнить его целиком. Все так как мы и ожидаем. Но проследите за длиной строки. Когда пояляется ощущение, что она слишком длинная?

Примерно при ширине 800 пикселей (ширина всего окна браузера) длина строки становится некомфортно длинной. Похоже пришло время добавить еще одно ограничение для нашего текста.

@media only screen and (max-width: 800px) {
    body {
        font-size:100%;
    }
}

@media only screen and (max-width: 1100px) {
    body {
        font-size: 120%;
    }
}

Вот как теперь выглядин наша страничка при любой ширине окна между 800 и 1100 пикселями. Мы получили немного больше рабочего места и наш текст заполняет его немного более красиво.

В этот раз мы написали два медиа-запроса. Один для максимальной ширины 800px с font-size у body. установленным в 100%, который покрывает диапазон размеров окна между 500px и 800px. И второй, для тех случаев, когда ширина окна больше 800px, и позволяет нам увеличить базовый размер шрифта.

увеличил базовый размер шрифта до 120% когда мы проходим отметку в 800 пикселей, чтобы получить длину строки примерно такую, какая мне нравится. Конечно это всего лишь мои ощущения, которые зависят от контента как такового и от окружающих элементов. Выбирайте граничные точки и изменения масштаба, которые имеют смысл для вас и вашего дизайна. Главная цель — достичь комфортного чтения и сбалансированной сетки. Тестирование ваших лейаутов не только изменяя размеры окна браузера, поможет достичь наилучших результатов.

Иии… полетели!

Догадайтесь, что будет дальше, я собираюсь продолжить растягивать окно браузера шире и шире и посмотрю что произойдет. Неудивительно, что длина строки снова растет и достигает неудобных размеров примерно при ширине в 1100px. Пришло время для еще одной граничной точки? Мы можем продолжить добавлять и добавлять точки сколько угодно, но, кажется, это не очень умно, этому уже не видно конца!

Технически, вы можете продолжать масштабирование бесконечно. Однако, скорее всего, ваш макет и изображения этого не могут. В какой-то момент нам надо будет остановиться. И для этого простенького демо я решил остановиться на 1100 пикселях.

Осталось дописать последний медиа-запрос. Я хочу, чтобы что-то останавливало нашу строку от дальнейшего роста, чтобы мы могли все застыло на том моменте когда мы имеем приемлемую длину строки. Самы легкий путь сделать это — добавить максимальную ширину диву, содержащему текст.

Для начала, нам надо определить приблизительную ширину нашего дива с содержимым. Если ширина окна браузера равна 1100 пикселям, а ширина дива-обертки равна 70%, то совсем чуть-чуть математики дас нам 770 пикселей (1100 * 0.7).

Вооруженные этой информацией отредактируем наш последний медиа-запрос:

@media only screen and (min-width: 1100px) {
    body {
        font-size: 120%;
    }

    .wrap {
        max-width: 770px;
    }
}

Шрифт в нашем демо теперь такого размера, какой мы захотели.

Ну вот и все. Простая техника, позволяющая вашему тексту оставаться красивым и комфортным для чтения на широком диапазоне разрешений экранов.

Суммируя все воедино

Даже из такого простого примера вам должно быть ясно, что вы должны быть аккуратны в выборе, когда ставите ограничения для шрифта при контроле длины строки. А что же тогда на счет интерлиньяжа и иерархии? На них так же влияет изменение размеров текста и контейнера. Есть еще так много тем для изучения!

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

Дальнейшее чтение

Это простенькое демо только вершина айсберга. Если типографика для адаптивного web-дизайна вас заинтересовала, то вот несколько рекомендаций по чтению:

• Тим Браун (Tim Brown) делает замечательную работу, собирая техники и вещи, о которых можно задуматься применительно к web-типографике.
• Есть не только проценты и em’ы, когда разговор заходит об изменении размеров текста в web. Итан Маркотт (Ethan Markotte) рассказывает об этом подробней в блоге Typekit.
• Тяжело говорить о типографике не вдаваясь в дискуссии по поводу вертикального ритма. Эта классическая статья на 24 ways рассказывает об этом подробней (И не пропустите урок Мэта Уилкокса (Matt Wilcox) о сохранении вертикального ритма при помощи CSS и jQuery).
• И, наконец, взгляните на урок Пола Роберта Ллойда (Paul Robert Lloyd) о том как построить адаптивный сайт за неделю. Сегодняшняя 2 часть об адаптивной типографике и сетках

Перевод статьи Handling typography for responsive design автора Val Head

P.S. Это тоже может быть интересно:

• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Не боритесь с каскадом, управляйте им!
• Удар откуда не ждали: псевдокласс :has() ломает сайты на jQuery