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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Большая коллекция сервисов, которые помогут быстро подготовить качественный контент прямо в браузере.

Есть на свете особо ценные приёмы и инструменты, применимые почти к любой профессии. И речь не о пресловутых софт-скилах, с ними всё достаточно очевидно. Куда интереснее поговорить о «жёстких» навыках, которые, за счёт своей универсальности, здорово прокачивают профессиональную эрудицию и не только.