Достижение хорошей читабельности и читабельности в Интернете

1 ÷ родительский размер шрифта × желаемое значение пикселя = значение em

Например, если размер родительского шрифта (как, скажем, для элемента body) составляет 16 пикселей, но мы бы хотели, чтобы размер абзаца, который является дочерним элементом элемента body, составлял 12 пикселей, мы вычисляем: 1 ÷ 16 × 12, что дает нам 0,75em.

Трюк с 62,5%

Есть простой способ упростить эти вычисления. Рассмотрим следующий CSS:

 p { font-size: 80%; } blockquote { font-size: 80%; } 

Вот стили этой разметки:

Это короткий абзац, за которым следует цитата:

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

[/ XML]
80% от 16px — это 12,8px, поэтому элементы p и blockquote будут такого размера, но что произойдет, когда мы поместим элемент p элемент blockquote ? Родитель ( blockquote ) имеет размер 12,8px, поэтому p будет отображаться с 80% от этого значения: 10,42px.

Guh! Это может привести к путанице. Ричард Раттер разработал изящный прием, чтобы упростить расчеты размеров вложенных элементов . Рассмотреть возможность:

• Браузеры имеют общий размер по умолчанию 16 пикселей для текста.
• Установите размер шрифта в 62,5%, сбросив все до 10 пикселей.

С этого момента расчеты аналогичны для прямых потомков тела, например, 12px = 1.2em; 8px = 0,8em; и так далее. Конечно, более глубокие вложенные элементы являются (все еще) относительными.

Мера

Мера — это длина линии. Важно держать линии на удобной длине: не слишком длинной и не слишком короткой.

Глаз с трудом переходит на следующую строку, когда измерения слишком длинные. Великолепный и почти печально известный пример веб-сайта, который мог бы добиться большего успеха в этом отношении, — это Википедия, где показатель относится к длине окна браузера; разверните окно до полноэкранного режима на широкоэкранном мониторе и обратите внимание на то, как внезапно, когда в строке было 40 удобных символов, вы получите меры длиной 100 или более символов.

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

Меры задаются в CSS с помощью свойства width . В идеале задайте дизайн или общую ширину страницы в ems, а столбцы в процентах , чтобы пропорционально масштабировать столбцы, сетку и весь дизайн страницы. Например:

 body { font-size: 62.5%; width: 96em; margin: 0 auto 0 auto; } div#content { width: 75%; float: left; } div#sidebar { width: 25%; float: right; } 

В этом примере мы использовали трюк 62,5%, чтобы сбросить базовый размер шрифта до 10 пикселей в body и определили общую ширину дизайна в 960 пикселей с центром. Между тем, мы определили два элемента div : один — боковую панель шириной 240 пикселей (25% из 960 = 240 пикселей), а другой — контейнер содержимого шириной 720 пикселей (75% из 960 = 720 пикселей). , Этот дизайн отлично масштабируется, даже когда доступен только текстовый зум.

ведущий

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

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

 p { line-height: 1.5; } 

Это означает, что начальный размер будет в полтора раза больше размера font-size . Значения без единиц измерения легче отслеживать и работать с ними при настройке ведущих для дочерних элементов. Они также хорошо масштабируются.

центровка

Выравнивание относится к размещению и расположению текста. При установке блоков копирования выровняйте текст по левому полю или по «желобу», и не бойтесь иметь резкие края (например, «по левому краю», «по левому краю» или «по краям»). Оправдание отлично, если есть достаточные меры для корректировки интервала между словами и, в идеале, если доступен автоматический перенос слов. Избегайте выравнивания в узких столбцах текста.

Выравнивание контролируется в CSS с помощью свойства text-align и принимает описательные значения, например:

 body { text-align: left; } div#content p { text-align: justify; } div#content p.verse { text-align: center; } 

Кульминация (контраст)

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

В CSS цвет текста контролируется свойством color , а фон — свойством background-color и принимает числовые и описательные значения. Вот пример:

 div#content p { color: #111; background-color: white; } 

Обратите внимание на контрасты при работе со светлым текстом на темном фоне. Темный текст на светлом фоне обычно имеет более высокую контрастность, чем светлый текст на темном фоне. Таким образом, когда светлый текст опирается на темный фон, проверьте его контрастность — увеличьте начальный размер и уменьшите font-weight если это применимо.

 div#footer p { color: white; background-color: #333; line-height: 1.8; font-weight: lighter; } 

закрытие

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