Представьте себе, что вы отправились в гипермаркет или любой другой магазин и подошли к прилавку с множеством баночек с бальзамами, масками и прочее. Это могут быть даже небольшие по объёму упаковочки с кетчупом или йогуртом, сметаной. Обычно вы будете читать их почти все, отыскивая нужное и одновременно изучая ассортимент, прежде чем решите, что именно сегодня вы хотите купить.
Теперь представьте, что было бы, если текст на упаковках был на треть мельче.
Вероятно, вам пришлось бы подойти ближе или попросить кого-то вам помочь (консультанта, рядом находящегося покупателя), если ваши глаза не такие уж и зоркие. Но это – вы. Другие просто уйдут, не сказав ни слова. Попробуют поискать товар в других магазинах или в интернете. Но все эти покупатели и вы тоже могут быть сравнены с посетителями сайта, которые либо быстро покидают его, если что-то им не нравится, либо продолжают изо всех сил изучать контент. Даже если этот контент трудно прочитать.
Но ведь достаточно часто мы реально видим на сайтах мелкий шрифт. И им пишут целые статьи, а не просто оформляют подписи или инфоблоки. Так почему же в веб-дизайне мы так часто ищем способы и возможности уменьшить шрифт? Почему приходится почти каждую страницу принудительно увеличить в масштабе в браузере? Как ко всему этому относятся крупные компании? Где искать «золотую середину»? Много вопросов…много…
Веб-дизайн многогранен и шрифт, типографика только часть всего этого айсберга. Не менее важная часть, чем все прочее. Ввиду того, что достаточно много внимания мы будем уделять именно размеру шрифта, то не лишним будет сразу иметь под рукой удобную и небольшую таблицу соответствия разных размеров и соотношений.
Большой объем контента
Когда мы создаем дизайн для сайта и уже ориентировочно знаем сколько и какой информации на нем будет, то подсознательно хотим, чтобы пользователи узнали как можно больше. Касается это перечня услуг, продуктов, контактов и другого. Возникает естественное желание убедиться, что мы смогли продемонстрировать много информации и вся она способна соответствующим образом ответить на волнующие посетителей вопросы.
Из всего общего контента, что уже имеется у веб-дизайнера, только часть является подавляющей. И это в том случае, если правильно подобрать размер шрифта. И вполне естественно, что необходимость уменьшить шрифт нужна, чтобы все прочее лучше соответствовало целостному содержанию страницы.
Но вот что занятно. Хотя это и визуально уменьшает объем содержания, это совсем не означает, что пользователь прочитает от начала и до конца. Считается, что при первом визите на сайт посетители читают в среднем только 28% всего контента, а если читать трудно лично для них, то и того меньше. И это особенно важно учитывать при работе над целевыми страницами, над Landing Page, над целостным содержанием.
Для примера посмотрим на проекты Omegario2016.sport, Longines, Сила граната, Gradprogroup. Каждый из них использует разный подход к размерам шрифта и, соответственно, не все материалы удобно читать. Например, при разрешении 1080р буквы крупные, но строчки настолько близко друг к другу, что приходится концентрироваться и слегка «напрягаться». Если уменьшить размер окна браузера, то размер шрифта тоже скалируется и становится мелким до безобразия. Иные примеры, напротив, обладают статическим размером и типографика более удобна и красива в целом.
Стремление к мобильности
С каждым днем мы осознаем все большую и большую необходимость создавать дизайн сайтов для любителей мобильных устройств. И это еще одна из причин почему шрифт становится в веб-дизайне все меньшим и меньшим. Происходит своеобразное игнорирование создания уникальной типографики для разных по размеру экранов устройств. Иными словами – упрощение, единый вариант для всех. Разумеется, что для тегов «h» и «p» диапазон 20px и меньше для мобильных экранов может показаться привлекательным, но на настольных системах его уже можно с трудом различить.
Остается только, что называется, «сглаживать углы» и подбирать тот шрифт, который будет подходить для адаптивного дизайна более всего. Станет разборчив одновременно при разрешении 1080р и на малых экранах.
Для наглядности: при большом разрешении и 100% масштабировании окна браузера сравните, как выглядят страницы на Ria.ru, Вести, RBC и Izvestia.ru. Поначалу вы можете сказать: «Они похожи». Когда же начнете читать материалы, смотреть заголовки, осознаете визуальную разницу, влияющую на восприятие и скорость поиска нужного.
Размер – вершина айсберга
Некоторые веб-дизайнеры используют или рассматривают использование шрифтов размером 20-24рх (весь контент и заголовки). Но это не означает, что у них не возникает проблем с типографикой.
Высота строки, стили шрифта, кернинг и толщина – каждый из параметров играет свою важную роль в сочетании с выбранным размером шрифта. И дизайнерам приходится уделять время тому, чтобы убедиться в слаженной их работе, в способности шрифта и типографики в целом обеспечить наилучший пользовательский опыт. Подробно на моменте типографики останавливаться не будем, но обратим внимание на проекты Gradprogroup, Polyus, Storyteller, Shiftage, 9r.ru. Все они обладают разной типографикой, которая весьма хорошо «усваивается». Более того, несмотря на то, что иногда шрифт мал по размеру, текст удобно читать ввиду большой ширины между строк, расстоянию между буквами, выбранного стиля.
Крупный шрифт и читаемость
Крупный шрифт не только обладает большим визуальным весом и удобен в восприятии, но может стать и большим разочарованием посетителей. И это не удивительно, поскольку зачастую пользователи сканируют текст поверхностно, поглощая основные моменты, а не читают его слово в слово. И мелкий шрифт для этого более приемлем к использованию, так как позволяет человеку быстрее просмотреть контент.
Но интернетом пользуются люди разных возрастов. А с возрастом зрение ухудшается у всех в разной степени. Пожилые люди могут долго менять очки в попытке прочитать новости на сайте или иную информацию и им все равно придется увеличивать масштаб страницы в окне браузера. И эта проблема всех взрослых. И не стоит полагать, что интернет только для молодых и исключительно для них. Давно уж нет.
Работая над дизайном всегда задаешься вопросом: «для какой аудитории сайт». И если есть предположение, что молодая аудитория будет «терпеть» мелкий шрифт, то и это тоже заблуждение. Впрочем, терпеть она будет, но до тех пор, пока реально не заинтересуется контентом. С этого же момента и ей тоже придется увеличивать размер шрифта или масштаб страницы, чтобы спокойно и неторопливо вникнуть в суть.
Нужен ли крупный шрифт?
У большого размера шрифта есть явные преимущества. Он увеличивает скорость чтения (исследования IBM/Google и Университета Пайаме Нур). А еще считается, что и на эмоции положительно воздействует. Но так или иначе, крупные, четкие и понятные взору заголовки позволяют быстрее классифицировать спектр разделов для чтения. Люди приходят на новостной портал или блог и ищут что-то конкретное. Если заголовки мелкие, то поиск будет осуществляться утомительно долго. Проекты Новости Яндекс, Политика сегодня, Росбалт, Взгляд яркие примеры того, как крупный шрифт не вредит ни главной странице, ни внутренним.
Но проекты Spbdnevnik, vm и аналогичные, напротив, обладают однотипным шрифтом, что не позволяет при первом посещении сообразить, где и что на сайте.
Обратная сторона всего этого – критичность хорошей читаемости целевых страниц для конверсии. Хорошие и четкие заголовки значительно сокращают время пребывания на страничке. Именно поэтому, если цель – интересный контент, то заголовки и крупный шрифт могут позволить привлечь внимание к содержанию. А если конверсия и время пребывания, то придется искать «золотую середину».
Какой он – хороший размер шрифта
Ответ на такой вопрос зависит от многих и многих факторов. У каждого веб-мастера свой собственный набор правил, методов и уравнений для подсчета и создания набросков стилей для контента на разных страницах. Важно при этом отметить, при выборе шрифта нельзя думать только о его размере. Адаптивный дизайн, такой важный в эти дни, требует, чтобы размер шрифта скалировался для разных размеров экранов различных устройств в обеспечение удобства чтения и восприятия.
Есть хороший материл, в котором не просто собраны соответствия исчисления разных размеров шрифтов, но и представлен код CSS.
Существует также сайт type-scale, где можно выбрать семейство шрифтов и подобрать оптимальный размер, единицу измерения, толщину, сгенерировать CSS и многое другое.
Но если вы еще не определись с идеями и вдохновением, что же выбрать для своего сайта удобное одновременно для всего и для всех, то предлагаем еще некоторые примеры отличного использования типографики. Особенность в том, что она и на конверсию положительно влияет, и читаемость при 1080р удобна, и на разных устройствах проблем нет.
Dallasnews использует крупные заголовки материалов, крупное меню и достаточно четкий шрифт в статьях. При этом если уменьшать окно браузера, то и текст будет скалироваться и размер шрифта уменьшаться. А это означает, что на мобильный устройствах напротив, выглядит будет более чем читабельно.
Еще один новостной проект Wired. Стоит уделить ему внимание хотя бы потому, что шрифты используются по-разному. То заголовок создан обычным крупным шрифтом, то жирным и из другого семейства, а иногда заголовок выглядит не крупнее основного материала. Что же мы видим, перейдя на статью? Её удобно читать в разрешении 1080р. Можно просто откинуться на стуле/кресле и читать про Оби-Вана, даже без увеличения масштаба страницы. Более того, выделения созданы другим шрифтом, а потому взгляд концентрируется на этом и весь контент не сливается.
Почти похож и проект Gz с тем исключением, что типографика на сайте предлагает при небольшом размере шрифта весьма удобное чтение. И достигается это путем больших абзацев. Иными словами, каждый абзац представляет собой текстовой блок, который можно изучить «по диагонали», но можно и вдумчиво прочитать. Затем перейти к следующему. И только оттого, что все они объедены в одну общую тему, воспринимается контент, как единое целое. Разумеется, должное место занимает и курсивный текст, и выделенные жирным цитаты, и пр.
Не менее интересны будут сайты: The New York Times, Chekotin, Otpbank, RD Construction, Kerama-orel, Бикод, Crossproduction. Все они в той или иной степени обладают тем размером шрифта, которым удобно читать разным людям.
Выводы
Веб-дизайн не только занятие для дизайнеров, это и опыт для пользователей. После любого своего достижения задача мастера – проверить, какой резонанс это достижение оказывает на целевую аудиторию. В случае же стремления постоянного улучшения своего дизайнерского опыта, необходимо как можно больше работать над оптимизацией уже имеющегося, над проведением разных экспериментов. Размер шрифта может быть разным, разной может быть типографика, но художественный стиль единым. И только от того, каким будет создан текст и шрифт зависит то, как будет выглядеть проект в интернате и как его воспримут окружающие вас люди.
Разумеется, в рамках одной такой статьи невозможно поразмышлять о том, как размер шрифта конкретно влияет на восприятие, как человеческий взгляд анализирует текст, как значимы источники света и возраст, и о многом другом.
Универсального рецепта нет и быть не может. Но «золотая середина» найдётся там, где дизайн будет органичен и лаконичен. Там, где любой из ваших знакомых скажет: понятно, четко, я увидел и с первого раза понял, что и где находится.