🙂 Helsa Display в движении

Нежный и дерзкий эльзевир… Это всё о Хельзе Ника Недашковского — стройной и эксцентричной антикве для заголовков и коротких текстов. В Хельзе есть ноги-шпоры «R», шипастая «К», политонический греческий, тире и двоеточие, выравнивающиеся по центру прописных, есть цифры на все случаи жизни и математические символы в индексах. Что ещё спрятано внутри этой антиквы, а также истории о шрифтовых пасхалках — в статье Ника «Helsa Display — история, картинки и разговоры». Рисунок букв Хельзы основан на голландских образцах, а в деталях есть отсылки и к американским шрифтовым каталогам, и к литерам из словолитен Вольфа и Гербека. И теперь вся эта красота ожила благодаря курсу Кирилла Пестовского Motion Type на площадке школы «Вольница». Мы обещали, что буквы будут танцевать. И это случилось. Автор анимации Хельзы: @daryatokk Если понадобится промокод на Хельзу, играйте в игру от наших партнеров — SPELLLENS, где нужно собирать три в ряд, только с диджитал-брендами 🐶

Export PNG with Color Profile

Плагин экспортирует графику в PNG с учетом цветового профиля монитора Display P3. Install

🔤 Типографика в дизайн системе ломается не на выборе шрифта, а на токенах

Пока у команды нет общей структуры, каждый экран собирается заново: где-то основной текст 14 px, где-то 16 px, где-то межстрочный интервал выставлен руками, где-то тот же жирный стиль выглядит иначе. В макетах это еще терпимо, а в разработке быстро превращается в хаос. Олуватосин Обалана показывает практичный подход, как собрать типографику через примитивные и семантические токены и масштабировать ее на веб, планшет и мобильный в Фигме. Ценность статьи в том, что это не просто теория про читаемость, а пошаговая схема: как назвать токены, как разложить роли текста, как связать стили с переменными и переключать режимы без дублей. Внутри: – Какие принципы держат типографику в порядке: удобство, ясность, иерархия; – Какие базовые требования по доступности стоит заложить сразу: размер текста, контраст, межстрочный интервал, масштабирование; – Что такое примитивные токены и какие свойства туда выносить: семейство, вес, размер, межстрочный и межбуквенный интервалы; – Зачем нужны семантические токены и почему они снимают ручные правки по всему продукту; – Как назвать токены по иерархии, чтобы дизайнеры и разработчики говорили на одном языке; – Как разложить роли текста: Display, Heading, Subheading, Body, Caption, Label; – Как считать межстрочный интервал через коэффициенты для крупных и мелких размеров; – Как настроить в Фигме режимы для разных экранов и не плодить отдельные стили под каждый размер. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🐶 Как обещали, собрали самые важные ссылки со шрифтового митапа Paratype и ВКПБ, делимся!

