CSS — текст
Помимо шрифта, CSS-команды могут настраивать многие другие свойства текста.
Межстрочный интервал
Вы можете отрегулировать межстрочный интервал, установив высоту строки и размер шрифта. Разница между этими двумя значениями будет междустрочным интервалом. Вот пример:
Это увеличит размер строки на 50%, и, поскольку размер текста не изменится, межстрочный интервал будет увеличен. Числа, относительные единицы (такие как em) и проценты могут использоваться в качестве значения высоты строки.
Межбуквенный и межстрочный интервал
Межбуквенный интервал задается letter-spacing, а межсловный интервал — word-spacing:
В приведенном выше примере указывается расстояние между буквами заголовков h1 — 10 пикселей и расстояние между словами для заголовков h2 — 2ex.
Дополнительные текстовые эффекты
Текст может быть изменен с помощью text-decoration и одного из следующих значений:
- underline: обыкновенное подчеркивание текста;
- overline: подчеркивание над текстом;
- line-through: линия проходит через середину текста;
- none: убирает подчеркивание текста, если указано;
- blink: мигающий текст (поддерживается только Firefox и Opera).
Отступ для первой строки абзаца
Для отступа текста используется text-indent и требуемое значение. Например:
будет отступать одну букву для первой строки каждого абзаца.
Горизонтальное выравнивание
Положение текста может быть скорректировано с помощью text-align, и одним из значений:
- left: левое выравнивание — значение по умолчанию
- right: выровнять текст по правому краю
- center: центрирование
- justify: двустороннее выравнивание
Вертикальное выравнивание
Это свойство используется, в основном, чтобы определить взаимное расположение текста и графики. Используется vertical-align и одно из следующих значений:
- sub: Как и в HTML-элементе sub, буквы записываются в виде нижнего индекса
- sup: текст отображается в виде верхнего индекса
- baseline: нижний край изображения расположен на уровне базовой линии
- middle: середина изображения совпадает с серединой текстовой строки
- text-top: верхний край элемента совпадает с верхним краем строки
- text-bottom: нижний край элемента находится на одном уровне с нижним краем линии
- top: верхний край элемента совпадает с верхним краем строки, размер которого изменяется, чтобы включить элемент
- bottom: аналогично top, но выравнивание по нижней линии.
Цвет текста
С помощью color вы можете указать желаемый Вами цвет текста. Для задания конкретного цвета текста можно использовать допустимые названия цветов, RGB или HEX значений:
Более подробно о цветах вы можете прочитать в статье HTML цвета.
Преобразование в строчные или прописные буквы
Вы можете указать использование строчных или прописных букв с помощью text-transform и одного из следующих слов:
- capitalize: первая буква каждого слова будет заглавной. Часто используемый стиль в заголовках.
- uppercase: все буквы становятся заглавными.
- lowercase: все буквы превращаются в маленькие.
- none: не меняется вид буквы маленькие-большие
Регулировка пустого пространства
С помощью white-space вы можете изменить способ, которым браузер показывает пустые поля:
- normal: по умолчанию, браузер сокращает ряд пробелов и строк до одного пробела / строки
- pre: сохраняет пустые пробелы и строки
- nowrap: серия пробелов будет обрезана до одного пробела, а текст будет продолжаться в одной строке, пока не будет вставлен символ перевода строки.
Стилизация шрифтов
Последнее обновление: 21.04.2016
Семейство шрифтов
Свойство font-family устанавливает семейство шрифтов, которое будет использоваться. Например:
body{
font-family: Arial;
}
В данном случае устанавливается шрифт Arial.
Шрифт свойства font-family будет работать, только если у пользователя на локальном компьютере имеется такой же шрифт. По этой причине нередко выбираются стандартные шрифты,
которые широко распространены, как Arial, Verdana и т.д.
Также нередко применяется практика нескольких шрифтов:
body{
font-family: Arial, Verdana, Helvetica;
}
В данном случае основным шрифтом является первый — Arial. Если он на компьютере пользователя не поддерживается, то выбирается второй и т.д.
Если название шрифта состоит из нескольких слов, например, Times New Roman, то все название заключается в кавычки:
body{
font-family: "Times New Roman";
}
Кроме конкретных стилей также могут использоваться общие универсальные шрифты, задаваемые с помощью значений sans-serif и
serif:
body{
font-family: Arial, Verdana, sans-serif;
}
Так, если ни Arial, ни Verdana не поддерживаются на компьютере пользователя, то используется sans-serif — универсальный шрифт без засечек.
Типы шрифтов
Шрифты с засечками
Шрифты с засечками названы так, потому что на на концах основных штрихов имеют небольшие засечки. Считается, что они подходят для
больших кусков текста, так как визуально связывают одну букву с другой, делая текст более читабельным.
Распространенные шрифты с засечками: Times, Times New Roman, Georgia, Garamond. Универсальный обобщенный шрифт с засечками представляет значение serif.
Шрифты без засечек
В отличие от шрифтов с засечками шрифты из этой группы не имеют засечек. Наиболее распространенные шрифты этой группы: Arial, Helvetica, Verdana.
Моноширинные шрифты
Моноширинный шрифт преимущественно применяется для отображения программного кода и не предназначен для вывода стандартного текста статей.
Свое название эти шрифты получили от того, что каждая буква в таком шрифте имеет одинаковую ширину. Примеры подобных шрифтов: Courier, Courier New,
Consolas, Lucida Console.
Примеры шрифтов:
Толщина шрифта
Свойство font-weight задает толщину шрифта. Оно может принимать 9 числовых значений: 100, 200, 300, 400,…900. 100 — очень тонкий шрифт,
900 — очень плотный шрифт.
В реальности чаще для этого свойства используют два значения: (нежирный обычный текст) и (полужирный шрифт):
font-weight: normal; font-weight: bold;
Курсив
Свойство font-style позволяет выделить текст курсивом. Для этого используется значение :
p {font-style: italic;}
Если надо отменить курсив, то применяется значение :
p {font-style: normal;}
Свойство color устанавливает цвет шрифта:
p {
color: red;
}
НазадВперед
Бонус: немного о цифрах
Вы уже думали все? Но нет, еще немного ценного материала.
В типографике используются арабские и римские цифры. Если в наборе гарнитуры есть капитель, лучше римские цифры набирать ей.
Римские цифры
Арабские цифры бывают двух видов: маюскульные и минускульные.
Маюскульные цифры все одного роста c прописными и моноширинные, поэтому их удобно использовать вне текста, в таблицах.
Маюскульные арабские цифры
Минускульные чуть выше строчных букв с верхними и нижними выносными элементами, при этом кернинг отрегулирован пропорционально (каждая цифра занимает столько места, сколько ей необходимо). Используйте минускульные цифры , если нужно вставить их в текст. Они же отлично смотрятся в увеличенном кегле.
Минускульные арабские цифры
На этом пока все.
На самом деле, пользователи не увидят особой разницы в том, какой шрифт вы использовали, с засечками или без, учитывали ли контрастность, им без разницы воспользовались ли вы Arial или Open Sans, выровняли ли шрифты по baseline вручную или воспользовались автоматическим выравниванием. Но есть то, что будет незаметно для них самих влиять на их восприятие,— удобочитаемость, простота считывания, эмоциональный опыт. Хороший визуальный дизайн — это сила, многократно усиливающая хороший UX.
Вникайте в детали, вчитывайтесь в длинные тексты, разбирайтесь и растите. В общем, делайте дизайн качественно — и коллективный дизайнерский разум скажет вам спасибо. Молодцы, что дочитали. Всем добра!
Любите то, чем занимаетесь, и занимайтесь тем, что любите.Ваша Alexandra Kulikovskaya
Контрастные сочетания
Строятся на шрифтах с максимальным количеством контраста и минимальным количеством сходства 0-3. Объединяются по общему настроению, аксессуарам, художественному стилю. Контрастные сочетания самые сложные, но и самые эффектные.
Нет сходства
Если использовать шрифты по их назначению, малоконтрастный для текстовых блоков, курсивный (рукописный) для акцентов, жирный (акцидентный) для заголовков, то можно создать контрастное сочетании вообще без сходств. Нейтральный (малоконтрастный) шрифт всегда можно сочетать с Акцидентным (высококонтрастным) или рукописным. При сочетании трех и более шрифтов допускается только одно контрастное сочетание. Такой шрифт будет акцентом внимания.
Сочетания без сходства Одно и то же слово, набранное разными шрифтами, будет совершенно по-разному восприниматься, это свойство называют настроением шрифта. Настроение это условный признак, не имеющий классификации, шрифты которые не вызывают настроение называют нейтральными. Комбинируя шрифты, используйте настроение шрифта, чтобы создать правильную атмосферу. Лучшим решением будет использовать один шрифт с ярко выраженным настроением. Большое количество настроенческих шрифтов может смотреться перегружено и плохо сказаться на читабельности.
Сходство аксессуаров
Яркие узнаваемые детали шрифта могут стать основой для хорошего, контрастного сочетания. Например, особые засечки, оформление контуров, пластика шрифтов, заполнение знаков, декоративные элементы, толщина штрихов, соотношения между основным и соединительным штрихом.
Сходство художественного стиля
Это наиболее распространённое из контрастных сочетаний. Некоторые стили имеют свои характерные шрифты и шрифтовые сочетания. Художественные стили тесно связаны с историческими периодами, а форма шрифтов с инструментами и материалами, при помощи которых они были созданы.
