Содержание

Универсальный способ настройки гармоничного интерлиньяжа — Дизайн на vc.ru

Можно встретить информацию, что межстрочное расстояние, или интерлиньяж, должно быть на 20% больше кегля. Примерно с той же частотой встречается информация, что разница должна быть уже на 50%.

{«id»:250743,»type»:»num»,»link»:»https:\/\/vc.ru\/design\/250743-universalnyy-sposob-nastroyki-garmonichnogo-interlinyazha»,»gtm»:»»,»prevCount»:null,»count»:17,»isAuthorized»:false}

{«id»:250743,»type»:1,»typeStr»:»content»,»showTitle»:false,»initialState»:{«isActive»:false},»gtm»:»»}

{«id»:250743,»gtm»:null}

5008 просмотров

При интерлиньяже в 150% строки слишком далеко друг от друга.

Это уже больше похоже на правду, но строки во втором и третьем блоках всё ещё далековаты.

Магического соотношения не существует. Блоки текста будут выглядеть по-разному с разными шрифтами из-за различий Cap Height и X-height. Если 120% с большой вероятностью подойдёт для интерфейсных шрифтов — из-за того, что они создавались с определенным соотношением Cap и X-height — то с остальными возникают проблемы.

Былинная картинка-пояснение анатомии шрифта с гайдлайнов Material Design. Google

Для решения проблемы стоит использовать не общий индекс для всех шрифтов, а индивидуальный, в зависимости от его X-height. Нужно взять строчную букву без выносных элементов — например, Н — того же кегля, что набранный текст, и подставить её между двумя строками текста так, чтобы верхняя граница буквы касалась линии набора первой строки, а нижняя — верхней границы высоты заглавной буквы.

Гармонично и прекрасно.

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

Спасибо за внимание, и классных вам дизайнов!

[атрибут|=»значение»] | CSS | WebReference

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class.

Синтаксис

