Никита Прокопов написал статью про проблему размера шрифта, заданного с помощью пунктов, — "Font size is useless; let’s fix it".

Во многих редакторах размер шрифта по умолчанию задаётся в пунктах. Пункт — это метрика из традиционной типографики, составляющая 1/72 дюйма. Проблема в том, что на разных мониторах, один и тот же шрифт, заданный с помощью этой величины, выглядит по-разному. Поэтому для настройки текста в редакторах Никита предлагает использовать метрику, определяющую высоту заглавной буквы.

В вебе пункт подходит только для форматирования текста для печати, в остальных случаях его не рекомендуют использовать.

Хорошая статья. Рекомендую почитать всем, кому интересна тема типографики.

#typography

https://tonsky.me/blog/font-size/
https://habr.com/ru/company/vdsina/blog/550046/ (на русском языке)

Игорь Штанг (уже давно) написал о висячей пунктуации из 120-го параграфа Ководства.

— Оптическое выравнивание — когда вы слегка свешиваете дефисы, запятые, точки и прочую мелочь, чтобы граница текста казалась ровной;
— Вынос на поле — когда вы ставите буллиты или цифры на поле, чтобы обозначить особые части текста. С вынесенными буллитами сразу понятно, что перед нами список;
— Висячая пунктуация — вынос за линию набора налево кавычек, скобок, буллитов — ни то, ни другое. Для оптического выравнивания знаки слишком тяжёлые, а для выноса — указывают на случайные, а не особые части текста;
— Сама студия давно отказалась от висячей пунктуации в своих книгах и новой версии сайта. Странно, что параграф 120 ещё не исчез из «Ководства».

Канал Игоря. #typography

Илья Кретов написал об интерфейсном тексте и типографике. Некоторые советы:

— Сокращайте использование кавычек. Например, названия разделов можно писать с заглавной буквы или выделять полужирным начертанием: «Ищите треки в разделе Коллекция»;
— Разделяйте узким пробелом разряды числа, сумму и знак рубля, числа и среднее тире в диапазоне;
— Чтобы написать −25%, используйте знак минусы (а не дефис) и не отделяйте его от числа пробелом;
— Написанный только заглавными буквами текст слишком эмоционален, кричит. Лучше использовать его максимум в кнопках или бейджах;
— Связывайте текст кнопки с заголовком: «Подключить услугу? [Подключить]». Если любите Conversational Design, когда вместо «Подключить» пишут «Да, хочу!», убедитесь, чтобы кнопка была рядом с заголовком, иначе смысл может потеряться;
— Пишите эмоционально нейтрально: «Вы не можете продолжить без регистрации» → «Для продолжения необходимо авторизоваться»;
— Учитывайте адаптивность. Самая важная информация должна вмещаться на самые маленькие экраны;
— Текст на экране должен быть понятен без контекста. Лучше строить его на именительном падеже: «Какого настроения соберём плейлист? [Весёлого] [Грустного]» → «Под какое настроение соберём плейлист? [Весёлое] [Грустное]».

Канал Ильи. Копия статьи на VC. #writing #typography

Роб МакКоган написал о влиянии типографики на восприятие и поведение.

— Более контрастный цвет повышает разборчивость текста и делает его более убедительным;
— Более сложный для восприятия шрифт (Brush Script против Arial) усложняет чтение и стимулирует критичное отношение к написанному, что помогает заметить подвох. Если таким набрано задание, оценка времени его выполнения будет больше (в эксперименте — почти в 2 раза);
— Есть ассоциативная связь между словами и формой. Слово «Кики» — угловатая форма, «Буба» — обтекаемая. Используя подходящую или неподходящую форму, можно создать гармонию или конфликт;
— Когда шрифт соответствует смыслу, такой текст читают быстрее. Например, Truck и шрифт Impact, Flower и шрифт Snell Roundhand;
— Если типографика оптимизирована, человек меньше устаёт и лучше потом решает задачи на сообразительность;
— При рецензировании научных материалов положительные оценки чаще получали статьи с иллюстрациями, подготовленными графическими дизайнерами (а не учёными).

In English. #typography

София Гнеденко написала о заглавных буквах в заголовках на английском.

— В Title case каждое слово кроме артиклей и предлогов пишется с заглавной буквы. В Sentence case — только первое;
— Плюсы Title case: выглядит симметричнее (что улучшает восприятие), формальнее и серьёзнее (его используют в The New York Times), текст становится заметнее (на 20%);
— Плюсы Sentence case: легче читать, особенно длинные заголовки (на 18%), проще использовать, выглядит дружелюбнее и менее формально, легче выделить имена собственные вроде «Входящие» или «Календарь»;
— Какой бы стиль вы ни выбрали, согласованность в оформлении заголовков повышает доверие к бренду на 20% (исследование Нильсен Норман Груп);
— Sentence case выбрали в Гугле и рекомендуют в Майкрософте;
— Мнение из комментариев: Title case — чисто американская штука, в UK считается дурным тоном и признаком желтизны.

#typography #localization

Денис Зеленых написал о кавычках и тире.

— В русской типографике используют «кавычки-ёлочки» для выделения прямой речи, терминов, условных обозначений, названий произведений. „Кавычки-лапки“ — для выделения внутри кавычек-ёлочек;
— В английской — “quotation marks”. ‘Одиночные кавычки’ — для цитат внутри цитат или выделения специфических терминов;
— Общепринятые названия можно писать без кавычек (Volkswagen);
— В британском английском, наоборот, одинарные кавычки — основные, внутри них используются двойные;
— В русской типографике дефис разделяет части слов и телефонных номеров;
— Длинное тире используют в диалогах, вместо пропущенных слов, для обозначения прямой речи и пауз, между подлежащим и сказуемым, для указания маршрутов (поезд Москва — Санкт-Петербург). Обычно его отделяют пробелами с двух сторон;
— Среднее тире применяют для обозначения интервалов и пробелами не отделяют;
— В американской типографике длинное тире не принято отбивать пробелами;
— Цифровое тире (figure dash) используют как разделитель в выражениях из одних чисел, например, как разделители в телефонных номерах;
— Минус используют в математических выражениях (отбивается пробелами) и для обозначения отрицательных чисел (не отбивается).

#typography

Игорь Штанг написал, почему разряжают слова, набранные прописными буквами.

— В металлическом наборе площадки букв могут максимально прижаться друг в другу, из-за чего буквы просто невозможно поставить ближе. Из-за этого пробел между Р и Д в слове СЕРДЦА может оказаться слишком большим;
— В цифровом наборе такого ограничения нет;
— Проблему с Р и Д можно решить настройкой межбуквенного пробела (этот процесс называется кернингом). Но в случае с Ц и А этому мешает форма букв;
— Из-за таких пар прописной набор принято разряжать, чтобы скрыть неравномерности в межбуквенных пробелах;
— Не всем шрифтам это подходит. Насыщенные и узкие шрифты с небольшими внутрибуквенными просветами выглядят лучше в плотном наборе (с небольшими межбуквенными пробелами).

Копия в Медиуме. #typography

Подборка лучших шрифтов Google с образцами и настроением.

• Подборка отобранных шрифтов Google
• Каждый шрифт с детальным типографическим образцом
• Подходит для сайтов, приложений, презентаций и бренд-дизайна
• Помогает быстро подобрать нужное настроение через текст

#fonts #typography #google

Открыть в Figma

👨 Дизайн-телега