Обновить
5.4

Типографика *

Играем с шрифтами

Сначала показывать
Порог рейтинга
Уровень сложности

Инфостиль умер от засухи. Похоронили без воды

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели950

Раньше все тексты были на одно лицо:

«Платформа подходит как для новичков, так и для опытных трейдеров»

«Чтобы повысить узнаваемость бренда, необходимо публиковать контент регулярно»

«Деньги поступят на счёт в течение 24 часов»

Инфостиль. Красота. Лаконичность. Сухость, как будто ассистент стоматолога очень хорошо поработал слюноотсосом.

Читать далее

Почему одни шрифты читаются быстрее других и почему Comic Sans ненавидят

Время на прочтение9 мин
Охват и читатели27K

Вы когда-нибудь замечали, что одни тексты «проглатываете» за минуты, а другие читаете словно через силу или просто кидаете в закладки и забываете, даже если тема интересна? Дело не только в содержании — иногда главную роль играет шрифт. Одни буквы мозг расшифровывает мгновенно, а на других спотыкается и тормозит. Давайте разберемся, какие шрифты ускоряют усвоение информации, а какие годятся только для художественных заголовков — и как это используют в UX, издательском деле и digital-рекламе.

Спойлер: Comic Sans не просто так всех раздражает. Так что, если вы до сих пор тыкаете в Fonts Google наугад — готовьтесь к легаси-проблемам с юзабилити. Детали под катом.
Читать дальше →

Не хватает клавиш? (upd)

Уровень сложностиПростой
Время на прочтение23 мин
Охват и читатели13K

Сколько разных значений вы можете ввести нажатием одной клавиши? Так, на клавиатуре 33 клавиши в буквенном блоке, 13 в цифровом ряду, получается 46. А двумя нажатиями? Выходит 46×46, и ещё 46 – те же клавиши с Shift. Всего чуть больше двух тысяч, и это просто случайные сочетания букв, цифр и пунктуации.

Что если правильные ответы – сотни для одного нажатия, и десятки тысяч для двух? Это далеко не предел. И эти значения – не случайные пары символов, а кнопка "мой рабочий емейл" или "текущая дата", символы осо́бой пунктуации, специфичные языковые символы, кнопка для перевода с транслита, исправления регистра, запуска приложения, и даже "включить музыку через 20 минут" или "прогноз погоды". И для этого вам не нужно учить наизусть таблицу юникод или хитрые сочетания. Вы сами определяете, что и где будет находиться, никак не меняя базовую функциональность.

Нет, это не клавиатура с тысячью кнопок, и даже не прошиваемая механика. Самая обычная клавиатура, которая сейчас у вас под рукой. Как это возможно? Обо всём по порядку.

🕺💃

Улучшаем тексты в вебе при помощи text-wrap: pretty

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели1.7K

В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать.

Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению.

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

Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов.

Читать далее

hypetype — как легко печатать любые символы напрямую с клавиатуры. От тире и «кавычек» — до знака ₽ и даже эмодзи

Время на прочтение8 мин
Охват и читатели5K

Вы читаете приквел, к моему предыдущему лонгриду на VC «Как за 5 недель я написал свою программу вообще без опыта программирования». Говорят, зашло нормально. Но в лучших традициях жанра — читать можно в любом порядке.

В этом сюжете я отвечу на все «почему» от аудитории — почему программа нужна почти всем, почему считаю, что прямых аналогов нет и почему это не очередной «велосипед», который будет стоять в гараже истории. Расскажу про фишки, которые родились не ради фишек, а через призму боли длиною в 15 лет и почему Илья Бирман ни в чём не виноват.

Читать приквел

Плагины и лайфхаки для работы с текстом в Figma

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели9.6K

Текст — один из важнейших элементов дизайна и на работу с ним порой уходит много времени. От заполнения контентом до удаления висячих предлогов — всё это требует большого внимания и часто превращается в рутину.

