идеальная ширина строки

http://cssmake.ru/component/content/article/6/98

Идеальная ширина строки текстового поля основана на физиологии человеческого глаза... На нормальном расстоянии чтения дуга визуальной области ширины хорошо разработанной колонки текста, или приблизительно 12 слов в строке. Исследование показывает, что чтение замедляется, поскольку длина линии начинает превышать идеальную ширину потому, что читатель тогда должен напрягать мышцы глаза и шеи, чтобы не потерять строку переходя от конца одной строки к следующей. Количественные исследования показывают, что строка умеренной ширины значительно увеличивает четкость текста.

Web Style Guide - Basic Design Principles for Creating Website

Определение проблем

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

Методы расположения

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

Колонки с фиксированной шириной могут использоватся, чтоб установить идеальную ширину строки, если у пользователя в браузере шрифт установлен по умолчанию. К примеру идеальная ширина колонки может быть равна 420px. Это почти идеальная ширина колонки, если размер шрифта равен 14px-16px. Но если пользователь уменьшит или увеличит размер шрифта в браузере, то ширина строки будет далека от идеала. Пиксели (px) - абсолютное измерение, которое не принимает во внимание размер шрифта.

У колонки гибкой ширины также существуют свои проблемы. Вы не можете управлять пользовательским окном браузера, таким образом ширина колонки меняется, когда пользователь меняет ширину в браузере. Использование стрейчевой ширины сайта часто рекламируется как идеальное решение, поскольку пользователи управляют шириной их окна браузера и могут установить для себя удобную ширину строки. Но с этим есть две проблемы.

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

Вторая проблема заключается в том, что многие пользователи не знают, что они могут повторно изменить размер шрифта в браузере. Из-за этого им приходится просматривать сайт с не очень удобной шириной строки.

Решение

Решение может состоять в том, чтобы установить ширину колонки, используя em. Чтоб понять, почему em может создать идеальную ширину строки, мы сначала должны понять то, что же такое em ...

В CSS em - относительная мера длины, которая наследует информацию размера от исходных элементов. Если исходный элемент - body тогда, размер элемента фактически определен параметрами настройки шрифта браузера пользователя. Так, по умолчанию Internet Explorer устанавливает 1em = 16px. Используя стандартную часть текста как "Lorem ipsum...", идеальная длина строки в em равна примерно 30-35ems. Это выражено правилом:

width:30em;

Красота этого состоит в том, что это измерение связывает пользовательский размер шрифта. Если Вы зайдете на сайт с размером шрифта больше или меньше стандартного, то ширина колонки будет всегда оставаться в пределах оптимального диапазона.

На шаг вперед

Чтоб приблизится к идеальной ширине строки можно определить диапазон изменения ширины колонки.

min-width:25em;
max-width:33em;

В примере с помощью em - определенна колонка с минимальной и максимальной шириной. Конечно, эта особенность не поддерживается некоторыми современными браузерами (Internet Explorer для Mac/Windows), но в ближайшем будущем это возможно будет исправлено. Но даже сейчас можно добится этого для IE используя expression.

оригинал:Ideal line length for content