[<атрибут>|="<значение>"] { Описание правил стиля }
E[<атрибут>|="<значение>"] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут точно равен указанному значению или начинается с указанного значения, после которого идёт дефис.

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Блок</title> <style> div[class|=»block»] { background: #306589; /* Цвет фона */ color: #acdb4c; /* Цвет текста */ padding: 5px; /* Поля */ } div[class|=»block»] a { color: #fff; /* Цвет ссылок */ } </style> </head> <body> <div> <h3>Термины</h3> <div> <ul> <li><a href=»t1.html»>Буквица</a></li> <li><a href=»t2.html»>Выворотка</a></li> <li><a href=»t3.html»>Выключка</a></li> <li><a href=»t4.html»>Интерлиньяж</a></li> <li><a href=»t5.html»>Капитель</a></li> <li><a href=»t6.html»>Начертание</a></li> <li><a href=»t7.html»>Отбивка</a></li> </ul> </div> </div> </body> </html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=»block», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Учимся работать с шаблоном MF. Настройка дизайна

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

Дизайн сайта состоит из нескольких частей: основные (базовые) цвета, общая типографика и дизайн отдельных блоков.

Основные цвета в MF выбираются через опцию «Дизайн шаблона». Поскольку это Material Design, то шаблон автоматом будет выведен в выбранных тонах. Меняются цвета шапки, меню, фона подвала, готовые модули и т.д. Если вам не нужно очень точно следовать заданному цвету, то будет достаточно выбрать ближайший дизайн.

Если же стоит задача получить палитру точного цвета, то необходимо сделать копию темы, указать цвета и скомпилировать Sass. Для новичков это достаточно сложно, но для любого вебмастера проблемы не составит. И, кстати, именно так вы можете расширить Default-шаблон — используйте дефолтную тему, создавайте свои варианты дизайнов.

Также стоит отметить, что в комплект MF-шаблонов sass-файлы не входят.

Когда вы выбрали дизайн, посмотрите насколько точно подходят его цвета для ваших задумок. Очевидно, что может возникнуть задача использовать какой-то точный цвет в шапке или в тексте сайта. В Berry CSS для этого используются фиксированные цвета color1, color2 и т.д. Чтобы их переопределить нужно в опции «CSS стили» использовать css-переменные.

:root {
   --color1: #0D6EFD;
   --color2: #6C757D;
   --color3: #28A745;
   --color4: #DC3545;
   --color5: #FFC107;
   --color6: #17A2B8;
   --color7: #A300D9;
}

После этого они будут доступны в классах:

  • t-color1 — цвет текста
  • bg-color1 — цвет фона
  • hover-t-color1 — цвет текста при наведении
  • hover-bg-color1 — цвет фона при наведении
  • bor-color1 — цвет бордюра

Таким образом вы можете задать произвольные фиксированные цвета, а после их использовать в произвольном месте.

Мой совет: настройку дизайна начинать именно с цветов. Если хватит primary/secondary/tertiary — будет отлично — используйте только эти классы. Но, если их недостаточно, то создаём фиксированные цвета и оперируем ими в качестве дополнения к primary-палитре.

Следующий этап — настройка типографики. Она отвечает за то, как будет выглядеть текст на сайте по умолчанию, то есть без дополнительных css-классов.

Начать лучше с основного текста: гарнитура (шрифт), его размер, цвет и интерлиньяж. Всё это также настраивается через css-переменные в :root.

--body-font-family: "Ubuntu";
--body-size-base: 17px;
--body-line-height: 1.6;
--body-color: #333;

Основной шрифт сайта можно выбрать на странице MF. Лучше читаются шрифты группы sans serif, но среди них могут быть достаточно мелкие, поэтому нужно будет увеличить размер. Не забудьте также выбрать шрифт в настройках шаблона, чтобы MF загрузил его файлы.

Часто используют второй шрифт, например для заголовков или шапки. Для этого его достаточно отметить для загрузки, а использовать в виде css-класса уже точечно. Например по умолчанию в MF второй шрифт Roboto Slab и его класс t-robotoslab.

После основного текста нужно настроить ссылки.

--link-color: #4881e6; // цвет 
--link-decoration: none; // подчеркивание
--link-hover-color: #D90000; // цвет при наведении
--link-hover-decoration: underline; // подчеркивание при наведении

Можно изменить заголовки:

--h2-font-size: 2.5rem;
--h3-font-size: 2rem;
--h4-font-size: 1.75rem;
--h5-font-size: 1.5rem;
--h5-font-size: 1.2rem;
--h6-font-size: 1rem;
--headings-font-weight: normal; // полужирность
--headings-margin: 0 0 .6em 0; // отступы
--headings-line-height: 1.2; // интерлиньяж

Остальная типографика настраивается уже по желанию. Например часто меняют тэг BLOCKQUOTE.

Когда вы выполните эти настройки, то сайт уже будет отличаться от типового варианта MF. Но, в полном объеме это достигается за счёт дизайна отдельных блоков. В них мы используем готовые классы Berry CSS. То есть не нужно править css-файл шаблона и придумывать отдельные классы для своих блоков. У нас используется методика utility-first, где мы используем уже готовые классы.

Я иногда встречаю большую ошибку, когда начинают сразу править css-файл шаблона и меняют или дописывают свои стили. Не делайте этого! Если вы никогда не работали с атомарным подходом в вёрстке, то потратьте немного времени на изучение возможностей Berry CSS. Уверен, что этих возможностей хватит для решения большинства ваших задач.

Что менять в блоках, модулях и т.д.?

В основном всё крутится вокруг нескольких типовых задач. Для текста указывается размер и цвет. Для блоков — отступы и цвет фона, реже бордюры. Я не буду приводить примеры, поскольку они есть на сайте Berry CSS. Также посмотрите готовые блоки Berry — хотя бы в качестве примера.

Что касается изображений, то в обязательно порядке замените их на свои. В Сети полно бесплатных стоков, где вы можете подобрать фото на любой вкус. Изображения в MF используются только для примера — демонстрации его возможностей. Когда я встречаю MF-сайты с этими демо-изображениями, то просто не понимаю — неужели так сложно их поменять на что-то своё? От этого зависит уникальность вашего сайта.

Теперь про иконки. У нас используется шрифт FontAwesome, где примерно 1600 иконок. Если вы используете иконку в качестве лого, то подберите что-то другое вместо . В модулях, где используются иконки тоже желательно поменять их на другие — сейчас они приведены только в качестве примера. Сменить класс иконки — секундное дело.

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

Что будет сложно для новичков? Настройка адаптивности. Эта задача для вебмастера, который понимает как она работает и может корректно протестировать полученный код. Поэтому, когда вы будете работать с MF, то лучше не трогать классы адаптивности, чтобы не сломать готовый вариант. В конце концов, у вас есть моя техподдержка, где я смогу помочь. 🙂

Другие записи сайта

html — CSS: удалить высоту строки (интерлиньяж) для более крупного текста

Как удалить интерлиньяж из обязательного диапазона, чтобы у << не было дополнительного места сверху и снизу.

Строка поля занимает определенную высоту в зависимости от значения по умолчанию для размера текста line-height, однако обязательное поле выше, потому что размер шрифта больше. Как убрать лишнее белое пространство над и под <<?

.fieldRow { /* for illustration only */
        border: solid 1px #f00;  
}
.mandatory {
        color: #f00;
	border: solid 1px #f00; /* for illustration only */
	font-size: 24px;
	line-height: 0;
	vertical-align: middle;
}
<div>
  
	<label for="select">Some field</label>
	
	<select name="select">
		<option>Any</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>	
	
	<span>&laquo;</span>

</div>

8

Chris Spittles 4 Дек 2012 в 14:44

5 ответов

Лучший ответ

После удаления vertical-align: middle мне это нравится.

.mandatory {
  color: #f00;
  font-size: 24px;
  line-height: 0;
}

ДЕМО

9

Gurpreet Singh 4 Дек 2012 в 10:52

Я знаю, что это старый, но у меня была аналогичная проблема, и я придумал другое решение.

Это немного взломано, но вы можете поместить контейнер вокруг текста, затем использовать скрытое переполнение и присвоить ему высоту. Дополнительное пространство под большим шрифтом будет обрезано содержащим div. Вы не избавляетесь от этого, а скрываете это. Это работает для меня, но может не сработать в вашей ситуации.

.container {
  overflow: hidden;
  height: 30px; /* Or whatever height is necessary to show the text */
}
<div>
  <span>&laquo;</span>
</div>

1

Stephen Starzyk 16 Июл 2018 в 00:16

Вы добавили различные элементы стиля, которые добавили пробелы, а именно font-size обязательного диапазона отличается от его контейнера.

Добавленная вами граница также заставляет вещи выглядеть немного хуже, чем они есть на самом деле.

См. Эту скрипку, она выглядит намного лучше, если вы удалите вышеуказанное.

Пересмотренный CSS:

.fieldRow {

  border: solid 1px #f00;
  font-size: 24px;

}
.mandatory {
  color: #f00;
  border: solid 1px #f00;
  border-top: 0;
  border-bottom: 0;
}

1

Sean 4 Дек 2012 в 10:54

Удалить вертикальное выравнивание

.mandatory {
    color: #f00;
    border: solid 1px #f00; /* for illustration only */
    font-size: 24px;
    line-height: 0 !important;
}​

ДЕМО

2

Sowmya 4 Дек 2012 в 10:53

line-height: unset;

Или высота строки: не задано! важно;

1

Dangelo Santana 13 Апр 2021 в 20:30

8 способов улучшить типографику

Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.

1. Размеры

Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
p {
font-size: 10px;
max-width: 300px;
}

Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

2. Интерлиньяж

Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}

