Задонанить: https://www.donationalerts.com/r/ruslan_uxui
Поддержать на бусти: https://boosty.to/easyaboutdesign
Это лишь основные термины и правила, а также советы по типографике, которые подойдут новичкам для понимания такой сложной темы как типографика и подбор хорошей гарнитуры. Я не рассказал про кавычки и правила оформления, но это все есть в книгах по типографике
Тайм-коды
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 сервиса для автоматической генерации иерархии по размеру
43:05 - Первый: gridlover.net
44:00 - Второй: modularscale.com
Книга: https://leksandra.livejournal.com/120488.html
гарнитуры: https://bit.ly/2JRGKpf
строение: https://bit.ly/3l9s9TO
эпл шрифт(eng): https://developer.apple.com/videos/play/wwdc2015/804/
Про CSS: https://developer.mozilla.org/ru/docs/Web/CSS/font-weight
Про трекинг material и apple(eng): https://material.io/design/typography/the-type-system.html#type-scale
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/
Почему гротески лучше(eng): http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/
Про кириллицу: https://leksandra.livejournal.com/114663.html
Конспект: https://bit.ly/2JRGNRX
Про мобилки: https://ux.pub/15-luchshix-praktik-po-tipografike-v-mobilnom-dizajne/
Сервисы
https://fonts.google.com/ или https://www.dafont.com/ или https://webfonts.pro/
Подбор пар
https://fontpair.co
https://www.typewolf.com
https://www.canva.com/font-combinations
Конверторы
http://www.font2web.com
https://onlinefontconverter.com
Про иерархию
https://www.gridlover.net/try
https://www.modularscale.com/
Интерлиньяж и ширина строки
https://grtcalculator.com/
You & I by Soyb & Amine Maxwell
https://soundcloud.com/soybmusic
https://soundcloud.com/aminemaxwell
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: http://bit.ly/l-you-and-i
Music promoted by Audio Library https://youtu.be/NS71HLgd9q4