Пользователи сайта = деньги

Какова главная цель создания сайта? В большинстве случаев эта цель – заработать деньги. Веб – сайт с уверенностью можно назвать бизнес-активом, а что же должен делать бизнес-актив? Приносить доход. Поэтому каждый элемент сайта должен быть понятен и удобен в использовании. Если вы «не объясняете», что люди должны делать на сайте или почему они должны что-то сделать, то они, как правило, этого делать не будут. Поэтому один из главных способов презентовать продукт пользователю – это использовать текст, а текст подразумевает чтение.
001

Поговорим о тенденциях

Современный дизайн задает свои тренды в использовании шрифта. Еще по-прежнему актуален минимализм и использование чистого «дышащего» пространства, поэтому довольно часто дизайнеры используют мелкий шрифтовой кегль, примерно 12 px. Где же баланс между красотой и удобочитаемостью? Ведь хочется сделать стильный макет и не провоцировать немолодых пользователей бежать за лупой.



112

Пример использования мелкого шрифта на сайтах

 
Так сколько же пикселей?

Один из крупнейших ресурсов для веб-дизайнеров и разработчиков smashingmagazine.com даёт своё осмысление этой проблемы.
Smashing magazine утверждает, если вы хотите, чтобы максимальное количество людей находилось на вашем сайте, читало, понимало текст, то нужно установить его минимальный размер в 16 px. Так же ресурс приводит несколько статистических фактов, над которыми нельзя не задуматься.
Почти каждый десятый пользователь имеет проблемы со зрением (приведена давнишняя статистика, поэтому думаем, что на сегодняшний день эта цифра гораздо больше). Остальным, у кого со зрением все в порядке, все равно придется напрячься, чтобы прочитать текст меньше 16 px. Даже если пользователи не замечают, что напрягают глаза, то, на самом деле, всё равно это делают. Чем труднее читать текст, тем меньше вероятность, что он будет прочитан. Это значит, что пользователь прочтет меньше информации, чем ему было нужно, а, следовательно, меньше поймет. Использование 10 px на сайте - совершенно бессмысленно, а 12 px - все еще слишком мелко для большинства читателей.

0002
Но возникает вопрос, ведь пользователи могут увеличить текст на том же десктопе при помощи клавиш на клавиатуре. Но опять же статистика говорит о том, что как раз те пользователи, которым это увеличение действительно необходимо, просто не знают об этой возможности и функции, либо просто не захотят этого делать, им проще уйти с сайта, чем продолжать дальше напрягать свои глаза. В итоге получается, что из-за размера шрифта бизнес может потерять потенциальных клиентов, а, следовательно, и деньги.
Так же необходимо учитывать особенности шрифта, используемого в проекте. Например, шрифты семейства Futura меньше по размеру шрифтов семейства Helvetica примерно на 10-15% при выставлении одинакового размера у обоих.

Ссылка на статью Smashing magazine: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

 

34

Примеры удобного для чтения размера шрифта

Что на счёт заголовков?

Нет универсального рецепта для выявления оптимального размера основного заголовка. Дизайн сайта, а, следовательно, и размер зависит от решаемой задачи. Главное правило любого заголовка – он должен быть заметен. Заголовок, как правило, несет в себе конкретный смысловой тезис, и дизайнер может его сделать сверхконтрастным по отношению к тексту, чтобы усилить посыл. Либо использовать данный метод, как дизайнерский приём. Данный прием используется для написания коротких заголовков.

5

Пример сайта с контрастным заголовком

Этот прием в основном касается заголовка H1.
Статистика показывает, что наиболее популярные размеры шрифта для заголовков — в диапазоне от 18 до 29 px.

Конкретнее в цифрах

Общие значения

Ниже приведены некоторые значения, основанные на анализе ресурсов и статей на тему размеров шрифтов.
- Чаще всего для основного текста используются кегли от 14 до 18 px.
- Чтобы получить оптимальный размер заголовка, нужно размер основного текста умножить на 2-2,5.
- Для того, чтобы узнать оптимальный интерлиньяж (межстрочное расстояние), нужно размер шрифта умножить на 1,48.
- Отступы между абзацами примерно в 1.39 раза больше, чем интерлиньяж внутри абзацев.
- Размер строки 100 символов при размере контентной области в 1070 px.

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

