Типографика:
от верстальщика к фронтендеру
Типографика
Типографика
в чернилах
До средних веков
Антиква
Нет пробелов
Маюскульные знаки
Римские цифры
Средние века
Пробелы
Красная строка
Минускульные знаки
Арабские цифры
XV
XIX
XX
XXI
Типографика
в металле
Кегль
Высота литерной площадки
(2 высоты строчных букв)
Интерлиньяж
Расстояние между строками (кегль + шпон)
XV
XIX
XX
XXI
Литера
Апрош
Расстояние между соседними шрифтовыми знаками
Шпация
Металлическая плашка, разделяющая слова
XV
XIX
XX
XXI
Керн
Свисающая с литерной площадки часть буквы
Лигатура
Знак системы письма, образованный путём объединения 2х
и более графем
Кернинг
Корректировка расстояния между парой знаков
XV
XIX
XX
XXI
Наклонное начертание
Oblique
Наклонен механически
Курсивное начертание
Italic
Напоминает рукописный
XV
XIX
XX
XXI
Минускульные
Строчные знаки
Маюскульные
Прописные знаки
Капитель
Строчные знаки,
выглядящие
как прописные
1234567890 АБВГД
XV
XIX
XX
XXI
Гротеск
Готический шрифт
Без засечек
Sans Serif
Антиква
Античный шрифт
С засечками
Serif
XV
XIX
XX
XXI
Типографика
в массы
Моноширинный шрифт
Шрифт, в котором литерные
площадки всех символов одной ширины
Пропорциональный шрифт
Шрифт, в котором кегельные площадки пропорциональны ширине глифа
XV
XIX
XX
XXI
Моноширинный шрифт
Шрифт, в котором кегельные площадки всех символов одной ширины
Пропорциональный шрифт
Шрифт, в котором кегельные площадки пропорциональны ширине глифа
XV
XIX
XX
XXI
Виды кавычек
«Французские ёлочки»
„Немецкие лапки“
“Английские двойные”
‘ Английские одиночные ’
„Польские”
»Шведские обратные«
" — знак секунд/дюймов
XV
XIX
XX
XXI
Дефис
Для соединения слов
Короткое тире
Для числовых диапазонов
Тире
Часть пунктуации
Диван-кровать
2009–2015
Дважды два — четыре
45−4=41
Минус
Математический символ
XV
XIX
XX
XXI
Выключка
Способ расположения набранной строки относительно вертикальных границ полосы набора
Влево
По формату (но не полная)
XV
XIX
XX
XXI
Вдова
Висячая строка, на которую
кончается абзац, ушедшая
на след.страницу/колонку
Сирота
Висячая строка, с которой начинается абзац, оставшаяся на предыдущей странице/колонке
XV
XIX
XX
XXI
Типографика
в пикселах
TrueType
Формат, позволяющий хранить 652 символа
.ttf
OpenType
FREE формат, позволяющий хранить 65535 символов
.otf
XV
XIX
XX
XXI
Фронтенд
.small-caps {
font-variant: small-caps;
letter-spacing: .15em;
}Капитель
font-variant
We are front-end developers and we love HTML and CSS. They make us happy just because they are awesome.
We are front-end developers and we love html and css. They make us happy just because they are awesome.
Разрядка/tracking
letter-spaсing
Brave New World
Brave New World
.heading {
font-variant: small-caps;
letter-spacing: .2em;
}Курсив
font-style
blockquote {
font-style: italic;
font-synthesis: none;
}Если бы мне давали доллар каждый раз, когда я думаю о тебе... Я бы начал думать о тебе.
Адриано Челентано
blockquote {
font-style: oblique;
font-synthesis: none;
}Минускульные и моноширинные цифры
font-variant-numeric
.ordinal {
font-variant-numeric: ordinal;
}
.oldstyle {
font-variant-numeric: oldstyle-nums;
}
.fraction {
font-variant-numeric: diagonal-fractions;
}
.zero {
font-variant-numeric: slashed-zero;
}
.tabular {
font-variant-numeric: linear-nums tabular-nums;
font-feature-settings: "lnum", "tnum";
}
Минускульные и моноширинные цифры
font-feature-settings
.quote {
font-size: 58px;
quotes: '«' '»';
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
Кавычки
quotes
Многоточие
ellipsis
.car-title {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Многоточие
ellipsis
Дефисы
hyphens
.car-title {
word-wrap: break-word;
hyphens: auto;
}
.car-title {
line-height: 10px;
}Интерлиньяж
line-height
.review {
word-spacing: 5px;
}Выгонка/вгонка (шпации)
word-spacing
В то время некий безымянный печатник создал большую коллекцию размеров...
В то время некий безымянный печатник создал большую коллекцию размеров...
.aligned-text {
text-align: left;
}.aligned-text {
text-align: justify;
}Выключка
text-align
.aligned-text {
text-align: justify;
}.aligned-text {
text-align: justify;
text-justify:inter-ideograph;
}Выключка
text-justify
p::first-letter {
color: #ff7f66;
// some properties you need
}
Буквица
::first-letter
.review-text {
text-indent: 2em;
}
Красная строка
text-indent
.text {
hanging-punctuation: first;
}
Висячая пунктуация
hanging-punctuation
widows
orphans
.column {
widows: 3;
orphans: 3;
}Вдовы/сироты
widows/orphans
.serif {
font-family: serif;
}Three words heading
Three words heading
Three words heading
.sans-serif {
font-family: sans-serif;
}.monospace {
font-family: monospace;
}Семейство шрифтов
font-family
.cursive {
font-family: cursive;
}Three words heading
Three words heading
.fantasy {
font-family: fantasy;
}Семейство шрифтов
font-family
em, px...
?
Кегль
font-size
em, px, ex, %, cm, mm, q, mozmm, in, pt, pc, vh, vw, vmin, vmax, rem, ch
17
Кегль
font-size
Зачем
-
Повторить/узнать основы типографики, чтобы
- понимать дизайнера
- понимать, с чем можно работать
-
Повторить/узнать свойства CSS, чтобы
- понимать, что можно реализовать
- понимать, как можно реализовать
- Быть грамотным специалистом
Мы хотим еще
we-want-more
- http://goo.gl/H77YZ8 — сокращения OpenType (font-feature-settings)
- https://github.com/postcss/postcss-font-variant — плагин postCSS для font-variant
- http://www.w3.org/TR/css3-fonts/ — CSS Fonts Module Level 3
- https://www.w3.org/TR/css3-text/ — CSS Text Module Level 3
- Spiekermann — «Stop Stealing Sheep»
- Александра Королькова — «Живая типографика»
- Роберт Брингхерст — «Основы стиля в типографике»
Роман Прудников
Ты просто зайка
Спасибо,,
Спасибо,
Typography: from printing press to frontend (Russian)
By rayproud
