Стандарты типографики в веб-дизайне и интернет-пространстве сместились. Нет, они изменялись давно, но заметнее стало сейчас. Дизайнеры чаще используют большой по размеру шрифт, объясняя это легкочитаемостью и визуальным удобством на всех типах устройств. Тенденция же крупногабаритной типографики началась с негабаритных вариаций заголовков, названий и разного рода художественных вариаций.
Одновременно с этим размеры основного текста (контента) изначально начали увеличиваться на мобильных устройствах для повышения читабельности. Здесь, да, крупный шрифт только в радость, поскольку обычное масштабирование (пальцами по экрану) зачастую делает чтение неудобным. И, как следствие, тенденция большеразмерного шрифта начала рушить почти все аспекты веб-типографики. Если вы еще не задумывались о размере шрифта на вашем сайте за последнее время, пришло время вернуться к размышлениям о 12-ти/14-ти point/pixel (точки/пиксели) размере контента и увеличении.
Негабаритные заголовки
Самая очевидная – и самая простая – реализация большого текста – использовать негабаритные заголовки, чтобы привлечь внимание пользователя. Негабаритный заголовок реализовывает себя лучше всего, когда не содержит большого количества длинных или сложных слов, что способны затруднить его беглое прочтение. Суть в том, что заголовок должен «схватываться» сознанием посетителя практически мгновенно, а это обычно достигается, если слова коротенькие и их мало.
Например, wonderlandams, madeofmillions, monogranofelicetti, moscowtimes. Как можно увидеть, везде название сайта, отдельные заголовки хоть и написаны крупным шрифтом, они быстро прочитываются и не выглядят грубыми.
Кроме того стоит обратить внимание на такие моменты:
Шрифты serif или sans serif подходят более всего, так как, с одной стороны, они бычно используются для основного контента, поэтому создавать шрифтовую пару становится гораздо проще. С другой стороны, использование художественного шрифта или совершенно иного по стилю способно разрушить целостность восприятия дизайна.
Чтобы найти гармонию и подобрать именно тот, «большой» размер, попробуйте начать с очень большого, а затем немного уменьшайте.
Также лучшим вариантом (как альтернатива предыдущему) является начало работы с текстом, что имеет размер 80 точек (pt), а затем расширяйте его. Используйте относительный размер для шрифта, поскольку в дальнейшем он будет масштабироваться соответствующим образом на всех устройствах (с соответствующим правилом CSS-«font-size», в котором используется процентная шкала на основе стандартного 100-процентного размера).
Негабаритный размер контента
Если основной контент создан с помощью шрифта размером до 16 пунктов, то его теперь тоже увеличивают. Но без фанатизма. Впрочем, корни такой тенденции находятся именно в мобильной сфере, так как в большинстве случаев такой текст приходится увеличивать на экранах некоторых смартфонов. И это способно раздражать пользователей. Решили прочитать новость/статью, а её еще визуально настраивать надо. Если речь заходит об исправлении дизайна – это зачастую создание нового уровня типографики, который настолько велик, насколько контент легко читать и понимать.
Кроме того, цель работы с типографикой заключается в том, что текст на мобильном устройстве удобно читается, когда находится на естественном расстоянии (как правило, около половины длины руки, что похоже на чтение книги).
Больший шрифт может оказаться более удобным на этом расстоянии и более подходящим под размер экрана. Пользователи не должны прищуриваться или приближать устройство к своему лицу, чтобы понять текст и разобрать буквы.
Что уместно предпринять в данном случае?
Начинайте с размера контента в 16 пунктов и смотрите, как он будет выглядеть на экране РС и смартфонах (эмуляторы или ваш собственный). Но обычно именно такой размер более всего и приемлем для большинства устройств.
Шрифт должен быть разборчивым, а пользователи не должны задумываться над тем, какая «эта» буква: «б», «в» или строчная витиеватая «д».
Отдельные страницы со статьями, возможно, стоит оформить иначе, чем иные на том же сайте. Чтобы уменьшить напряжение зрения, вполне уместно использовать размер шрифта в 18-20 пунктов. Хотя тот же сайт Jeffrey Zeldman создан со шрифтом в 24 точки. А выглядит вполне уместно и невычурно.
Общая иерархия
В общем и целом, вся идея большого размера шрифта сводится к тому, что недостаточно только того, чтобы увеличить размер шрифта в том или ином блоке текста. Необходимо переосмысливать всю иерархию типографики. Проще говоря, увеличивая размер основного текста, нужно масштабировать и весь прочий текст (заголовки, сноски, меню и пр.). В противном случае вы можете столкнуться с таким явлением, как «несоразмерная шкала». Это когда один размер текста очень сложно отличить от другого. А уж понять, где один блок, а где другой – и вовсе невозможно.
Впрочем, когда дело доходит до увеличения размера шрифтов в заголовках или подзаголовках создание иерархии привлекает меньше внимания дизайнера. Причина в том, что когда эти элементы становятся больше в размере, естественное различие от текстовых блоков становится явным и очевидным. Поэтому в данном случае необходимо рассмотреть возможность увеличения общего размера основного текста, а также, если он начинает выглядеть неуместно или большой размер шрифта заголовков делает основной текст меньше, чем он есть на самом деле. Оптические иллюзии могут разрушить проектную иерархию.
Например, spaceapegame, cisrussia, cblife по-разному подошли к определению размера основного текста и, как результат, где-то его удобно читать на экране РС, а где-то и не слишком. Что уж говорить тогда о мобильных версиях.
Именно поэтому стоит помнить вот что:
Настройку размеров текста необходимо делать пропорционально друг другу во всем дизайне, на всех страницах.
Контраст цвета и размера может повлиять на восприятие дизайна и на иерархию. Всегда ли уместно использовать черный цвет подзаголовков при сине-белом дизайне. А если подзаголовки окрасить в такой же синий или его ближайший оттенок? Попробуйте поэкспериментировать.
Не забудьте доверять своим глазам. Например, если текст выглядит слишком большим или маленьким, продолжайте вносить коррективы, пока вы сами не почувствуете, что вот он тот момент, когда вам самим все понятно читать и приятно смотреть.
Изменение межстрочного интервала
Одновременно с тем, как происходит увеличение размера шрифта, происходит, что логично, и увеличение интервала между строк. В противном случае, все буквы и слова попросту бы сливались и смешивались в «винегрет». Здесь необходимо отметить тот момент, когда текст вписывается в элемент или размещается поверх крупного изображения. Такие варианты априори требуют увеличения интервала между строчками для удобочитаемости. Более того, допускаются и достаточно часто применяются веб-дизайнерами варианты, когда текст вписывается не полностью, а частично, будто бы сам находится поверх элемента.
Если же говорить о размере интервала, то в данном случае (тенденции к большим шрифтам) он (интервал) высчитывается на основе процента от размера текста, а не обладает какой-то фиксированной высотой. Таким образом, эти изменения будут автоматически подстраиваться под разные размеры окна браузера и экраны устройства.
Посмотрите на emiratesintegra (В каждом блоке текста размер шрифта разный, и при этом межстрочный интервал тоже, но гармония и иерархия не позволяют «глазам разбежаться» по странице). Также на cosavostra (Интересная типографика, но… не слишком удобная. Текст сливается, а если еще и курсор переместить (не кликнуть), то видео будут появляться автоматически и еще и проигрываться.). Аналогичный вариант brighte, но с большими интервалами и более простым шрифтом, а потому читаемость более удобна. А также: agencedebord, plansandpixels, mystream (текст описания услуг, реально…мелковат, а заголовки слишком крупные.).
Добиться гармонии можно, если:
Попробуйте начать с интервала, увеличенного в 1,5 раза (150 процентов) от размера шрифта текста. Если текст сливается, буквы написаны слишком плотно – увеличивайте интервал между строками.
Сочетание изображения и текста требует повышенного контраста, чтобы и текст был понятен, и фон. Поэтому в данном случае необходим дополнительный межстрочный интервал для создания более гармоничного ощущения, восприятия дизайна. Так, например, если фон черный, а текст белый, то интервал хорошо добавить, а если фон серый – то интервал может быть средним. В случае с owingsbrothers уместно немного увеличить интервал, не слишком, но чтобы буквы все же не задевали друг друга. А на сайте blackflagcreative, напротив, текст удобно читать, вне зависимости от размера и яркости цвета.
Уделите внимание высоким и длинным буквам, буквам с длинными элементами, хвостиками и так далее. По ним выравнивайте также интервал и не допускайте сливания.
Завершение
Сложно не заметить в большинстве дизайнерских проектах резкое изменение в размере шрифта. И здесь не идет речь о том, каким должен быть шрифт контента и насколько пунктов его увеличивать: 14 или 16. Речь идет о повсеместном увеличении размера типографии для всего дизайна пропорционально. Мы и раньше не раз останавливали свое внимание на том, что крупный шрифт удобен для чтения на современных больших разрешениях экрана РС и на мобильных устройствах.
Но одно дело стремиться немного увеличить шрифт, но при этом писать все сжато и плотно, другое – следовать наступившей тенденции. И здесь главным становится уже опасность уподобиться «сороке, падкой на блестяшки» и не начать во всем дизайне и во всех проектах увеличивать и увеличивать шрифт. Как мы видели выше, есть увеличение и увеличение. Одно – гармоничное и оправданное, другое – словно разрывает экран монитора, кричит о себе и даже в какой-то мере заставляет пользователя еще дальше отодвинуться от экрана, чтобы осознать, что написано (оно ведь такое крупное, на экране еле умещается).
Но то, что постепенно входило в моду, вошло уже окончательно. Споров еще в начале года было немало о том, каким быть размеру шрифта на сайтах. К концу года появились закономерности, с которыми мы и встретим следующий год.