Типографика:

от верстальщика к фронтендеру

Роман Прудников

r.prudnikov@office.ngs.ru

@rayproud

Типографика

Типографика
в чернилах

До средних веков

Антиква

Нет пробелов

Маюскульные знаки

Римские цифры

Средние века

Пробелы

Красная строка

Минускульные знаки

Арабские цифры

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

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

Роман Прудников

Ты просто зайка

 Спасибо,,

Спасибо,

Роман Прудников

r.prudnikov@office.ngs.ru

@rayproud