Вы задумывались когда-нибудь удобно ли читать текст посетителям на Вашем сайта? Или Вы думали что лишь бы шрифт побольше, а там он уже сам разберется? Я считаю, что даже такие нюансы необходимо учитывать. Вы не поверите, но есть даже специальный калькулятор, который поможет подобрать Вам оптимальную высоту строки исходя из того, какой размер текста и длина строки на Вашем сайте. Затем Вам останется выставить необходимые настройки на собственном сайте и всё!
Прежде чем приступать к изучению данной статьи, сделайте одно маленькое исправление на своём сайте (поставьте переносы слов):
Несколько дней назад я писал о редко используемых свойствах CSS3, которые могут быть очень полезны:
Как определить идеальную высоту строки HTML?
Что еще за «идеальная высота строки»…
В типографии существует «идеальный» текст, который подобран особым образом, то есть у него оптимально настроен размер текста, размер между символами, высота строки, количество символов в строке, жирность текста и так далее.
Вы удивитесь, но такой текст Вы видите достаточно часто — журналы, газеты, книги. Вы уже привыкли к тому, что этот текст так выглядит и Вам удобно его читать. Ваш глаз привыкает к этим разрывам между словами, размерам букв и чем больше Вы читаете текст в таком стиле, тем больше привыкаете к нему. И когда Ваш глаз видит текст в котором, возможно, большие пробелы между словами, размер букв маленький или что-то еще не так, тогда чтение затормаживается. Ведь невозможно читать текст, в котором буквы расположены очень узко или очень широко.
Так Вы еще хотите сделать чтение приятным для посетителя? Тогда читайте дальше!
Но такой «идеальный» текст, как в журналах или книгах можно сделать и на Вашем сайте — и даже нужно! Ведь в этом ничего сложного.
Вот к чему я клоню:
Математические пропорции текста сильно влияют на общее представление о сайте, которое складывается у посетителя!
Есть, так называемое, "Golden Ratio" (золотое соотношение), которое необходимо найти для Вашего сайта, а точнее для текста на Вашем сайте. Но как мы будем искать это "Golden Ratio"?
Магия? Нет, мы не будем к ней прибегать
Хочу рассказать Вам об одном классном сервисе, который позволяет вычислить идеальную высоту строки HTML. От Вас лишь необходимо ввести размер текста и длину строки.
Ладно, не буду Вас томить, вот ссылка на сервис — перейти.
Это своего рода калькулятор, который показывает самый оптимальный вариант отображения текста для введенных пользователем параметров. Также присутствует несколько шрифтов. Потому что для разных шрифтов — разные настройки высоты строки, размера текста и количества символов в строке.
Как пользоваться этим сервисом?
На сайте слева есть поля для ввода размера текста, используемого на Вашем сайте, и длины строки.
Что касается размера текста, я думаю понятно какой вводить. То есть вводите тот, который указан у Вас в файле стилей. А длину строки смотрите на изображении ниже:
Я измерял плагином MeasureIt для браузера Firefox (его можно скачать здесь).
Также в поле «Desired CPL» Вы можете ввести желаемое количество символов, которое хотите видеть в строке. Я оставил это поле пустым, чтобы посмотреть какие рекомендации мне даст этот сервис.
Далее жмём на кнопку «Set my type» и справа появляются рекомендации:
Хочу обратить внимание на шрифт и параметры, которые меняются в зависимости от того, какой шрифт выбран:
Здесь Вам необходимо выбрать шрифт, который используется на Вашем сайте. Моего шрифта здесь нет, поэтому я выбрал наиболее близкий и похожий — Verdana. Когда Вы выберете шрифт, изменяться значения для высоты строки и CPL (количество символов в строке).
Сейчас хочу пройтись по значениям (возможно кто-то плохо знает английский):
- Font Size — размер текста в пикселях (в CSS выглядит так: font-size)
- Line Height — высота строки в пикселях (в CSS выглядит так: line-height)
- Content Width — длина строки в пикселях
- Approx. CPL — оптимальное количество символов в одной строке
Здесь Вы увидите параметры, которые данный сервис подобрал для введенных Вами данных. Но это еще не все советы! Выше Вы могли заметить блок на желтом фоне, где есть четыре пункта:
Кликая на каждый из пунктов — Вам даются рекомендованные значения высоты строки HTML, размера текста, длины строки и оптимального количества символов строки. Быстренько пройдусь по пунктам (у Вас они могут отличаться):
- Optimized Typography for 18px Font in 735px-wide Setting — этот пункт подробно я рассмотрел выше
- Best Typography for a 735px-wide Setting — самые оптимальные настройки для ширины контента в 735 пикселей
- Second-best Typography for a 735px-wide Setting — еще одни допустимые настройки для длины строки в 735 пикселей
- Optimal Typography for 18px Font — оптимальные настройки для размера букв в 18 пикселей
Вывод
Думаю Вы узнали как сделать шрифт приятным для посетителей, чтобы они проводили на сайте как можно больше времени, да и еще с удобством читали Ваши статьи. Я раскрыл в этой статье такой важный элемент дизайна, про который многие забывают. А ведь даже такой маленький нюанс влияет на продажи! Но таких нюансов намного больше, Вы даже представить себе не можете насколько их много.
Небольшое резюме:
Успехов!
С Уважением, Юрий Немец