Desique · заметка

Шрифт со «скоростью», margin-trim в Chrome и упаковка, которая продаёт

Светло-синяя обложка дайджеста: шрифт со скоростью, CSS и упаковка
Светло-синяя обложка дайджеста: шрифт со скоростью, CSS и упаковка

Chrome 155 и Safari 27 убирают ещё пару CSS-костылей, Formula E получила шрифт, у которого вместо жирности — скорость, а две свежие упаковки показывают, почему цвет и характер на полке работают лучше «приличного» минимализма. Плюс новая универсальная обложка в Tilda.

Chrome 155 выходит в стабильную ветку 6 октября (теперь Chrome выпускает версию раз в две недели), и в нём несколько мелочей, которые реально чистят CSS студийных сайтов. margin-trim убирает внешние отступы у первого и последнего элемента внутри контейнера — меньше правил вида :first-child { margin-top: 0 } в карточках и статьях (работает для обычных блочных и multicol-контейнеров, не для flex и grid). text-decoration-skip-spaces не тянет подчёркивание под пробелами — продолжение темы аккуратных ссылок из прошлого выпуска. Шортхенд corner задаёт border-radius и corner-shape одной строкой, если вы уже пробуете squircle-карточки. И главное для портфолио: Chrome научился декодировать JPEG XL — прогрессивная загрузка, широкий цветовой охват и HDR для тяжёлых кейсов, но fallback на AVIF/WebP через <picture> пока оставляем. Полный список — в Chrome for Developers.

Обложка Chrome 155 Beta
Chrome 155 · Фото: Chrome for Developers

С другой стороны, Safari 27 (вышел 17 сентября) получил customizable select: через appearance: base-select нативный <select> можно стилизовать полностью под фирменный стиль — без JS-библиотек и самописных дропдаунов, при этом клавиатура, скринридеры, валидация и отправка формы работают как у настоящего контрола. Для форм заявки, фильтров каталога и выбора филиала это значит, что «некрасивый системный селект» больше не повод тащить лишний скрипт. Там же scroll anchoring — контент не прыгает, когда сверху догружается баннер или картинка. Разбор — в блоге WebKit.

Стилизованный select в Safari 27
Нативный select до и после appearance: base-select · Фото: WebKit

Mox пересобрали айдентику Formula E под новую эру Gen4, и самое интересное в ней — шрифт. Кастомная гарнитура на основе AP Gavel (сделана вместе с All Purpose Studio) вместо привычной оси жирности имеет «скорость»: от статичного начертания до наклонного «турбо-режима». Рядом — Micro Mono для таймингов и технических данных, Inter для длинного текста, знак под углом 30° и палитра Surge Purple с Signal Orange и Electric Lime. Урок для брендов доставки, спорта или авто: вариативный шрифт может нести идею бренда, а не только толщину, а роли лучше разделять — один экспрессивный голос и спокойный рабочий шрифт под ним. Подробнее — на It's Nice That.

Айдентика Formula E от Mox
Графика гонки с кастомным шрифтом Formula E · Фото: Mox / It’s Nice That

Две свежие упаковки про одно и то же. Thirst перевели корнуолльскую пивоварню Harbour из сдержанной эстетики в «солнечную площадку»: жёлтый, небесно-голубой и тёмно-синий, волновая графика, знак H по мотивам портовых конструкций и навигации, иллюстрации Con McHugh. Пивоварня сообщает о росте продаж на 45% год к году — Design Week. А Derek&Eric запустили оливковое масло DRZZL в мягкой бутылке с дозатором вместо тёмного стекла, с неоновым леттерингом от Studio Drama на тёмно-зелёном, оранжевом и жёлтом — в категории, где все в приглушённой зелени и золоте. Агентство прямо говорит, что контрастная графика, рассчитанная на экран телефона, вытесняет «наследие». Для локальных брендов, которые продают через Kaspi и Instagram, это хороший аргумент: упаковка должна читаться в превью карточки, а не только на полке. Кейс — на Design Week.

Новая упаковка Harbour Brewing
Банки Harbour в новой «солнечной» айдентике · Фото: Thirst / Design Week

И короткое из Tilda: появился блок CR60 «Универсальная обложка» — он объединяет настройки существующих блоков категории «Обложка» и даёт больше вариантов кастомизации. Для сайтов, которые после сдачи редактирует сам клиент, это шанс собрать первый экран на стандартном блоке, не уходя в Zero Block. Анонс — в канале Tilda.

Блок CR60 в Tilda
Блок CR60 «Универсальная обложка» с карточками · Фото: Tilda