Сайт для создания кинетической типографики by setupsai

Space Type Generator — на этом сайте вы найдёте готовые шаблоны для создания кинетической типографики. #сервисы

Обычный автокомплит показывает список под полем. Typeahead работает иначе: продолжение появляется прямо внутри строки, и за счет этого пользователь не прыгает взглядом между инпутом и выпадающим списком. На словах просто. На деле это почти полностью кастомное поведение, которое не совпадает с нативной логикой HTML-инпутов. Флориан Шульц очень хорошо разбирает, почему такая штука сложнее, чем кажется. Сначала он попробовал идти через реальное выделение текста, но на iOS это сразу развалилось из-за ручек выделения и странного поведения браузера. Потом пришел к overlay-подходу, где completion рисуется поверх инпута отдельным слоем, а дальше началась настоящая инженерия: beforeinput, кастомная обработка backspace, скрытие каретки, переполнение текста и даже проблема кернинга, из-за которой буквы начинали прыгать при вводе. Внутри: – Чем typeahead отличается от обычного автокомплита со списком подсказок; – Почему решение через реальное выделение текста ломается на мобильных; – Как работает overlay-подход с отдельным слоем поверх инпута; – Какие события приходится перехватывать, чтобы поведение было естественным; – Почему стандартный Highlight не дает одинаковый результат в разных браузерах; – Как обрабатывать состояния фокуса, очистки и переполнения текста; – Откуда берется проблема с кернингом при разбиении строки на span; – Как можно компенсировать этот сдвиг, не отключая кернинг полностью. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Но перед этим хотим сказать, что для нас самое важное — это вы! Все, кто читает наши каналы и рассылки, кто пришёл на митап, слушал, шутил и задавал вопросы. Для нас это очень много значит. И, конечно, отдельное спасибо ВКПБ — студиям Deza и Lovemedo, которые всё это организовали. Кстати, на митапе волшебным образом у нас случилась 105% явка. Вот такая шрифтовая магия получается •ᴗ• А теперь сами материалы! Пойдём в порядке лекций: 🐶 Лично от Дениса Васильева: 🌞Большая коллекция бесплатных шрифтов 🌞«Что делать, если нет бюджета на шрифты»  🌞Статья о том, как бесплатно попробовать шрифты 🌞Большая статья о шрифтовых лицензиях 🐶 Красота от Томы Стрельцовой: 🌞О двух техниках древнерусской каллиграфии 🌞Декоративный шрифт Red Klin 🌞Шрифт на основе кириллических букв Сергея Чехонина Список книг, который Тома обещала: 🌞Книга про буквы от Аа до Яя, Юрий Гордон 🌞Designing type, Karen Chang 🌞Основа стиля в типографике, Роберт Брингхерст 🌞Живая типографика, Александра Королькова 🌞The stroke theory of writing, Gerrit Noordzij 🌞Про леттеринг, Джессика Хиш 🌞Искусство каллиграфии, Дэвид Харрис 🌞The origin of the serif, Edward Katich 🐶 Шрифтовая магия от Саши Корольковой: Для начала красивая мысль, с которой Саша начала свою лекцию. Любая достаточно развитая технология неотличима от магии — Артур Кларк 🐶 Глава 1: Нестандартная вариативность 🌞«Тёмная сторона шрифта» — суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🌞Вариативные гротески: Pragmatica Next Circe Contrast 🐶 Глава 2: Оптические размеры Шрифт наполовину состоит из оптических иллюзий 🌞Шрифты с оптическими размерами: Bodoni PT Simon Kudry (с бесплатным начертанием Kudry Weird Headline Stapel Stem PT Sans (бесплатный) PT Serif (бесплатный) 🌞Волшебные слова: Caption — до 12 пт Text — 12-18 Subhead — 18-48 Headline — 48-72 Display — 60+ Poster — 96+ 🐶 Глава 3: Шрифт переодевается 🌞Деликатный геометрический гротеск с большим набором стилистических сетов: Hint Включить сет Grotesque Round в CSS: font-feature-settings: "ss03"; 🌞Статья о Хинте и его стилистических сетах 🐶 Глава 4: внимание к деталям 🌞Шрифт с пропорциональными и моноширинными маюскульными и минускульными цифрами: Bodoni PT Как включить поднятие регистрозависимой пунктуации на all caps в CSS: font-feature-settings: "case"; 🌞Статья о том, как включать стилистические сеты в Фигме и CSS 🐶 Глава 5: странные вещи, которые может шрифт 🌞Шрифт Mojito, который может имитировать почерк и содержит ~1400 знаков 🌞#player">Первая в мире видеоигра в шрифте 🐶 Глава 6: Микротипограф — «что-нибудь полезное» 🌞Микротипограф в шрифте — что это такое и как он работает 🌞Плагин-типограф для Фигмы 🌞Типограф студии Лебедева 🐶 Глава 7: шрифт и нейросети 🌞В шрифт встроили нейросеть 🐶 И на всякий эсэмэмщица напоминает: 🌞«Как разобраться в кириллице» — статья 🌞«Как разобраться в кириллице» — бесплатный курс 🌞Используйте ТЕСТОВЫЕ ВЕРСИИ Главный хайлайт встречи — Саша разрешила произносить Circe как Цирце 👀 Пересматривайте, перечитывайте, пробуйте. А мы всегда на связи: тут в канале или по почте fonts@paratype.com P.S. В комментариях ещё опубликуем несколько фотографий с митапа

Types: Mobile App, Startup, Styles: Animation, Dark Fonts: Inter, Aeonik Pro

В рамках услуги «Исследование шрифтовой системы» мы проводим глубокий анализ шрифтов клиента с учётом позиционирования и ценностей бренда, целевой аудитории, рынка и конкурентов. Зачем такие исследования нужны брендам и как они помогают им развиваться? Что в них входит и как интерпретируются результаты? В статье отвечаем на эти и другие вопросы, а также показываем, как это работает на практике! #ТТ_блог #TypeType

Типографическая сетка Install ️ Figma Дизайн

В новой статье рассказываем, как работает отдел лицензионного контроля TypeType. Вы узнаете, как шрифтовые студии и дизайнеры могут остановить нелицензионное использование своих продуктов, при этом получая дополнительную прибыль и не рискуя своей репутацией. #TypeType #ТТ_блог

Фронтенд-разработчик с опытом более 19 лет. Специализируется на Angular, TypeScript и JavaScript, создавая современные веб-приложения с упором на производительность и пользовательский опыт. #портфолио #иллюстрация #минимализм #ретро Посмотреть сайт 👨‍💻

Я всегда обожала писать тексты от руки, для меня это своего рода медитация, причем неважно, какие именно слова. Вся прелесть в том, как одна и та же буква может выглядеть сотней разных способов и восприниматься каждый раз иначе. Но любовь к шрифтам у меня появилась именно когда я пришла работать в ТуреТуре — я разглядывала начертания, всматривалась в детали антикв и гротесков, восхищаясь работой наших шрифтовых дизайнеров и инженеров. Так что иметь дело с такой красотой само по себе для меня удовольствие. Следите за новостями, подписывайтесь на нашу рассылку и до скорого! #TypeType #команда_ТТ

Types: Portfolio, Personal Styles: Dark, Large Type Fonts: Inter, Dahlia

С такой лиричной подводкой мы пришли, чтобы рассказать вам о курсе по моушн-дизайну, в котором искренне любят шрифты и уделяют достаточно времени кинетической типографике. Сам курс — Motion Type на площадке школы «Вольница». А мы теперь его партнёры. Студенты будут практиковаться на наших шрифтах, а мы — показывать лучшие ин-юзы в канале. Кстати, работы с первых модулей курса можно посмотреть на сайте Рефлекторий: https://motionhype.ru/ Автор курса — Кирилл Пестовский, моушн-дизайнер, графический дизайнер, арт-директор и наш друг. Именно Кирилл сделал для Paratype красивый ролик о Circe Contrast. Кто захотел попробовать себя в моушн или задать вопрос Кириллу — в субботу пройдёт стрим. Вот ссылка: https://t.me/volnitsa_news/9207 А мы уже пересматриваем контент-план, чтобы было место для новых красивых видео, ждите ⚡️

ТТ Рационалист (TT Rationalist) — функциональный и оригинальный брусковый шрифт с актуальным рисунком. Создавая его, мы стремились избежать чрезмерного историзма, который прослеживается во многих брусковых шрифтах. В этой версии мы переосмыслили и сбалансировали рисунок: изменили пропорции и контраст, сделав набор более мягким и равномерным — так шрифт стал более текстовым. Во всех начертаниях появились изогнутые ножки вместо засечек у ряда знаков, а формы настоящих италиков стали более округлыми и каллиграфичными. Это придало шрифту выразительности и изысканности. Также мы увеличили количество OpenType опций, дополнили латиницу и кириллицу, добавили новые стилистические наборы и языки. В обновлённую гарнитуру входит: 🟣 22 начертания: 10 прямых, 10 италиков и 2 вариативных; 🟣 1127 знаков в каждом начертании; 🟣 31 OpenType опция; 🟣 235+ языков. В честь обновления шрифта дарим вам скидку 30% до 17 апреля 2026 года! #новый_шрифт_ТТ #TypeType

В прошлом месяце вышел подкаст об истории длинного тире, Velvetyne открыли предзаказ на книгу об истории студии, Джессика Уолш выпустила свою первую колонку для Creative Boom, а Dual Type нарисовали шрифт, который помогает понять, какие именно движения кисти сформировали римский маюскул. Остальные февральские новости типографики — в нашем журнале!

type.today/ru/journal/quotes

Type.Today выпустили руководство по правильному использованию знаков различных валют в типографике. Оно содержит как общие советы, так и рекомендации по знакам отдельных валют: рублей, долларов, рупий, евро, биткойна и других. Примеры советов из справочника: • Символы валют должны сочетаться с маюскульными цифрами, чтобы выглядеть в наборе гармонично. В некоторых случаях используются табличные и минускульные версии • В шрифте, в котором есть табличные цифры, должны быть и табличные знаки валют • В английском языке знак доллара ставится перед числом ($100) • Знак евро (€) может быть указан и до, и после числа в зависимости от языка • Для евро, фунтов и других валют рекомендуется использовать узкий неразрывный пробел (100 €), чтобы знак и сумма не разрывались на разные строки • В японском языке знак иены (¥) не требует пробела перед числом, тогда как в некоторых европейских странах пробел обязателен • Знак биткойна (₿) — единственный знак криптовалюты, внесённый в «Юникод». Он пишется после числа и отделяется от него неразрывным пробелом #статья

#TypeType #вдохновение_ТТ

И заодно—всем HOI: https://underware.nl/case-studies/hoi/

Автор @bounce_two #typography #animation #typefeed @typefeed — подпишись, тут про шрифты.

На первом и втором местах оказались бессменные лидеры студии — функциональные гротески TT Commons™ Pro и TT Norms® Pro, в которые мы недавно добавили поддержку арабского языка. Также в звёздный список попали новый TT Turns, сочетающий в себе выразительность и универсальность, и обновлённый TT Bluescreens Pro с большим диапазоном ширин. Спасибо всем, кто выбирает наши шрифты! Нам очень радостно видеть, как они живут и раскрываются в ваших проектах ❤️ #TypeType

🌠Что для тебя сегодня значит быть креативным директором? Быть креативным директором для меня — значит быть режиссёром дизайн-процессов: смотреть на проект со стороны, проверять целостность решений и соответствие задачам бизнеса, выстраивать систему, где идеи команды расцветают, а сама команда растет и развивается. 🌠Поговорим о фрилансе и работе в агентстве. Есть ли вещи, которые фриланс даёт лучше, чем агентство — и наоборот? Что ты считаешь незаменимым в каждом формате? Для меня очень ценно работать в команде, чувствовать себя частью чего-то большего. В этом случае всегда чувствуешь плечо. Уровень задач, которые ты можешь сделать командой гораздо масштабнее, чем когда работаешь один; И всегда есть что-то чему можно поучиться у других или наоборот чем ты сам можешь поделиться, есть обмен опытом. На фрилансе плюс — ты можешь более гибко управлять своим временем, не привязан к графику работы. И сам отвечаешь за то сколько в итоге месяца у тебя денег на счету. 🌠 Реален ли work–life balance на позиции креативного директора? Как он выглядит у тебя на практике? На этой позиции легко выйти из берегов, ведь весь поток задач проходит через тебя. Поэтому важно уметь делегировать и не пытаться закрывать самому то, что плохо лежит. Когда доверяешь команде и правильно распределяешь ответственность, появляется баланс. Руководителю важно быть в ресурсе, чтобы поддерживать команду. 🌠Что тебя сейчас вдохновляет в дизайне — не конкретные работы, а направления, студии, может новые витки, которые ты сейчас можешь наблюдать) Меня очень вдохновляет исследовать то что можно сделать с помощью нейросетей. Я люблю придумывать копирайт, штормить идеи концепций, делать видео, экспериментировать с иллюстративными стилями в нейросетях. Меня вдохновляет, что они постоянно улучшаются и там есть еще много что покопать. Еще я вижу, что дизайн движется в сторону усложнения, люди устали от минимализма. Хочется экспериментов с большей выразительностью в типографике, графике и иллюстрациях. 🌠Насколько путешествия влияют на твой креативный процесс? Это перезагрузка, сбор визуального материала или способ думать иначе? В первую очередь в путешествиях я черпаю энергию! Это мое вдохновение, выход за рамки. Однозначно, там я также пополняю свою внутреннюю библиотеку визуальных референсов. 🌠Есть ли город или место, которое особенно сильно повлияло на твоё ощущение дизайна? Что именно ты оттуда «унесла»? Особенно интересно было в Японии. У них в культуре очень важно думать про комфорт других. Мне кажется полезно в дизайне также подходить к любой задаче. И еще там совсем не стесняются серьезные темы иллюстрировать смешными милыми иллюстрациями, например постер о том что ты можешь вызвать полицию выглядит как мультяшка. Круто было бы эту смелость выбора графики перенять и нам. 🌠 Дизайн — это талант или мышца, которую можно тренировать? Если второе — как именно ты это делаешь? Однозначно, насмотренность и дизайн-скиллы можно(и нужно) тренировать. Но если у тебя от рождения есть вкус и ты растешь в среде с сильной визуальной культурой, это даст тебе преимущество. Я тренирую свою дизайн-мышцу постоянным решением дизайн-челенджей на работе, отслеживанием актуальных обновлений в мире дизайна и открытостью новым подходам и инструментам. 🌠 Какие практики ты бы посоветовала дизайнерам, чтобы поддерживать креативную форму? Не вдохновляющие цитаты, а конкретные действия) Полезно иметь сайд-проект с экспериментами в дизайне. Это может быть что угодно, что вас зажигает и дает поле для творчества. Может быть это 365 дней постеров или участие в активностях типа 36 Days of Type / эксперименты с нейросетями. Это вносит драйв и игру. Также здорово можно челенджить себя и на рабочих проектах, стараться каждый новый проект что-то новое применить, докопаться до самых прорывных идей и решений. Так каждый раз вы будете расти. в LINII открыта вакансия синьор-дизайнера. ищут человека, который умеет рисовать и мыслить образами. если откликается — вакансия ❤️