Но перед этим хотим сказать, что для нас самое важное — это вы! Все, кто читает наши каналы и рассылки, кто пришёл на митап, слушал, шутил и задавал вопросы. Для нас это очень много значит. И, конечно, отдельное спасибо ВКПБ — студиям 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. В комментариях ещё опубликуем несколько фотографий с митапа
📝 Как правильно работать с кеглем и интерлиньяжем?
Привет! На связи Маргарита куратор и дизайнер студии UPROCK 👋🏼 Ранее вы видели разбор по типографике в мобильных интерфейсах, а сегодня предлагаю пойти глубже и посмотреть на типографику в вебе. ⚡️В этом видео я разбираю один из самых тонких и недооцененных этапов в дизайне сайтов: работу с кеглем, интерлиньяжем и трекингом. Очень часто на этапе детализации макетов у дизайнеров возникает ступор: вроде шрифт хороший, сетка есть, отступы расставлены, а страница все равно не читается. Пользователю сложно понять, за что зацепиться взглядом и с чего начать. 📌 А ведь типографика – это основа любого веб-проекта. Заголовки, тексты, кнопки, формы, подписи – все это работает как единая система. Даже без цвета, графики и декора можно собрать сильную страницу, если типографика настроена правильно. 🎥 В видео на примерах студенческих работ я показываю: • как кегль формирует визуальную иерархию и помогает выделять главное; • почему без проработки размеров текста даже аккуратный макет становится хаотичным; • как контраст кеглей может стать фишкой проекта; • почему интерлиниаж нельзя оставлять «auto» и как он влияет на группировку смысла; • как трекинг делает шрифт либо стильным и собранным, либо уставшим и разряженным; • на что особенно важно обращать внимание при работе с популярными шрифтами вроде Inter или Playfair Display. А также делюсь подборкой проектов наших студентов и выпускников для вашего вдохновения: ⚡️Михаил Зубец – Anya Hindmarch ⚡️Александр Тимошин – MAIDEN HOME ⚡️Анастасия Зайцева – OpenAI ⚡️Виктория Ким – Tadao Ando ⚡️Юлия Беляева – BLUE ORIGIN
Любимые акцидентные шрифты
Как работать и подбирать? С акцидентными шрифтами все действительно очень непросто. Если шрифт уж с очень ярким характером, то быстро приедается и его все уже знают. Или с ним очень сложно работать (нужно набирать очень крупно, так как он не выдерживает масштабирования, или больше двух строк становятся плохо читаемыми). Что же делать? Я больше люблю подбирать шрифты с выразительным рисунком, которые могут работать как акцидентные, но на самом деле ими не являются. Так же здорово, если они содержат дисплейные начертания (начертания для крупного кегля, например Baskerville Display или Simon). Я думаю, что дизайн с такими шрифтами «живет» дольше, не становится сиюминутным из-за присутствия очень модного акцента. Например, из антикв Bodoni PT, Kis или Newton Italic отлично работают как акцидентные в крупном кегле, так как рисунок знаков этих шрифтов близок к идеальному. И именно из акциденции мне нравятся Kudry, Helsa, CoFo Raffine, CoFo Glassier, Rene, Nagel, Antonym (хотя он и не акцидентный, но может прекрасно работать в крупном кегле как акцидентный)). #типографика #шрифты
Изображение поста
Не верится, но мы наконец-то можем поделиться проектом Muse Display—шрифтом, а если точнее—целой шрифтовой системой, разработанной вместе с COLLINS.
КОМАНДА CONTRAST FOUNDRY Мария Дореули Егор Головырин Лиза Рассказова ​​​​​​​Мастеринг: Тася Петелина Моушн: Анна Волкова COLLINS Rebeka Arce Indgila Samad Ali Nicole Cousins Beth Johnson Mariah Bush Cas Malo Madeleine Carrucan Tomas Markevicius John Choi Taylor Zahrt Nick Ace Taamrat Amaize Michael Di Leo Gianluca Alla Alex Athanasiou MUSE GROUP Yury Vetrov Vitaly Rynsky Valentin Ladyagin Lena Kireeva Jack Sutton Sophie Browness Muse Group Product & Creative Teams Photography & Videography Jared Ryder Styling Liz Borger Music & Sound Design Rohan Rege
Sammy Вдохновляющий веб-сайт мобильного приложения для бизнеса и финансов, использующий roobert в качестве основного шрифта.
Types: Business & Finance, Mobile App, Startup Styles: Scrolling Animation, Parallax Fonts: Roobert, Clash Display.
Шрифт Despair Display
💾 Скачать и использовать https://disk.yandex.ru/d/mwtt_F8aBm11rA 🔎 Посмотреть описание https://www.behance.net/gallery/139881075/Despair-Display-free-font #font #free #latin #cyrillics
Изображение поста
Excratch Futuristic Display Font
💾 Скачать и использовать https://disk.yandex.ru/d/v2sT01PH-82kQA 🔎 Посмотреть описание https://www.behance.net/gallery/110424305/Excratch-Futuristic-Display-Font #font #latin
Изображение поста
Consta news
🔹NEW Pixso Мы опубликовали несколько библиотек дизайн-системы Consta в Pixso (Beta): На цветовых переменных: – Consta UI-Kit – Consta Table – Consta Graphics На старых цветовых стилях: – Consta Charts – Consta Drill Elements Для обратной совместимости: – Consta Default, Dark, Display Colors – Consta Default Typography – Consta Spaces ⚠️ Почему Beta? Некоторые компоненты могут работать с ошибками. Мы уже знаем о части из них, а про другие можем узнать только от вас :) Будем благодарны за обратную связь. В ближайшие недели постараемся довести библиотеки до максимального сходства с Figma. Ссылка на библиотеки в Pixso Что дальше: Готовим публикацию оставшихся библиотек и параллельно переезжаем на Variables (шрифты, отступы). Еще кое-что для Pixso: Мы сделали плагин Consta Props Styler — он строит таблицу свойств для компонент-сета в один клик (по аналогии с Propstar в Figma). Забрать можно здесь. 🔹NEW Figma – Перевели Consta UI-Kit на цветовые переменные. Теперь в библиотеке нет отдельных версий под каждую тему — переключение делается прямо в настройке Appearance → Variable Mode. – Навигация в менеджере ассетов стала проще. Что дальше: Переезд шрифтов и отступов на Variables. Обновление UI-Kit выйдет в ближайшие пару недель, затем подтянем и остальные библиотеки. 🔹Компоненты в UI-Kit – NEW Banner — статусная плашка с кнопками для закрепленных сообщений. – NEW File Icon — новая иконка формата файла: много предзаготовок + возможность собрать свою. – Tag — иконка теперь настраивается через Boolean-свойство, поправили размеры для S и XS. – Badge — выбор иконки вынесен в список свойств. – Groups — компоненты, у которых есть Group-версия, сделали отдельными от групп, как на портале: – AvatarGroup (добавили настройку View для всей группы разом) – SwitchGroup – BadgeGroup – CheckboxGroup – CollapseGroup 🔹Еще кое-что для Figma Сделали плагин Consta Style Replacer. Он помогает заменить цветовые стили на переменные по совпадению имен. Если библиотека опубликована в вашей команде — заведите у себя переменные и замените стили за пару кликов. В следующей версии добавим возможность работы с переменными из удаленных библиотек. Смотреть в Figma community Стэй тунед!
Подборка лучших постов за июль!
Собрали для вас 5 лучших постов, которые собрали наибольшее количество пересылок: Просто тыкайте на название и вас перекинет на сам посm. — Martina scriptC #cyrillic #latin #handwritingCONSTANTINE #cyrillic #latin #serifYeast #cyrillic #latin #displayGrotesk #cyrillic #latin #sansserifVasek #cyrillic #latin #handwriting 🧡 Сохраняй, чтобы не потерять! ❤️ Шрифтовик ← бесплатная кириллица
Изображение поста
Шрифт Gella Display
Gella Display — новое семейство шрифтов без засечек с высоким внутренним контрастом. Он имеет 10 весов и 4 ширины, всего 40 стилей. Это семейство шрифтов подходит для набора больших объемов текста, а также для заголовков, логотипов, плакатов, обложек, эффектных презентаций и многого другого. Gella Display отлично подойдет для брендинга, веб-сайтов и других задач. Начертание Expanded Medium подходит как для личного, так и для коммерческого использования. Скачать #free #latin #cyrillic Источник 🔠 Fonts
Изображение поста
Cursechaos Font - Horror Display Typeface
Non-Commercial Download #HandWrten
Изображение поста
Avalar - Elegant Display
Free for personal use. #Serif ⬇️Download: https://t.me/ZIP_Files/843
Изображение поста
Datons
by Viaction Type Free for personal use. 📁 Download: t.me/ZIP_Files/556 #Display #Latin
Изображение поста
MASH
by Leonhard Katschner Free for personal and commercial use. 📁 Download: t.me/ZIP_Files/554 #Display #Latin
Изображение поста