ТИПОГРАФИКА В ВЕБ-ДИЗАЙНЕ // КАК РАБОТАТЬ С ТИПОГРАФИКОЙ // ОСНОВНЫЕ ПРАВИЛА И ТЕРМИНЫ В ТИПОГРАФИКЕ
Задонанить:
Поддержать на бусти:
Это лишь основные термины и правила, а также советы по типографике, которые подойдут новичкам для понимания такой сложной темы как типографика и подбор хорошей гарнитуры. Я не рассказал про кавычки и правила оформления, но это все есть в книгах по типографике
Тайм-коды
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):
Про кириллицу:
Конспект:
Про мобилки:
Сервисы
или или
Подбор пар
Конверторы
Про иерархию
1 view
1210
326
4 months ago 00:25:56 1
🔥 Текст и типографика в Фигме: выравнивания, vertical trim Figma, список, абзацы. Фигма с нуля
4 months ago 00:17:32 1
🔥 Типографика в Фигме: красная строка, кривые, текст по кругу, вариативный шрифт. Фигма с нуля
4 months ago 00:24:13 3
🔥 Текст в Фигме: шрифт, размер, интерлиняьж, letter spacing, абзац. Типографика в Figma Фигма с нуля
4 months ago 00:04:43 1
Бесплатный курс: Тильда за 30 минут. Урок 6 — Советы начинающим дизайнерам на Тильде
4 months ago 00:09:12 10
НЕРЕАЛЬНЫЙ ДИЗАЙН КАРТОЧКИ ТОВАРА | СПИДАРТ
4 months ago 00:00:00 1
Иконы графического дизайна: Пол Ренд. Дизайн: форма и хаос
4 months ago 00:03:32 1
Катя Чехова - Остановка (Alexander Pierce Remix)
4 months ago 00:34:07 1
Blend (переход) в Adobe Illustrator. Подробный урок.
4 months ago 02:29:13 1
“Русский Полифил“ и ренессансная традиция в типографике
4 months ago 00:40:22 26
Акцидентная типографика и леттеринг, Оля Панькова, соосновательница Бюробукв
4 months ago 00:37:31 1
Урок верстки журнала в Индизайн. Работа с текстом.
4 months ago 01:50:45 1
UI ПРАКТИКА // ЧАСТЬ 2 // ДАШБОРД
4 months ago 00:23:12 1
Типографика в дизайне за 20 минут! (уроки для начинающих)
5 months ago 00:08:06 1
Раскрасил пилу деда. Пилил дизайн в Figma!
5 months ago 00:10:58 9
Дизайн баннера в фотошопе. Как сделать стильный диджейский баннер. Туториал
5 months ago 00:11:52 1
Курс Нозика: дорабатываем вёрстку афиши (ещё одной)
5 months ago 00:14:51 1
Курс Нозика: исправляем вёрстку личной страницы
5 months ago 00:19:09 1
Курс Нозика: дорабатываем вёрстку новостного модуля
5 months ago 00:24:48 1
Курс Нозика: дорабатываем вёрстку афиши
5 months ago 00:17:28 1
Курс Нозика: исправляем вёрстку промостраницы телевизора
5 months ago 00:22:09 1
Курс Нозика: исправляем вёрстку ещё одной личной страницы дизайнера
5 months ago 00:22:17 1
Курс Нозика: исправляем вёрстку личной страницы дизайнера
5 months ago 00:21:34 2
Курс Нозика: дорабатываем вёрстку билета на самолёт в мобильном приложении