Просмотров: 8 565

Оптимальная ширина для чтения текста на веб-страницах.

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

Слишком широкая строка с текстом. Если текст слишком растянуть, читать его будет не удобно, т.к. взгляду будет очень сложно фокусироваться и быстро просматривать информацию.

Попробуйте не себе оценить насколько удобно читать примерно вот такой текст.

2016-03-01 06-11-11 Документ без названия - Internet Explorer

Слишком узкая строка с текстом. Такой вариант также можно считать не очень благоприятным. Читать текст, в котором по несколько букв в одной строке совсем не удобно. Глазу нужно будет слишком часто перепрыгивать с одной строки на другую и скорость чтения будет слишком снижаться.

2016-03-01 06-12-09 Документ без названия - Internet Explorer

Для того, чтобы ограничить растягивание блока от минимальных, до максимальных пределов, необходимо пользоваться свойствами CSS max-width и min-width  соответственно.

Возникает только одна проблема: до каких конкретных значений необходимо ограничивать текст в минимальных и максимальных значениях?

Вопрос в том, какое количество символов должно располагаться в одной строке.

Рядом дизайнеров проводились исследования и в разных источниках приводятся разные значения. Но, в целом рекомендуемым является диапазон 50-70 символов в одной строке.

Сколько это будет в пискелях? Все будет зависеть от размера шрифта, который вы будете использовать.

Можете в каком-то конкретном случае сосчитать сами. Чтобы примерно сориентироваться, при размере шрифта в 18 пикселей и ширине контейнера 516 пикселей, в одну строку должно войти 65 символов.

Т.е. вы можете сами определить для себя ту максимальную ширину контейнера, которую лучше всего указывать в вашем случае. В целом, это значение может колебаться от 800 — 500 пикселей.