К счастью, Figma позволяет ускорить процесс: плагины, встроенные функции и небольшие лайфхаки. В этой статье расскажу, как работать с текстом быстрее и проще, чтобы сэкономить время для более важных задач.

Прокачать текст в Figma

Как «токены» типографики использовались в дореволюционной России

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели1.1K

Сейчас большинство дизайн-систем используют условные наименования стилей шрифтов — display, headline, title, body или H1, H2, H3 и т.д.

Аналогичным образом словолитни и типографии дореволюционной России систематизировали свои шрифты, до появления дизайн-систем и интернета.

Читать далее

Тире минус дефис. Или размер имеет значение

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели17K

В одной из недавних статей на Хабре мы обсуждали использование кавычек в русскоязычных и английских текстах. В той статье я обещался пройтись по правилам использования дефисов и тире, собственно, выполняю обещание. Также из этой статьи вы узнаете о «самом дорогом дефисе в истории» и о том, как он связан с космическими полётами.

Читать далее

Строкам грустно в одиночестве. Мои простые правила оформления списков

Время на прочтение5 мин
Охват и читатели17K

Недавно я в очередной раз прочитал на Хабре, что списки — это один из признаков текста, созданного нейросетью. Значит меня можно считать «нейросетью» устаревшей модели, выпущенной ещё в 70-х годах XX века. Я начал составлять списки в детстве, почти сразу, как только научился писать.

Я очень люблю списки: они позволяют легко и в то же время наглядно структурировать информацию. По эффективности списки находятся где-то между обычным текстом, в котором объекты перечисляются в строке через запятую, и таблицей, которая по сути является двухмерным списком. Взгляд читателя легко скользит по номерам или маркерам списка. Можно быстро оценить количество строк, понять их последовательность и структуру, перейти к нужной строке.

В этой статье я хочу поделиться с вами своими правилами оформления списков.

Читать далее

Мои простые правила хорошего текста: личное руководство по стилю

Время на прочтение5 мин
Охват и читатели22K

Известно, что инструкция — это документ, который обычно читают в двух случаях: когда нечего читать или когда уже всё сломано. Сегодня я хочу рассказать вам про инструкцию, которую читают в третьем случае: когда нужно что-нибудь написать. Это — руководство по стилю.

Читать далее

5 простых правил типографики, которые сделают ваше письмо, статью и любой другой текст солиднее

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели12K

С одной стороны, содержание важнее формы, с другой — небрежное оформление как бы намекает: текст накидали на скорую руку. Чтобы внешний вид не обесценил самые убедительные аргументы, не стоит пренебрегать базовыми правилами типографики. В статье рассказываем о них так, чтобы было достаточно увидеть один раз и запомнить на всю жизнь.

Читать далее

Создаём личный шрифт

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели3.2K

Для иллюстраций, над которыми я работаю, часто необходим текст. Но я не хочу использовать готовые шрифты. При работе с иллюстрациями в браузере использование «веб‑безопасного» шрифта может привести к непредсказуемому результату, да и вообще использование внешних шрифтов порой сильно увеличивает размер файла с иллюстрацией.

Вместо использования готовых шрифтов я создала свой собственный, используя p5.js и JavaScript.

Читать далее

Эй, компьютер, создай-ка мне шрифт

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели4.8K

Это история о том, как я с нуля осваивал создание генеративных моделей МО, попутно обучая компьютер создавать шрифты. Да, настоящие типографские шрифты, состоящие из набора заглавных глифов. Созданная мной модель получает на входе описание шрифта и создаёт на выходе файл с их готовым набором. Назвал я свой проект FontoGen.

Выше вы видите несколько примеров шрифтов, сгенерированных моделью FontoGen.

Ну а дальше я подробно опишу всю историю.
Читать дальше →

Ближайшие события

Как я создал 175 шрифтов при помощи Rust

Уровень сложностиПростой
Время на прочтение19 мин
Охват и читатели13K

