Содержание
- 1 Давайте сперва поговорим о font-size
- 2 Изменяем межстрочный интервал выделенной части документа
- 3 Макетирование на основе сетки
- 4 Сетка в сетке
- 5 CSS Properties
- 6 Более детальное оформление
- 7 line-height и HTML тег span
- 8 line-height: к проблемам и за ее пределами
- 9 Правило №1. Используйте минимальное количество шрифтов
- 10 Правило 2: Следите за «вертикальным ритмом» документа
- 11 Обработка пробелов между буквами и словами
- 11.1 1. Расстояние между словами word-spacing
- 11.2 2. Расстояние между буквами letter-spacing
- 11.3 3. Обработка пробелов white-space
- 11.4 4. Настройка табуляции tab-size
- 11.5 Межсимвольный интервал CSS: letter-spacing
- 11.6 Интервал между словами: word-spacing
- 11.7 Межстрочный интервал: line-height
- 11.8 Итоги
- 12 А теперь пришло время таблиц!
- 13 Глобализация
- 14 Глобализация
- 15 vertical-align: свойство, которое управляет всеми
- 16 Правило №2. Старайтесь использовать стандартные шрифты
Давайте сперва поговорим о font-size
Посмотрите на простой HTML код. Тег содержит три , каждый из которых имеет свой собственный :
Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:
Разные font-family, одинаковое значение font-size, получаем разную высоту элементов
Почему не создает элементы с высотой в 100px? Я измерил и получилось:
- Helvetica — 115px;
- Gruppo — 97px;
- Catamaran — 164px.
Элементы со значением font-size:100px имеют разную высоту
Все это кажется немного странным, на первый взгляд, но это вполне объяснимо. Причина находится внутри самого шрифта. Вот как это работает:
шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц
Но здесь также может применяться значение 1024, 2048 и т.д. устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата. в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.
Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:
- em-квадрат 1000;
- Ascender — 1100 и Descender — 54. После выполнения некоторых тестов, окажется, что браузеры используют значения HHead Ascent/Descent на Mac OS, а также значения Ascent/Descent на Windows (эти значения могут отличаться!). Отметим также, что прописная буква имеет высоту 640px и высота обычной буква составляет 485px.
Значения шрифта в FontForge
Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано . Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье. Вы можете думать о контент-области, как об области, для которой применяется свойство .
Мы также можем увидеть, что заглавные буквы имеют высоту 68px (680 единиц) и строчные буквы (x-height) — 49px (485 единиц). В результате, = 49px и = 100px, а не 164px (к счастью, основан на размере шрифта, а не на вычисленной высоте).
Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px
Прежде чем идти дальше, оставлю некоторое пояснение. Когда элемент отображается на экране, то он может состять из нескольких линий, в соответствии с его шириной. Каждая строка состоит из одного или нескольких inline-элементов (HTML-теги или встроенные imline-элементы для текстового содержимого) и имеет название line-box. Высота line-box основана на высоте его дочерних элементов. Таким образом, браузер вычисляет высоту для каждого inline-элемента, и, следовательно, высоту line-box (от высшей точки своего дочернего элемента к самой нижней точке своего дочернего элемента). В результате line-box — достаточно высок, чтобы содержать все свои дочерние элементы (по умолчанию).
Если обновить предыдущую страницу HTML код, то получим:
Он будет генерировать три line-boxes:
- первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
- второй, содержащий два встроенных элемента и три
Тег <р> (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)
Мы ясно видим, что второй line-box выше остальных, в связи с вычисленной контент-областью его дочерних элементов, один из которых использует шрифт Catamaran.
Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом не дает нам ни какой визуальной подсказки о высоте line-box.
Изменяем межстрочный интервал выделенной части документа
Если требуется изменить межстрочный интервал выбранной части документа, выделите текст, который необходимо изменить. Затем на вкладке Home (Главная) в разделе Paragraph (Абзац) нажмите команду Line and Paragraph Spacing (Интервал между строками и абзацами).
Далее выберите необходимый интервал и снова, наводя указатель мыши на различные установки интервалов, с помощью динамического просмотра Вы можете увидеть, как все это будет выглядеть.
Если выбрать Line Spacing Options (Другие варианты межстрочных интервалов), то откроется доступ к ещё большему количеству настроек. Вам также будет показано маленькое окно предварительного просмотра, чтобы Вы могли получить общее представление о том, как все это будет выглядеть.
При необходимости, можно вернуть назад все сделанные изменения. Для этого кликните Change Styles > Style Set > Reset Document Quick Styles (Изменить стили > Наборы стилей > Сбросить настройки стилей документа).
Если Вы перешли на Word 2007 или 2010 с более ранних версий, то, скорее всего, захотите изменить межстрочный интервал и установить его по умолчанию для всех новых документов. Кроме этого, в Microsoft Word Вы можете изменять межстрочные интервалы для любой выделенной части текста.
Макетирование на основе сетки
Ну, а теперь остается самое главное — на основании построенной сетки сделать дизайн журнала. Вот два примера, построенных на основе той простейшей сетки, которая у нас получилась. Первый выстроен подчеркнуто «крупно» и «поперек» (на самом деле я воспроизвел вариант макета одного из верставшихся мной когда-то журналов), второй — «мелкенько» и «вертикально». Текстовые части у разворотов абсолютно одинаковы, до знака (в одном месте строка втянута). Эти примеры, по моему замыслу, должны показать, что на основе одной сетки можно создать существенно различающиеся между собой макеты.
Сетка в сетке
Да, бывает и такое. Когда проект сложный и многокомпонентный, вы можете использовать несколько вложенных сеток. Простейший пример: общая раскладка макета (layout) использует гигантские колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной сетке в 4px. В этом нет ничего особенно криминального.
Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.
Что вы можете сделать, так это соблюсти правило внутреннего и внешнего для контейнеров, содержащих эти блоки. Конкретнее, дать вокруг достаточно воздуха (в том числе и по вертикали), чтобы они не лепились к остальному контенту, выглядели обособленно и не перетягивали посторонние элементы в свою визуальную зону. Все расстояния и пропорции в вашем макете относительны, поэтому, грубо говоря, вы можете сбалансировать чужой контент «снаружи» почти с тем же успехом, как если бы меняли размеры его содержимого «внутри».
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Более детальное оформление
Межстрочные интервалы CSS на самом деле не ограничиваются только вышеуказанными атрибутами. Расстояние еще корректируется атрибутами margin и padding. Если указать атрибут именно как margin=»5px», то со всех сторон строки (абзаца) будет добавлено расстояние 5 пикселей.
Если вам нужно указать только над абзацем, то можно указать margin-top. Перевод очень простой. Таким образом, можно будет задать отступы с каждой стороны.
Обратите внимание, что есть еще атрибут padding. Она работает точно так же, как и margin
Задать можно как общий отступ, так и конкретное направление (слева, справа, вверх, низ).
Посмотрите внимательно на рисунок сверху. Margin — отступ за пределами объекта, а padding — внутри.
Эти атрибуты являются глобальными. Их можно применять ко всему — картинкам, таблицам, тексту, ссылкам и так далее.
Запомните это раз и навсегда. Это очень важный момент при оформлении объектов. Например, благодаря margin можно указать отступы между текстом и картинками внутри него. Если этих отступов нет, то текст будет распложен вплотную к изображению.
Если у вас текст в таблице, то тогда используйте padding, чтобы текст не прилипал к краям таблицы, поскольку это смотрится некрасиво. А если задать отступ хотя бы в 5 пикселей, уже будет смотреться куда лучше. Кроме высоты, у линии есть атрибут ширины.
Иногда это весьма нужное свойство. На рисунке снизу виден пример разной ширины текста.
line-height и HTML тег span
Элемент с display: inline; не может иметь height . Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.
Изменить line-height родителя: Изменить line-height строчного потомка:
Иными словами, если font-size строчного элемента отличается от font-size блочного, то первый может увеличить высоту строки родителя, на которой он находится.
Изменить line-height: Изменить font-size:
line-height: к проблемам и за ее пределами
Ранее я ввел два понятия: контент-область (content-area) и line-box. Если вы читали внимательно, то я сказал, что высота line-box вычисляется в соответствии с его дочерней высотой, я не сообщал дочерним элементам высоту их контент-области. В этом и заключается больше различие.
Хотя это может показаться странным, inline-элемент имеет две разные высоты: высоту content-area и высоту virtual-area (Я изобрел термин virtual-area , обозначая таким образом высоту, невидимую для нас. Этого термина Вы не найдете в спецификации).
- высота content-area определяется показателями шрифта (как показано выше)
- высота virtual-area — это , а также это высота, которая используется для вычисления высоты line-box
Inline-элементы, имеющие две разные высоты
Это ломает распространенное мнение о том, что это расстояние между базовыми линиями (baselane). В CSS это не так.
В CSS, the line-height — это не расстояние между двумя базовыми линиями
Рассчитанная разность высот между virtual-area и content-area называется ведущей. Половина этой ведущей добавляется к верхней части content-area, другая часть — к нижней. Content-area располагается всегда в центре virtual-area.
На основе его значений, (virtual-area) может быть больше, меньше или равной content-area. В случае меньшего размера virtual-area, ведущее значение станет отрицательным и line-box стане визуально меньше его дочернего элемента.
Существуют также другие виды inline-элементов:
- inline-элементы (, , , etc.)
- и все элементы
- inline-элементы, которые используются в качестве форматирования текста (например, во flexbox-элементах)
Для этих inline-элементов, высота вычисляется на основе , и . Если имеет значение , то используется в content-area и строго равна .
Inline замещаемые элементы, inline-block/inline-* и blocksified inline элементы имеют контент-область, равную их высоте или высоте линии
Итак, вернемся к FontForge. Em-квадрат шрифта Catamaran равен 1000, но мы видим значения ascender/descender:
- Ascent/Descent: ascender — 770 и descender — 230. Используется для символьных рисунков. (табл. “OS/2”)
- показатели Ascent/Descent: ascender — 1100 и descender — 540. Используется для высоты content-area. (табл. “hhea” и табл. “OS/2”)
- показатель Line Gap. Используется дл , путем добавления этого значения показателей Ascent/Descent. (табл. “hhea”)
В нашем случае, шрифт Catamaran определяет разрыв в 0 единиц для line gap, поэтому будет равен content-area, который составляет 1640 единиц, иначе 1.64.
В качестве сравнения, шрифт Arial описывает em-квадрат в 2048 единиц, ascender — 1854, descender — 434 и line gap составляет 67. Это означает, что дает content-area — 112px (1117 единиц) и — 115px (1150 единиц, иначе 1.15). Все эти показатели шрифта устанавливаются разработчиком шрифта.
Становится очевидным, что установка плохая практика.Я хотел бы напомнить вам, что безразмерное значение относительно для и virtual-area меньше, чем content-area. Именно это и является источником многих наших проблем.
Используя line-height: можно создать line-box меньше, чем контент-область
Уточнения о вычислении line-box:
- для inline-элементов, и увеличивают область фона, но не высоту content-area (или высоту line-box).Сontent-area — это не всегда то, что ты видишь на экране. и не имеют ни какого эффекта.
- для inline-элементов, и blocksified inline-элементы: , и увеличивают , а значит увеличивают content-area и высоту line-box
Правило №1. Используйте минимальное количество шрифтов
Не используйте более трех разных шрифтов на одном сайте, иначе он будет выглядеть неструктурированным и непрофессиональным. Также имейте в виду, что шрифт разных размеров и стилей в одном тексте может разрушить любой лейаут.
Чтобы избежать подобных ситуаций, постарайтесь свести количество используемых шрифтов к минимуму.
В общем, сведите количество используемых гарнитур (семейств шрифтов) к минимуму: два — более чем достаточно, один — оптимальный вариант. И придерживайтесь единого стиля при разработке сайта. Если вы все таки решите использовать более одного шрифта, убедитесь, что они имеют схожее начертание и их символы совпадают по ширине. Ниже я привожу пример использования двух шрифтов. Вы можете заметить, что пара выбранных шрифтов совпадает по стилю и создает гармоничную картинку
Однако, на примере справа слишком тяжелый шрифт перетягивает на себя все внимание, и гармония нарушается
Убедитесь, что гарнитуры дополняют друг друга и ширина их символов совпадает.
Правило 2: Следите за «вертикальным ритмом» документа
«Вертикальный ритм» — это расположение и отступы между строками и блоками текста, которые влияют на скорость прочтения и восприятия документа.
Отступы между параграфими
Отступы между параграфими — еще один важный параметр, про который не стоит забывать. Параграфы логически разделяют смысловые блоки, чтобы читателю было проще перестроиться и понять, что начался новый блок текста с новой информацией.
В большинстве случаев отступ между параграфами стоит делать равным размеру основного текста, т.е. если основной текст набран 16-пунктным шрифтом, то пробел между параграфами составит 16 пунктов.
– В дизайн-приложениях этот параметр устанавливается отдельно, равно как и в CSS и равняется 16 pt или 1 em; – В текстовых редакторах Pages или Word вам необходимо установить параметр «Отступ после параграфа» равным размеру основного текста.
Замечание: добавили отступ после параграфа.
Межстрочный интервал
Межстрочный интервал очень важен в тех случаях, когда в документе много текста, а читателю необходимо бегло его просмотреть.
Если текст будет стоят очень плотно (с недостаточными пробелами между строками) — взгляд читателя постоянно будет «спотыкаться», что затруднит беглый просмотр.
Если размер основного шрифта составляет 22 пункта, межстрочный интервал должен быть установлен в пределах 26—35 пунктов.
– В CSS можно установить эту величину в em, однако, вам стоит визуально оценить правильность выбранного интервала; – В текстовых редакторах Pages или Word межстрочный интервал стоит устанавливать как 120% от размера текста или 1,2 единицы.
Замечание: увеличили межстрочное расстояние — появилось больше воздуха и текст стало легче читать.
Обработка пробелов между буквами и словами
1. Расстояние между словами word-spacing
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.
На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине. Наследуется.
Синтаксис
P {word-spacing: normal;}
p {word-spacing: 2px;}
Рис. 1. Расстояние между словами
2. Расстояние между буквами letter-spacing
Свойство устанавливает расстояние между буквами (величину трекинга) и символами. Может принимать положительные и отрицательные значения. Целесообразно применять для повышения выразительности и читаемости заголовков, определений и пр. Наследуется.
Синтаксис
P {letter-spacing: normal;}
p {letter-spacing: 2px;}
Рис. 2. Изменение расстояния между буквами с помощью свойства letter-spacing
3. Обработка пробелов white-space
Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.
white-space | |
---|---|
Значения: | |
normal | Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости. |
nowrap | Запрещает переносы строк, за исключением применения . |
pre | Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк. |
pre-wrap | Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо. |
pre-line | Удаляет лишние пробелы, за исключением случаев . |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
P {white-space: normal;} p {white-space: nowrap;} p {white-space: pre;} p {white-space: pre-wrap;} p {white-space: pre-line;}
4. Настройка табуляции tab-size
Для изменения величины отступа, получаемого с помощью клавиши ТAB, используется свойство tab-size . Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .
Работает только для элементов и
Для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.
Синтаксис
Pre {-moz-tab-size: 16;} /* Firefox */ pre {-o-tab-size: 16;} /* Opera 10.6-12.1 */ pre {tab-size: 16;}
Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.
Межсимвольный интервал CSS: letter-spacing
Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).
Пример записи межсимвольного интервала:
P { letter-spacing: 2em; }
Интервал между словами: word-spacing
Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:
P { word-spacing: 6px; }
Межстрочный интервал: line-height
С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .
Ниже – пример, как сделать межстрочный интервал CSS:
P { line-height: 180%; }
На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:
Скриншот: интервалы в CSS
Итоги
Устанавливая интервал между словами, символами или строками, в первую очередь следите за тем, чтобы текст в итоге был легко читаем. С подобными свойствами необходимо обращаться аккуратно и всегда использовать их в меру, без фанатизма, иначе все текстовое содержимое грозит превратиться в неразборчивый набор букв.
А теперь пришло время таблиц!
Для таблиц также можно использовать свойство css line- height . Оно задаст интервал в ячейках между строками текста. Однако в некоторых случаях нужно двигать именно ячейки, а не контент.
Для реализации такого приема существует свойство border-spacing . Этот элемент работает только в том случае, если в другом табличном свойстве border-collapse указано раздельное отображение ячеек таблицы (border-collapse: separate ), т.е. двойная линия не убирается.
Почему так происходит? border-spacing устанавливает расстояние от контента до границ элемента таблицы. По умолчанию рамка задается для каждого элемента своя. Если же используется свойство border-collapse: collapse , то происходит следующее: браузер анализирует табличное представление и удаляет двойные линии.
При этом между строками и столбцами остается одна линия, которая преобразовывается в общую границу сразу для нескольких элементов таблицы.
У свойства border-spacing нет ключевых слов, поэтому значения указываются в виде единиц измерения. Можно установить как одно значение, так и два. Во втором случае первый параметр определит интервал по горизонтали, второй – по вертикали.
Перейдем к практике. Информацию из предыдущего примера занесем в таблицу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
Пример 2 Глобализация |
Позитивные аспекты глобализации | Усиление и стимулирование свободной конкуренции для активного развития технологий; |
Мировое разделение труда, которое способствует равномерному распределению важных ресурсов; | |
Повышение уровня жизни человечества. |
Пример 2
Глобализация
Позитивные аспекты глобализации Усиление и стимулирование свободной конкуренции для активного развития технологий;
Мировое разделение труда, которое способствует равномерному распределению важных ресурсов;
Повышение уровня жизни человечества.
Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.
Межсимвольный интервал CSS: letter-spacing
Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).
Пример записи межсимвольного интервала:
P { letter-spacing: 2em; }
Интервал между словами: word-spacing
Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:
P { word-spacing: 6px; }
Межстрочный интервал: line-height
С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .
Ниже – пример, как сделать межстрочный интервал CSS:
P { line-height: 180%; }
На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:
Скриншот: интервалы в CSS
Итоги
Устанавливая интервал между словами, символами или строками, в первую очередь следите за тем, чтобы текст в итоге был легко читаем. С подобными свойствами необходимо обращаться аккуратно и всегда использовать их в меру, без фанатизма, иначе все текстовое содержимое грозит превратиться в неразборчивый набор букв.
Свойство HTML margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой ) указанного HTML-элемента .
Разницу между полем и отступом можно увидеть на следующем рисунке:
Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.
Посмотреть демо-версию и код
У нас есть три элемента div . Первые два — со свойством HTML margin , а третий — со свойством padding . Расстояние между элементами div — это margin , а пространство между текстом внутри третьего элемента div и линией его границы — это padding .
vertical-align: свойство, которое управляет всеми
Я еще не упомянул о свойстве , несмотря на то, что оно важно для вычисления высоты line-box. Можно даже сказать, что играет ведущую роль в форматировании текста
Значение по умолчанию — . Помните о показателях шрифта ascender и descender? Эти значения определяют, где базовая линия стоит, а значит определяет и ее соотношение. Т.к. соотношение между ascenders и descenders редко бывает 50:50.
Начнём с кода:
Тег с двумя унаследовал значения , и имеют постоянный . Базовые линии (baselines) будут соответствовать и высота line-box будет равна их .
Те же значения шрифта, одинаковые исходные условия, кажется, что все в порядке
Что делать, если второй элемент имеет меньший ?
Как ни странно, но по умолчанию базовая линия может выровнять выше (!) line-box так, как показано на картинке. Я хотел бы напомнить вам, что высота line-box вычисляется от самой высокой точки своего дочернего элемента к низшей точке своего дочернего элемента.
Меньший дочерний элемент может привести к увеличении высоты line-box
Это может быть аргументом в качестве использования безразмерного значения , но иногда необходимо его фиксировать, чтобы создать идеальный вертикальный размер. Если честно, то независимо от того, что вы выберете, вы всегда будете иметь проблемы с inline выравниванием.
Рассмотрим еще один пример. Тег с , содержащий один , унаследовал значение
Насколько высок line-box? Следует ожидать, что 200px, но это не так. Проблема здесь заключается в том, что имеет свой собственный (по умолчанию ). Базовые линии тега и скорее всего, будут различны, а высота line-box выше, чем ожидалось. Это происходит потому, что браузеры производят вычисления следующим образом: так, как если бы каждый line-box начинался бы с нулевой ширины символа.
В итоге, мы столкнулись с той же проблемой, что и в предыдущем примере.
Каждый дочерний элемент выравнивается так, как если бы его line-box появился бы с невидимой нулевой ширины символа
Базовая линия скачен, но что можно сказать на счет? Как пишут в спецификации, “выравнивает вертикальную среднюю точку контейнера с базовой линией родительского контейнера плюс половина x-height родительского блока”. Соотношение базовых линий различны, а также как различно соотношение x-height, следовательно выравнивание не надежно. Как правило, никогда не бывает по “середине”. Этому способствуют много факторов в CSS (x-height, ascender/descender соотношение, и тд.)
В качестве примечания:
- / выравнивает по верху и низу line-box
- / выравнивает по верху и низу content-area
Vertical-align: top, bottom, text-top и text-bottom
Но используйте с осторожностью, это выравнивает virtual-area. Посмотрите это на простом примере, используя
Невидимый может привести к странным, но не удивительным, результатам.
vertical-align может привести к нечетным результат на первых порах, но предполагается, что line-height создаст визуализацию
И в заключении стоит отметить, что также принимает числовые значения, которые повышают или понижают поле относительно базовой линии.
Правило №2. Старайтесь использовать стандартные шрифты
Некоторые сервисы, например Google Web Fonts и Typekit, предоставляют различные шрифты, которые могут привнести в дизайн вашего сайта что-то новое, свежее и неординарное. Они очень просты в применении. Возьмем к примеру Google:
- Выберите любой шрифт, например Open Sans.
- Сгенерируйте код и вставьте его в свой HTML.
- Готово!
Что же может пойти не так?
На самом деле, могут возникнуть две проблемы:
Не у всех есть доступ к такому же шрифту. Это может стать проблемой, так как шрифт, который вы так тщательно выбирали, может не читаться или выглядеть по-другому на экранах ваших пользователей.
Ваши пользователи привыкли к стандартным шрифтам, следовательно, читать такой текст, они смогут гораздо быстрее.
Если вашему сайту просто необходим свой собственный шрифт, например, для узнаваемости бренда или для создания эффекта погружения в сайт, то в данном случае можно выбрать специальный шрифт. Если нет, то лучше всего придерживаться системных шрифтов. Вы не прогадаете, если воспользуетесь такими системными шрифтами как Arial, Calibri, Trebuchet и так далее
Имейте в виду, что хорошая типографика привлекает внимание читателя к содержанию, а не к самому шрифту
С этим читают
- Sass basics
- Как добавить css в html
- Ну что, можно уже использовать css-переменные?
- Css свойство text-shadow
- Цвета в css
- Min and max width/height in css
- Normalize (нормалайз) отзывы
- Как обрезать элемент на css (свойства overflow, text-overflow и clip)
- Как изменить расстояние между буквами и словами в css?
- Css 3d transforms