3. Обработка кавычек

Обработка кавычек должна проводиться на полях текста. Если кавычки сливаются с текстом, то они разрывают левое поле и нарушают рифму блока текста. Обработка кавычек не нарушает выравнивания по левому краю и баланса и поэтому – улучшает читабельность.

Это легко достигается с помощью CSS, используя элемент blockquote:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм

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

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}

p {
margin-bottom: 15px;
}

Это позволяет каждому параграфу располагаться на сетке, сохраняя вертикальный ритм текста.

5. Верхние и нижние висячие строки

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

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t (davecardwell.co.uk/javascript/jquery/plugins/jquery-widont/), плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение

Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.

Вот несколько способов выделения с помощью CSS:
span {
font-style: italic;
}

h2 {
font-weight: bold;
}

h3 {
text-transform: uppercase;
}

b {
font-variant: small-caps;
}
Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:
h2 {
font-size: 48px;
}

h3 {
font-size: 36px;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 21px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}

p {
font-size: 14px;
}

8. Подчищаем рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator (yellowgreen.de/phpHyphenator), Hyphenator (code.google.com/p/hyphenator/) или онлайн-генераторы (yellowgreen.de/soft-hyphenation-generator).

Hyphenator.js (code.google.com/p/hyphenator) это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

CSS свойство line-height — Как создать сайт

