ТИПОГРАФИКА В ВЕБ-ДИЗАЙНЕ // КАК РАБОТАТЬ С ТИПОГРАФИКОЙ // ОСНОВНЫЕ ПРАВИЛА И ТЕРМИНЫ В ТИПОГРАФИКЕ

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

Тайм-коды
00:00 - Почему это важно
00:31 - 1 отличие веба от графического дизайна
01:13 - 2 отличие: производительность и скорость
01:48 - Первые выводы
02:00 - Про выбор гарнитуры
02:33 - Про читабельность с примером
04:00 - Вывод про читабельность
04:24 - Заметка про читабельность в основном наборном тексте
05:00 - Эмоциональность в типографике с примерами
05:41 - Надо читать книгу Корольковой (бесплатно)
06:13 - Что такое гарнитура, шрифт, начертание и как это в css
07:48 - Как подключить шрифт к сайту
08:18 - Описание процесса подключения ручками
08:48 - Про выбор формата при конвертации
09:40 - Про строение шрифта
10:05 - Что такое кегль?
10:36 - Про кернинг
11:20 - Пример кернинга
12:13 - Про javascript библиотеки для авто-кернинга
12:25 - Про использование letter-spacing для кернинга
14:02 - Про свойство font-kerning
14:20 - Пример реализованного кернинга в верстке
14:38 - Про трекинг
15:10 - Пример трекинга
16:05 - Выводы про кернинг и трекинг
16:34 - Про интерлиньяж aka высота строки aka line-height aka межстрочное
16:51 - Стандарт 120-140%, но лучше 150%
17:06 - Если размер большой, то нужно уменьшать вплоть до 100%
17:20 - Пример работы с высотой строки для заголовка с крупным размером
18:20 - Пример работы с высотой строки для основного текста
18:48 - Про внешнее и внутреннее с примером
20:55 - Про высоту строки относительно ширины
22:22 - Почему слишком широкая или узкая строка это плохо?
23:14 - Про сирот, вдов, коридоры, выключку
23:30 - Что такое коридор?
23:58 - Почему появляется коридор? Как избежать?
24:08 - Что такое сироты и вдовы
24:31 - Как избегать сирот и вдов
24:46 - Про выключку
24:56 - Про переносы
25:26 - Начало про виды шрифтов: антиква и гротеск
25:36 - Твой вопрос: как выбрать гарнитуру? Мой ответ
25:52 - Почему готовые решение лучше?
26:17 - Антиква и Гротеск
26:40 - Выбирай всегда гротеск
26:52 - ДА БУДЕТ СРАЧ
27:03 - Нет))
27:16 - Почемууууу
27:42 - Про засечки и читабельность и чтение
28:50 - Мой вердикт засечкам
29:02 - В большинстве продуктов нет засечек
29:12 - Большинство современных гарнитур читаемы, не спорь
29:22 - О чем спорить тогда?
29:32 - Пример читабельности антиквы и гротеска в тексте
29:53 - И снова контраст
30:05 - Немного про строение и то, что нужно, чтобы понять контраст
30:58 - Разбираем на что обращать внимание при подборе гарнитуры
32:00 - Про контраста в штрихах
33:00 - И снова о том, почему гротеск лучше читается в вебе
33:28 - При подборе гарнитур важен только контраст
33:38 - Как работать с контрастом для подбора?
35:00 - Простые примеры по итогу
36:00 - Про лицензирование гарнитур
36:10 - Экранная для картинок, а веб для сайтов и приложений
36:20 - Чем ограничена веб лицензия
36:39 - Как понять что в гарнитуре хорошая кириллица?
37:06 - Сервисы по конвертации шрифтов
37:38 - Гайдлайны гугла и эпл могут помочь с трекингом
38:15 - Где смотреть и скачивать хорошие шрифты бесплатно
39:50 - Готовые шрифтовые пары
40:47 - Шрифтовые пары с примерами использования на сайтах
41:12 - Простой подборщик шрифтовой пары
41:40 - Сервис просчитывает интерлиньяж относительно ширины контента
42:45 - Про 2 сервиса для автоматической генерации иерархии по размеру

Сервисы

Подбор пар

Конверторы

Про иерархию

Интерлиньяж и ширина строки

You & I by Soyb & Amine Maxwell
Creative Commons — Attribution 3.0 Unported — CC BY 3.0

[tommyshelby]

Я обычно не пишу комментарии, но тут не могу удержаться
Лучшее видео о веб типографике, которое я видел

[sheril]

Вы так интересно и понятно рассказываете
Спасибо вам огромное за ваш труд!

[ЕлизаветаКарасёва-вц]

Очень понятно и о многом, очень полезное видео. Спасибо вам и успехов в работе!

[Helly]

Какой ценный контент! Спасибо большое!

[SunShine]

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

[donbotdonbot]

Спасибо, за контент и проработанный видео и ссылки

[singbackwards]

отличный урок, только режет слух эта "хейт". height все-таки как "хайт" читается, а хейт — это то, что можно получить за неправильное произношение элементарных слов)))

[igoralt]

Руслан привет, почему ты не выставляешь интерлиньяж в процентах? И важно ли это?

[ИгорьВишня-гх]

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

[i-history]

отличный контент да еще и бесплатно, поставил бы сотню пальцев вверх.

[futuroma_]

СКАЖЕМ ТАК, хороший видос .
Спасибо, СКАЖЕМ ТАК 👍
Ну и тайм код у тебя мощный, СКАЖЕМ ТАК ))

[gymnhobi]

Спасибо!!!! Безумно полезно, особенно сайты и статьи!!