В декабре 2023 года я выпустил 175 Pixel Font Megapack, за которым вскоре последовали 42 отдельных пака для каждого из семейства шрифтов. Я создал собственный тулчейн для генерации, тестирования и развёртывания этих шрифтов... на Rust! В посте я расскажу об этом процессе.

Читать далее

Голографические принтеры

Время на прочтение4 мин
Охват и читатели2.1K

Существует очень интересный метод записи мультиплексных голограмм, состоящих из миниатюрных элементов, которые называют голопикселями. 

Голопиксели – это крохотные фурье–образы ракурсов синтезированной голограммы, полученные из кадров многоракурсной съемки трехмерной сцены. Метод основан на том же принципе, что и интегральная фотография Липпмана. Элементы оптического растра Липпмана заменяются миниатюрными голограммами диаметром 0,5 мм, имитирующими работу фотографического линзового растра.

Читать далее

Title case против Sentence case

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели1.8K

Применение заглавных букв может значительно влиять на восприятие текста, особенно в английском языке. Эта статья будет полезна разработчикам, работающим с продуктами на английском.

Читать далее

Пробуем Typst, альтернативу LaTeX

Уровень сложностиПростой
Время на прочтение20 мин
Охват и читатели33K

Вы могли слышать об Typst, современной альтернативе LaTeX, написанный на Rust, или не могли, ведь на Хабре я нашёл лишь несколько статей о нём. Некоторые до меня подчёркивали, что есть некоторые недостатки у первого по сравнению с последним.

Те статьи, что уже имеются на Хабре во время написания данной статьи, были, скорее, новостными, чем полноценными обзорами. Мы же попробуем рассмотреть Typst, начиная с установки и заканчивая возможностями и компиляцией, а также разберёмся, какие проблемы могут возникнуть.

Читать далее

Встроили в шрифт микротипограф, который сам ставит правильные тире, кавычки и не только

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели5.3K

Многие дизайнеры (и не только они) знают, чем тире отличается от дефиса, а типографские кавычки от программистских — об этом заботятся в том числе правила грамматики, справочник Мильчина и книги по типографике. В личной переписке это не важно, а вот в публикациях, на сайтах и т. д. соблюдение правил микротипографики придаёт тексту более профессиональный вид.

Проблема в том, что «правильные» типографские знаки не входят в ASCII и не всегда удобно набираются с клавиатуры. Например, в Windows набрать тире или кавычки можно только на клавиатуре, у которой справа есть numpad, или в Ворде с помощью юникодных номеров и Alt + x, или если установить типографскую клавиатурную раскладку Ильи Бирмана. 

Читать далее

Как я запрограммировала собственный рукописный шрифт

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели47K

У меня нередко бывает, что я решу не увлекаться слишком сильно какой-то затеей, но в итоге всё равно в неё погружаюсь. Так было и на этот раз.

Недавно я создала на JavaScript собственный блочный шрифт, решив, что запрограммировать слитное рукописное письмо будет слишком сложно. Но не прошло и двух месяцев, как вот я здесь и готова рассказать о созданном мной механизме слитного письма. Пожалуй, в этом есть свой урок, но мы в его смысл углубляться не станем.
Читать дальше →

Как обойтись без UX-редактора и сделать текст в интерфейсе понятным?

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели8.6K

В процессе разработки продукта или фичи неизбежно возникает необходимость работы с текстом. Если в команде есть UX‑редактор, то именно ему поручается этот этап. Он играет роль дополнительного «мозга» для создания удобного и бесшовного флоу. Кроме того, UX‑редактор обладает высокой продуктовой насмотренностью — через его руки проходит множество макетов, что позволяет ему выявлять потенциальные риски, последствия и пересечения с другими продуктами в компании и на рынке.

Но бывает и такое, что в команде нет UX‑редактора и работу с текстом приходится брать в свои руки. Для таких случаев я решил поделиться своими принципами при работе с текстом, которые помогут вам самостоятельно проверять текст на качество

Читать далее