2010-02-14 4 views
4

Я помню, как читал руководство по стилю, объясняющее, какова должна быть правильная высота линии для каждого элемента. Я не могу найти его в google.Руководство по построению линии линии CSS

Я был бы признателен, если бы кто-нибудь мог связать меня с таким руководством или, возможно, объяснить это в ответ.

Спасибо!

Редактировать: ИЗОБРАЖЕНИЕ, пожалуйста, позвольте мне уточнить. Я не спрашиваю о том, как использовать CSS для установки высот линии, но то, что рекомендуемые высоты строк для разных элементов. например, заголовки, текст абзаца и т. д.

Спасибо!

ответ

8

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

Это один говорит, что это зависит от вашего выбора шрифта семьи: http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/

Это один говорит, что это зависит от ширины линий: http://kingdesk.com/articles/optimal-line-height/

Эта ссылка, по существу согласен с обоими те: http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/

Основными правилами являются (1) более широкие линии текста, требующие больших высот линий, и (2) большая длина строки требуется на основе шрифта, если верх ht строчных букв - это высокий процент высоты прописных букв.

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

+0

ваша вторая ссылка мертва. Пожалуйста обновите. – AIon

+1

@Alon Я обновил сломанную ссылку, чтобы указать на архивированную копию. Спасибо, что дали мне знать! –

7

Информация here довольно простая, но полезная.

Резюмируя:

по умолчанию line-height:normal дает line-height:1.2, 120% от размера шрифта. Если вы собираетесь его изменить, обычно лучше всего использовать число без единиц, например lineheight:1.5 (150% размер шрифта), потому что тогда высота строки для элемента будет вычислена из , что элемент font size, даже если высота линии была унаследована от элемента с разным размером шрифта.

Если вы скажете line-height:10em, он вычисляется из шрифта элемента, где указана высота строки. , , что может быть неправильным, если эта строка-высота наследуется элементом с другим размером шрифта.

Аналогичным образом определенное количество пикселей, таких как line-height:10px, может быть ошибочным, если оно унаследовано элементами с разным размером шрифта.

0

W3 школы рекомендует (here) Высота строки 1.6, хотя я видел, что между 1,2 и 1,45 хороша, а

Смежные вопросы