CSS справочник

Определение и применение

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

В CSS за междустрочный интервал отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше расстояние между строками.

Поддержка браузерами

CSS синтаксис:

line-height: "normal | number | length | initial | inherit";

JavaScript синтаксис:

object.style.lineHeight = "90%"

Значения свойства

Значение Описание
normal Нормальная высота строки (как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %). Это значение по умолчанию.
number Число, которое будет умножаться с текущим размером шрифта, чтобы задать высоту строки.
length Фиксированная высота строки, которая задаётся с помощью единиц измерения, используемых в CSS (px, pt, cm…).
% Высота строки в процентах от текущего размера шрифта.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS 1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства line-height</title>
<style> 
.test {
	line-height: 10px; /* задаём высоту строки в пикселях */
}
.test2 {
	line-height: normal; /* задаём высоту строки (значение по умолчанию) */
}
.test3 {
	line-height: 150%; /* задаём высоту строки в процентах от текущего размера шрифта */
}
.test4 {
	line-height: 2; /* задаём высоту строки числом, 
которое будет умножаться с текущим размером шрифта */
}
</style>
</head>
	<body>
		<p class = "test">Параграф в котором line-height: 10px<br>
Параграф в котором line-height: 10px</p>
		<p class = "test2">Параграф в котором line-height: normal
<br>Параграф в котором line-height: normal</p>
		<p class = "test3">Параграф в котором line-height: 150%
<br>Параграф в котором line-height: 150%</p>
		<p class = "test4">Параграф в котором line-height: 2
<br>Параграф в котором line-height: 2</p>
	</body>
</html>

В этом примере мы с помощью свойства line-height установили различные значения междустрочного интервала для абзацей (элемент <p>). Результат нашего примера:

Пример установки междустрочного интервала.

 

CSS справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Равносторонний треугольник для создания идеального текста

Многие веб-дизайнеры до сих пор недооценивают значимость типографики. За все время я встречал лишь нескольких, кто действительно разбирается в построении шрифтов и понимает, как применять свои знания в работе. Но недостаточные знания по этому вопросу — это вовсе не результат невежества. Я выяснил, что обычно веб-дизайнеры или самоучки, поэтому еще не осмыслили значимость типографики, или они имеют специальное образование, но типографика для них — всего лишь одна из многих дисциплин.

Я разработал курс Better Web Type, чтобы помочь дизайнерам узнать, насколько важна типографика в веб-дизайне. Я считаю, что и дизайнеры, и разработчики должны владеть основами — и если дизайнер использует лигатуры, а разработчик даже не имеет понятия, что это такое, то как мы можем ждать от него правильного написания кода для изображения этой необычайно красивой типографики? Но если представители обеих профессий знают основы, мы сможем делать веб-сайты совершенней с помощью создания прекрасной типографики. И делать это вместе.

Одна из самых значимых вещей в типографике — создание беспрепятственного чтения, которое привлекает читателя и при этом объективно отражает содержимое. Для этого необходимо создавать идеальные абзацы. Существует три способа, и как сказал прославленный типограф и визуальный пропагандист 20 века Джозеф Мюллер-Брокманн:

Сообщение должно быть понятно и легкодоступно читателю. Это в немалой степени зависит от размера шрифта, от длины строки и межстрочного интервала (высоты строки).

