Ноябрь 4, 2019 Запись была обновлена
Высота строки HTML для сайта
Вы задумывались когда-нибудь удобно ли читать текст посетителям на Вашем сайта? Или Вы думали что лишь бы шрифт побольше, а там он уже сам разберется? Я считаю, что даже такие нюансы необходимо учитывать. Вы не поверите, но есть даже специальный калькулятор, который поможет подобрать Вам оптимальную высоту строки исходя из того, какой размер текста и длина строки на Вашем сайте. Затем Вам останется выставить необходимые настройки на собственном сайте и всё!
Прежде чем приступать к изучению данной статьи, сделайте одно маленькое исправление на своём сайте (поставьте переносы слов):
Несколько дней назад я писал о редко используемых свойствах 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 пикселей
Вывод
Думаю Вы узнали как сделать шрифт приятным для посетителей, чтобы они проводили на сайте как можно больше времени, да и еще с удобством читали Ваши статьи. Я раскрыл в этой статье такой важный элемент дизайна, про который многие забывают. А ведь даже такой маленький нюанс влияет на продажи! Но таких нюансов намного больше, Вы даже представить себе не можете насколько их много.
Небольшое резюме:
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Статься про то, как сделать текст удобно читаемым, а читать статью неудобно. 😈 Потому-что между строками большое расстояние ❓
Что-то у Вас с клавиатурой не то… 😆
А если серьезно: часто Вы бываете на моём сайте? Если нет, тогда с чего бы мой шрифт должен быть Вам удобен для чтения.
По-вашему нормально злоупотреблять высотой строки? ❓
Когда критикуете чью-то работу, необходимо показать то, что сделали Вы. Поэтому если Вы не очередной выскочка, который может только на клавиатуре буквы набирать и критиковать чужую работу — покажите свой сайт 😉 .
Ну и еще раз цитатой прямо из статьи:
Для того что-бы пользоваться формой рецензий на сайтах не обязательно иметь свой сайт или блог, умение в какой-либо форме печатать уже даёт право выражать свою точку зрения. К слову, текст с такой большой высотой строки читается быстро тот — что подчеркнутый светлой лентой маркера, нежели тот, в котором высота строки мне невидна.
«Побегу верстать свой сайт, что-бы доказать Вам что мне действительно неудобно читать статью в которой расстояние между строками равно почти самой строке» 😈 И сделаю вид что не увидел Ваших вызовов на закомуфлированные словесные дуэли или холивары. Если мне неудобно читать статью, то разве это ксенофобия? Реально ведь неудобно, если высота в равной
Александр, я очень волнуюсь за Ваши глаза, поэтому советую быстрее нажать CTRL+W 🙂 . Сразу видно, что этот калькулятор не для Вас, он встроен в Ваш глаз 😆
Обычно когда делают перевод статьи или копирайт, то признаком хорошего тона считается указать источник. Вы же только оскорбляете, и ведёте себя как женщина-недоучка в период месячных. Что вы прыгаете передо мной, у вас невроз, или что-то другое? Может Вас следует связать, что-бы вы полежали и выплакались?
😆 хочу Вас огорчить, но это моя статья, а не перевод.
Видимо у Вас клавиши залипли, попробуйте еще раз нажать CTRL+W или CTRL+F4, если не помогает 😉 .
ЧИТАТЬ НЕУДОБНО! ➡
Александр , извиняюсь заранее, но я тоже начал читать сейчас эту статью и полностью согласен с Юрием. Что ошибка №1: мелких шрифтов вот в чем:
Причина этой ошибки в том, что многие строят сайты по стандартам. То есть шрифт – 12 px. Наверняка, и на ваших сайтах сейчас такой же. По крайней мере у большинства.
Однако, читать онлайн такой шрифт становится всё труднее. Потому как мониторы всё мельче (планшеты, телефоны, ноутбуки), времени на чтение информации всё меньше, текста в интернете всё больше. А тут еще и мелкий шрифт.
Читатель хватается за всё, что выделяется, читает и убегает смотреть дальше. Шрифт в 12 px он почти не замечает. Как правило, его хватает на пару предложений.
В 2013 какая-то буржуйская компания (не помню точно название) проводила исследование и выявила, что: Средняя продолжительность концентрации внимания читателя в интернете – 8 секунд!
С ума сойти. Ведь это на секунду меньше, чем у золотой рыбки. И в том же исследовании установили другой важный показатель. В среднем люди готовы читать всего 28% слов на веб-странице. Так-то.
Сейчас стандарты размера шрифта поднялись уже до такого уровня, что даже 14 px – это совсем минимум. Некоторые компании подняли уровень до 16 и 18 px для основного текста. А заголовки – до 35-40 px.
Так что не бойтесь сделать крупный шрифт. Наоборот, бойтесь сделать его слишком мелким. Ведь это напрямую влияет на продажи: прочитает посетитель ваш текст или уйдет читать на другой сайт.
С уважением к Вашим пельменям — Артём
Большинство пользователей умеют увеличивать страницу, разведением жестами пальцев или держать ctrl+колёсико на компьютере, я говорил о «зазоре» между строками в самой статье выше, а не о смысловой нагрузке энной. ❗
Александр, в совокупности всех факторов, собранное третей независимой стороной, то факто остается фактом — чем больше шрифт и гармонично подобранное расстояние между строчками, в дальнейшем будет давать конкурентное преимущество перед другими.
Если именно вы не можете этого понять, то это лично ваша проблема. А чем больше действий пользователю нужно совершить на сайте, для чтения контента, тем больше вероятность, что он покинет сайт.
А то, что можно увеличить шрифт удерживая ctrl+колёсико банально не все знают. Про это тоже приводилось исследование просто сейчас нет ссылки под рукой. Но могу сказать своими словами больше половины людей об этом не знают. Ещё есть такое условие, что большое количество людей сидят с ноутбуков и у них вместо мышки тачпад или трекпад.
Кстати, а если увеличивать самостоятельно шрифт пальцами на телефоне, то контентная зона чтения будет в разы меньше, чем если бы сразу был большой шрифт. Что приведет решения посетителя покинуть сайт, или не увидеть разного рода рекламы, а это все таки коммерческий ресурс.
Сайт такого характера, на котором кухарка не сидит, согласитесь, и про способы посетитель проекта такого жанра знает как ему увеличить+уменьшить. И что по вашему означает «гармония расстояния между строчками» настолько накрученно чтобы статья длиннее казалась?
Или вы на зло делаете так, чтобы после каждого слова образовывлась пауза перед усвоением? 😈 Люди в 21 веке ходят на сайты хаотично из поисковых машин, на одном сайте восновном тусят те кто работает там, либо задротствует.
🙄
Александр, и после того, как подобные люди шлют свои возмущения, вы до сих пор уверены, что они знают как им увеличить+уменьшить. (кликните на изображение)
Кстати, это ещё не самый тупой пример и таких людей сотни тысяч… (к сожалению). Сейчас идет специфика, чем проще, тем лучше, я лучше уйду на сайт конкурентов дабы таких тоже десятки тысяч, если мне лично не удобно будет читать контент и для этого нужно что-то сделать.
А если человек зашел на сайт, ему не понравилось отображение контента, он уходит с сайта и сайт получает отказ… Сайт получая отказ просаживается в поисковых системах…
У Юрия в данном случае около 30%+ посетителей приходят из поисковиков, если сайт просядет в поисковиках, то он тупо потеряет 30%+ трафика — оно ему надо?))
Тем более, подавляющему большинству людей именно такое отображение нравиться. Так как я думаю он делал скорее всего опрос своей целевой аудитории и подстроился под неё.
Если целевой аудитории нравиться — это значит то, что именно нужно! Глупо стоять и писать против ветра, хотя если вы привыкли писать против ветра, можете продолжать это делать!
Пишем против ветра, так пишем. Нравиться пишется нравиТСЯ в данном случае (проверочное слово что делаеТСЯ).
Да вы что тут издеваетесь что-ли над людьми, или что? Я высказал просто своё замечание, а меня полили чем не попади, что один в начале, что второй ещё лучше подоспел. Вот дерьмо! Что у вас здесь тут происходит?
Вы что не понимаете что я залётный из поисковой системы, зашёл, увидел что зазоры между строками громадные, а статья как раз про них и идёт, и просто подумал что автор слишком увлёкся ими, что незаметил как накрутил завышенно.
Я не хотел никого оскорблять, или там как котёнка тыкать в кучу. Вы что там себе возомнили из себя?
Трудно быть скромным, когда ты лучший!
Бред
Критика — это когда критик объясняет автору, как сделал бы он, если бы умел.
Сервис предназначен исключительно для букв Латиницы и не берёт во внимание русский шрифт! Где в нижнем регистре 90% букв не имеют высоту выше своих середин. В русском языке буквы нижнего регистра совсем другие, исключение составляют б,ё,й,ф остальные авгдежзиклмнопрстухцчшщьъэюя для данного шрифта не выскакивают выше середины. А в английских шрифтах нижнего регистра буквы чаще высокие: b, d, f, h, i, j, k, l, t и чаще используемые а не такие как ё или ф, по этому высота строки смотрится приятнее глазу когда выше для данного калькулятора. Вы лепите корону мне тут, даже не смотрите http://s32-temporary-files.radikal.ru/7d43a806ba404bc48eeaea9e59b117eb/-88693455.png
Вы не очередной выскочка, который может только на клавиатуре буквы набирать и критиковать чужую работу покажите свой сайт ?
Не выскочка или выскочка тут абсолютно не при чем. Я говорю о каллиграфии самих букв, так как в русском языке в основном всего навсего три буквы нижнего регистра выступающего за его пределы, строчного интервала — кегль, а в английском языке их уйма. Это перевод статьи, а не оригинал, следовательно рассчёты велись касательно латиницы а не кириллицы. Если вы возьмёте перевод статьи с японского, или греческого, подойдут-ли они к русскому языку?
Сайт у меня есть, но только заглушка, я не дизайнер, но много прослушал лекций по этому делу. Хотя, тут вопрос скорее к полиграфистам. Спросите у них, если не верите.
Мне всё равно, пишите что хотите, и где хотите, но это не отменит сути. Просто увидел ошибку, и решил написать в комментариях, я всегда думал что они именно для этого, а не для самовыражения.
Давно видел картинку, вот она нашёл http://indians.ru/fig/a-font-sizes/font-sizes-large.gif посмотрите на cap line и ascender line для шрифтов английского языка и прочей латиницы это обычное дело, такая "завышенность", но для языков (шрифтов) семейства кириллицы такие перепады не уместны. По этому, следовательно, нельзя пользоваться "Золотым Калькулятором" применительно к русскому, так как это существенно увеличит межстрочный интервал визуально, что не будет давать возможность для глаз с лёгкостью перепригивать с строчки на строчку, и держать ряд. Читать статьи с такими пустыми местами между строк — крайне неудобно на русском, да ещё и с этим шрифтом где только буква "б", "ё" и "й" выходят за грани lowercase line.
Википедия в помощь: https://ru.wikipedia.org/wiki/Выносной_элемент_(дизайн_шрифта) нашел как называется точно этот термин. На курсах учил, что этот "Внешний Выносной Элемент" который играет роль при чтении, и не думаю что можно сервисы предназначенные для латиницы под копирку применять для кириллицы. Надеюсь, что я не один такого же мнения.
Вообще-то высота строки действительно завышена.
И завышена не из-за калькулятора, а из-за ошибки в CSS.
Автор поставил высоту строки (1,6em) исходя из размера шрифта = 1,125em.
А реальный размер шрифта у него = 1,0em, как и в тексте комментариев.
Однако в тексте комментариев соотношение действительно соответствует Золотой пропорции = 1,618. (Соотношение Фибоначчи)
В алгебре общепринято его обозначение греческой буквой фи (Ф = 1.618).
Золотая пропорция справедлива для всей Вселенной. Она не зависит от языка, клинописи или цвета яичной скорлупы. Это знали еще древние египтяне, когда строили пирамиду в Гизе.
P.S. Типографика, это не наука, а искусство.
Если цифры не дают визуальный комфорт, делаем коррекцию под читателя.