Висота рядка html для сайту

Ви задумувалися коли-небудь чи зручно читати текст відвідувачам на Вашому сайту? Або Ви думали що аби шрифт побільше, а там він вже сам розбереться? Я вважаю, що навіть такі нюанси необхідно враховувати. Ви не повірите, але є навіть спеціальний калькулятор, який допоможе підібрати Вам оптимальну висоту рядка виходячи з того, який розмір тексту і довжина рядка на Вашому сайті. Потім Вам залишиться виставити необхідні налаштування на своєму сайті і все!

Перш ніж приступати до вивчення даної статті, зробіть одне маленьке виправлення на своєму сайті (поставте переноси слів):

• Як створити перенесення слів CSS - абзаци з перенесенням слів CSS

Кілька днів тому я писав про рідко використовуваних властивості CSS3, які можуть бути дуже корисні:

• 5 секретних властивостей CSS3 - Частина 1
• 5 секретних властивостей CSS3 - Частина 2

Як визначити ідеальну висоту рядка 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, розміру тексту, довжини рядка і оптимальної кількості символів рядка. Швиденько пройдуся по пунктам (у Вас вони можуть відрізнятися):

1. Optimized Typography for 18px Font in 735px; wide Setting - цей пункт докладно я розглянув вище
2. Best Typography for a 735px; wide Setting - найбільш оптимальні настройки для ширини контенту в 735 пікселів
3. Second-best Typography for a 735px; wide Setting - ще одні допустимі настройки для довжини рядка в 735 пікселів
4. Optimal Typography for 18px Font - оптимальні настройки для розміру букв в 18 пікселів

висновок

Думаю Ви дізналися як зробити шрифт приємним для відвідувачів, щоб вони проводили на сайті якомога більше часу, та й ще з зручністю читали Ваші статті. Я розкрив в цій статті такий важливий елемент дизайну, про який багато хто забуває. Але ж навіть такий маленький нюанс впливає на продажу! Але таких нюансів набагато більше, Ви навіть уявити собі не можете наскільки їх багато.

ОБІЦЯНИЙ СЮРПРИЗ: З приводу оптимізації продажів з сайту пропоную Вам свою БЕЗКОШТОВНУ послугу «Аудит продає сайту» - записатися на аудит.

Невелике резюме:

1. Що ще за "ідеальна висота рядка" ...
2. опис сервісу
3. Як користуватися цим сервісом?

Успіхів!

З повагою, Юрій Німець