Когда я писал уроки для курса Better Web Type, я пытался придумать простую концепцию, которая бы точно иллюстрировала, что размер шрифта, высота строки и её длина должны быть в идеальном балансе. Некоторое время я мучился, а потом меня осенило: равносторонний треугольник. Все три его стороны равны, как и все три угла. Отличное представление о трех вещах в идеальном балансе. И эта идея оказалась легко применима к трем вещам, которые образуют идеальный текстовый блок. Но сначала давайте рассмотрим каждую из них в отдельности.

Размер и цвет шрифта

Одна из ошибок большинства веб-сайтов — слишком маленький размер основного текста. Еще в начале 2000-х по умолчанию было принято писать весь текст размером 11px. Но тогда и экраны были меньше, и разрешение экрана ниже. И 11px выглядели больше, чем сейчас.

Общим правилом считается устанавливать размер основного текста так, чтобы он был равен размеру текста в книге на расстоянии вытянутой руки.


Выравнивание размера шрифта с размером текста в книге на расстоянии вытянутой руки. (Источник: iA)

Рекомендованный размер для современных экранов: 16px для смартфонов и 18-22px для десктопов. Также многое зависит от самого шрифта. Некоторые шрифты при размере 16px могут казаться значительно больше других, как вы можете увидеть на примере ниже.

Тот же самый текст в Merriweather кажется больше и тяжелее, чем в Georgia.

«Цвет шрифта» в типографике не означает непосредственно цвет типа красного, синего или зеленого. Цвет шрифта — это то, как темный тяжелый текст выглядит на светлом фоне. Два шрифта одинакового размера и веса могут ощущаться по-разному. Отличие шрифта Merriweather в приведенном выше примере — он ниже по сравнению с Georgia (если сравнивать засечки и разные основы). Поэтому он воспринимается тяжелее, а цвет шрифта кажется темнее.

Длина строки

При чтении очень длинных текстовых строк наши глаза довольно сильно устают. Им необходимы постоянные паузы, которые возникают благодаря обрыву строки. В момент переключения на следующую строку они успевают немного отдохнуть. Совсем чуть-чуть, но этого вполне достаточно. Чем-то напоминает двигатель, который не все время работает на полную мощность, поэтому дольше не перегревается.

Идеальная длина текстовой строки — 45-75 символов с пробелами. Если длина больше, текст будет гораздо сложнее читать, так как глаза просто не будут успевать отдохнуть. Если же длина меньше, придется слишком часто переключаться на следующие строки.

Рекомендованная длина строки в гиде Material Design от Google (Источник: material.io)

Высота строки

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

В интернете высота строки (интерлиньяж) работает иначе: она равномерно распространяется на области ниже и выше самой строки. 

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

А это значит, высота строки устанавливается без лишних раздумий. Однако интерлиньяж слишком важен, чтобы с ним можно было так обращаться. Высота строки всегда зависит от ее длины. И чем длиннее строки, тем больше места необходимо оставлять между ними. Кроме того, высота также зависит от размера шрифта. Чем он больше, тем соответственно, больше должен быть интерлиньяж.

Цвет шрифта также влияет на высоту строки. Более темному и тяжелому тексту требуется больше межстрочного пространства. И даже сам шрифт может иметь значение. Как мы видели ранее, некоторые шрифты кажутся больше других. Некоторые — в особенности это касается шрифтов с засечками — будут казаться тяжелее. Следовательно, им также необходимо больше пространства.

Теперь, когда вы знаете, что высота строки — это очень важная штука, которую нельзя рассматривать изолированно, давайте посмотрим на самые оптимальные общепринятые правила. Для абзаца идеальная высота строки обычно колеблется от 1.3 до 1.7. Поэтому текст размером 16px должен иметь высоту строки где-то 21-26px. Все это также будет зависеть от вещей, о которых было сказано ранее: дизайн шрифта, его размер, вес и т.д.

Тот же тип шрифта, тот же размер: отличается только цвет. Чем темнее цвет, тем больше должна быть высота строки.

Тот же тип шрифта, тот же размер, тот же цвет, отличается высота строки. Чем длиннее строка, тем больше требуется высота.

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

Равносторонний треугольник

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

