ТИПОГРАФИКА В ВЕБ-ДИЗАЙНЕ // КАК РАБОТАТЬ С ТИПОГРАФИКОЙ // ОСНОВНЫЕ ПРАВИЛА И ТЕРМИНЫ В ТИПОГРАФИКЕ
Задонанить:
Поддержать на бусти:
Это лишь основные термины и правила, а также советы по типографике, которые подойдут новичкам для понимания такой сложной темы как типографика и подбор хорошей гарнитуры. Я не рассказал про кавычки и правила оформления, но это все есть в книгах по типографике
Тайм-коды
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 - Первый:
44:00 - Второй:
Книга:
гарнитуры:
строение:
эпл шрифт(eng):
Про CSS:
Про трекинг material и apple(eng): #type-scale
Почему гротески лучше(eng):
Про кириллицу:
Конспект:
Про мобилки:
Сервисы
или или
Подбор пар
Конверторы
Про иерархию
35 views
1210
326
1 day ago 00:00:43 17
Продаётся Именное поздравление Новый год 388_НГ Modern New Year Typography 126788 #новыйгод #milanvideolife #christmas #newyear
3 days ago 00:05:11 133
10 стартовых правил дизайна
6 days ago 00:19:28 421
САМЫЕ ЧАСТЫЕ ОШИБКИ НОВИЧКОВ В ДИЗАЙНЕ / ТИПОГРАФИКА
7 days ago 00:14:46 2
[Alexander Lichter] Headings and Typography in (in any framework actually...)
1 week ago 00:11:26 16
[PeeJ ENT] DaVinci Resolve | 3D Camera Typography
1 week ago 00:47:12 18
Дизайн фирменного стиля (теория)
1 week ago 00:00:35 18
Композиция «Объёмная презентация»
2 weeks ago 00:04:56 1.1K
Кинетическая типографика в Канва анимация
2 weeks ago 00:29:31 340
Лекция «Газета в изобразительном искусстве»
2 weeks ago 01:35:38 12
Бренд стартапа и разработка визуальной айдентики
2 weeks ago 00:01:27 20.2K
Кейс: разработка многостраничного сайта для шоколадного бренда Belcolade от компании Пуратос
2 weeks ago 01:01:33 3.2K
Дизайн разбор сайтов на Тильде —
2 weeks ago 00:01:45 3
Композиция в предметном дизайне
3 weeks ago 00:11:10 5
Все новинки Тильды 2023 года
3 weeks ago 00:11:21 16
Создание сайта из базовых блоков на Тильде
3 weeks ago 00:16:09 1.4K
“Шаг в Шрифты“ - мой новый курс по типографике. Что в курсе, как попасть.
3 weeks ago 00:14:40 6
ВСЁ О ТИПОГРАФИКЕ ДЛЯ ДИЗАЙНЕРА В FIGMA ЗА 10 МИНУТ. Ну почти...
3 weeks ago 00:01:14 1
ПРО МЕНЯ в дизайне ТИПОГРАФИКА | Обзор выпускного альбома
3 weeks ago 00:00:58 1
ПАПКА в дизайне ТИПОГРАФИКА | Обзор выпускного альбома
4 weeks ago 01:15:37 9
Иван Гладких – как устроены шрифты?
4 weeks ago 00:20:15 6
Почему HR в мире дизайна устарел? Наблюдение / Смена подхода / Новое поколение дизайнеров
1 month ago 00:30:12 2K
Создаем обложку для бестселлера в реальном времени! ПОШАГОВОЕ РУКОВОДСТВО🔥