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

Текст — это не просто набор букв. Это мощный инструмент, который влияет на восприятие дизайна, удобство чтения и даже доверие пользователей. Хотите, чтобы ваш сайт или печатные материалы выглядели профессионально? Тогда давайте разберём основы типографики простыми словами.

В данной статье разберем:

- Важность подбора правильного шрифта

- Как выбрать шрифты?

- Где искать шрифты?

- Размер и расстояние – основа удобства

- Контраст и цвет текста

- Ошибки, которые портят типографику и как их избежать

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

Почему 2 — это два изгиба, а 3 — почти как три кривых линии?
Мы привыкли к этим формам, но почти не задумываемся: откуда они взялись?

В этой статье — простая идея: цифры могли родиться не из букв и углов, а из петель. Завязанных руками. Ещё до письменности.

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

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

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

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

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

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

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

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

В новом 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, начиная с установки и заканчивая возможностями и компиляцией, а также разберёмся, какие проблемы могут возникнуть.