Итак, мы подошли к так называемому Равностороннему Треугольнику Идеального Текста. Мы в отдельности рассмотрели размер шрифта, длину и высоту строки (насколько это возможно). Благодаря этому мы увидели, что все три характеристики тесно связаны между собой. О них нельзя думать по отдельности, не беря в расчет другие факторы. Вот почему равносторонний треугольник идеально отражает хорошо продуманный с точки зрения дизайна текст. Для него нам нужен хороший шрифт, размер которого будет соответствовать как длине, так и высоте строки. Сделаете неправильный выбор, и треугольник исказится.

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

Равносторонний треугольник отражает идеально сбалансированный текст.

В приведенном выше примере мы видим текст, написанный Merriweather — необычайно большим и тяжелым шрифтом. Поэтому мы устанавливаем размер на 14px. Высота строки, следовательно, ближе к верхнему пределу рекомендованного диапазона от 1.3 до 1.7. Абзац, расположенный выше, отлично вписывается в 55 знаков в строку (что также входит в рекомендованный диапазон).

Строки в этом абзаце слишком длинные, поэтому наш треугольник уже не равносторонний. Для исправления ситуации нам нужно либо увеличить размер шрифта и высоту строки, либо уменьшить количество знаков в строке.

В примере выше длина строки выходит за рамки рекомендованного диапазона 55-75. В среднем он достигает 84 знаков. Это означает, что основание треугольника сильно растянуто с обеих сторон.

Высота строки в абзаце слишком большая. Строки начинают дрейфовать в пространстве. Можно это исправить, если увеличить ширину строки, а также размер шрифта. Более простой способ — просто уменьшить высоту.

Очевидно, что высота в примере выше слишком большая. Она установлена на 2 и выходит за рамки рекомендованного диапазона. Строки находятся очень далеко друг от друга. К сожалению, в веб-дизайне такое встречается слишком часто. Как будто сейчас стало модным делать текст светло-серым и устанавливать слишком большую высоту. Похоже на попытку добиться чистого минималистического стиля, но неудачная попытка. Такие тексты, особенно если они очень длинные, довольно трудно читать.

Размер шрифта в этом тексте слишком большой. Это оказывает влияние на длину строки, растягивая ее до 30 знаков, и сильно искажает треугольник. Строки расположены слишком близко друг к другу. Для того, чтобы это исправить, необходимо либо уменьшить размер текста, либо увеличить высоту и длину строки. 

Размер шрифта в примере выше слишком большой для заданной высоты и длины строк. Такие тексты практически невозможно читать. К счастью, я не часто сталкиваюсь с таким в сети. Но я все же хотел показать даже этот редкий пример для того, чтобы разобрать все возможные моменты.

html — CSS: удалить высоту строки (интерлиньяж) для крупного текста

html — CSS: удалить высоту строки (интерлиньяж) для крупного текста – 2 Ответа

спросил

Просмотрено 37 тысяч раз

Как удалить интерлиньяж из обязательного интервала, чтобы << не имел дополнительного пробела сверху и снизу.

Строка поля занимает определенную высоту на основе высоты строки по умолчанию для размера текста, однако обязательное поле выше, потому что размер шрифта больше. Как удалить лишнее белое пространство над и под << ?

  .fieldRow { /* только для иллюстрации */
        граница: сплошная 1px #f00;
}
.обязательное {
        цвет: #f00;
граница: сплошная 1px #f00; /* только для иллюстрации */
размер шрифта: 24px;
высота строки: 0;
вертикальное выравнивание: посередине;
}  
  <дел>
  


<выбрать имя="выбрать">






«

  
Дмитрий Зайцев

12.7k1010 золотых знаков6767 серебряных знаков104104 бронзовых знака

спросил 4 дек. 2012 в 10:44

Крис СпиттлсКрис Спиттлз

14.4k1010 золотых знаков6262 серебряных знака8383 бронзовых знака

4

После удаления vertical-align: middle он выглядит хорошо.

  .обязательно {
  цвет: #f00;
  размер шрифта: 24px;
  высота строки: 0;
}
  

ДЕМО

Добавить комментарий

Ваш адрес email не будет опубликован.