Адаптивная верстка

Все современные сайты являются адаптивными. Сайты создаются с расчетом отображения сайта на нескольких разрешениях экрана. При уменьшении разрешения происходит «скачок» от одной композиции экрана к другой (брейкпоинт). Стили шрифта с каждым последующим брейкпоинтом меняются. Отсюда возникает проблема пропорций шрифта. Если на десктопной версии размер шрифта 20 рх, а интерлиньяж 28 рх, то на мобильном устройстве размер шрифта ставится, например, 14 рх, а интерлиньяж может быть и 16 рх, и 20 рх. В таких случаях, дизайнер должен сидеть и высчитывать значения на калькуляторе…или воспользоваться скейтлингом шрифтов и упростить себе жизнь https://readymag.com/kelnik/960360/
Скрипт от дизайн-бюро «Дизайн Кабак» designpub.ru помогает вычислять соотношения размера шрифта и интерлиньяжа. С этим инструментом ясно, что десктопный параграф размером 20/28 px на мобильном устройстве будет 14/20 px.

 

6

Заключение

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

 

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
«Дело» о цвете. RGB против CMYK

19/08/2020

Цвет – один из основных компонентов дизайна, поэтому каждый уважающий себя дизайнер должен знать разницу между RGB и CMYK, а также области их использования. Разберёмся в этих тонких отношениях!

«Дело» о цвете. RGB против CMYK
Что такое разрешение и почему оно важно?

18/08/2020

Когда вы вспоминаете о мониторах и дисплеях различных устройств, то одним из первых терминов, которые приходят на ум, является разрешение экрана. Но так ли оно важно? Сегодня разберемся как разрешение экрана влияет на наше восприятие.

Что такое разрешение и почему оно важно?
10 ошибок начинающих дизайнеров

17/02/2020

Шрифты – это одежда для текста! Разберём 10 основных ошибок типографики.

10 ошибок начинающих дизайнеров
Правила дизайна успешной кнопки - требования юзабилити

24/01/2020

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

Правила дизайна успешной кнопки - требования юзабилити
Мошенники от лица R01 рассылают фальшивые письма c уведомлениями о продлении доменов

11/06/2018

Мошенники от лица R01 рассылают фальшивые письма с уведомлением о продлении доменных имен и других услуг регистраторов. 4-го июня один из наших клиентов получит уведомление от "регистратора r01" с предложением продлить домен.

Мошенники от лица R01 рассылают фальшивые письма c уведомлениями о продлении доменов
REG.RU лишил партнерского статуса хостинг-провайдера «Beget»

08/06/2018

Сервис Beget 5-6 июня лишился права доступа к инструментам API REG.RU. В следствии чего многие тысячи пользователей остались в подвешенном состоянии.

REG.RU лишил партнерского статуса хостинг-провайдера «Beget»
Как бесплатно заработать на своей странице в Instagram

14/10/2016

Итак, для чего вообще нужно развивать свою страницу в соцсетях? Многие люди склонны считать, что им следует заниматься не продажей рекламы, а её покупкой. Например, мы слишком привыкли следовать классической парадигме: получить высшее образование и найти хорошую работу.

Как бесплатно заработать на своей странице в Instagram
Почему нельзя использовать PLUSO и почему он вставляет iframe

30/09/2016

Сервис быстро набрал популярность в виду простой, не требующих глубоких знаний, процедуре настройки и интеграции кнопок на любые сайты. Красивый современный дизайн кнопок привлек аудиторию к сервису.

Почему нельзя использовать PLUSO и почему он вставляет iframe
Продвижение сайта через социальные сети

24/08/2016

Чтобы быстро завоевать приличные места в рейтингах поисковых систем, необходимо эффективно использовать все доступные средства продвижения. Конечно, на первом месте идёт оптимизация контента сайта и его HTML-кода как основа SEO.

Продвижение сайта через социальные сети