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

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

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

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



112

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

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

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

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 пикселей.

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

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

Ниже приведены некоторые значения, основанные на анализе ресурсов и статей на тему размеров шрифтов.
- Чаще всего для основного текста используются кегли от 14 до 18.
- Отступ между абзацами относится к интерлиньяжу как 0,75.
- Отношение размера шрифта заголовка к размеру шрифта основного текста равно 2-2,5.
- Отношение интерлиньяжа к размеру шрифта основного текста равно 1,48.
Дальше, умножив вновь полученное значение еще и на 27,8 вы получите оптимальную длину строки. Не забудьте также, что вашему тексту понадобятся еще и отступы, чтобы дать ему «дышать».
Отступы между абзацами примерно в 1.39 раза больше, чем интерлиньяж внутри абзацев.

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

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

 

6

Заключение

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

 

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
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.

Продвижение сайта через социальные сети
Возлюби дизайн, и будет всем счастье!

25/05/2016

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

Возлюби дизайн, и будет всем счастье!
Почему аудит ключевой этап в SEO продвижении?

03/11/2015

Мы начинаем цикл статей, посвященных вопросам SEO продвижению сайтов, а так же SMM продвижению.В данном цикле мы познакомим вас с основными понятиями, возможностями и приемами продвижения веб сайтов.

Почему аудит ключевой этап в SEO продвижении?