Идеальная ширина строки
Существует ли идеальная ширина строки?
Идеальная ширина строки текстового поля основана на физиологии человеческого глаза... На нормальном расстоянии чтения дуга визуальной области ширины хорошо разработанной колонки текста, или приблизительно 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
Добавить комментарий
