Все потоки
Поиск
Написать публикацию
Обновить
13.19

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

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

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

Краткая история компьютерных шрифтов. От Chicago до XO Fonts

Время на прочтение7 мин
Количество просмотров10K

Пять лет назад мы в МойОфис выпустили собственный набор шрифтов XO Fonts. Сегодня в нем 11 шрифтов и 24 начертаний. Они помогают заменить иностранные проприетарные шрифты и предназначены для корректного отображения ранее созданных документов при работе на компьютерах с российскими операционными системами. Тем не менее, область применения XO Fonts не ограничена только этой задачей — благодаря открытой лицензии шрифты могут бесплатно загрузить любые пользователи и сторонние разработчики.

Специально для Хабра я подготовил статью про развитие компьютерных шрифтов с 1984 года по наши дни. Из неё вы узнаете, что такое TrueType и хинты, почему Adobe долгое время была лидером на рынке компьютерных шрифтов, что означает фраза «писать углем» и зачем в 2021 году в России был изменен ГОСТ о требованиях к оформлению документов.

Читать далее

Мимо наборной кассы: феерическая профанация шрифтового дела от компании «Паратайп»

Время на прочтение11 мин
Количество просмотров28K

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

Я делал PDF⁠-⁠презентацию, чтобы показать европейским иностранцам. И что⁠-⁠то меня пробило на гиперкачественную вёрстку с образцовым типографингом. Пускай, думаю, у иностранцев сорвёт шаблон: они⁠-⁠то привыкли, что все русские верстают по⁠-⁠колхозному, особенно если думают, что нет.

Пока я размечал сетку страницы, меня упорола ещё одна идея: использовать шрифт отечественного производства. Пусть европейцы дважды офигеют.

Я выбрал PT Sans, потому что графика этого шрифта — вполне на мировом уровне. Однако…

Читать далее

35 инструментов для веб-разработчика на каждый день

Время на прочтение4 мин
Количество просмотров46K

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

Дисклеймер: подборка не претендует на полноту, но в комментариях собираем другие полезные инструменты.

Читать далее

Самая совершенная китайская пишущая машинка

Время на прочтение3 мин
Количество просмотров9.8K

На Хабре уже были статьи об истории набора на китайском: в эпоху механической печати не обойтись было без устройств с тысячами отдельных литер и вместо клавиатуры — указателем, перемещающимся в двух измерениях. Лишь в 1980-х, на закате машинописи, развитие микроэлектроники позволило создать китайскую пишущую машинку с привычной европейцу клавиатурой. Хотя посмотрите-ка на эту клавиатуру пристальнее: латинские буквы на клавишах заметно искажены, особенно N и M. Это легендарная китайская небрежность, или же искажённые формы букв несут глубокий смысл?

Читать далее

Автоматически генерируем стикеры для Телеграма из фото плакатов в интернет-магазине

Время на прочтение4 мин
Количество просмотров5.5K

Всем привет!

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

Давайте автоматизируем

О небольших, но бесяще важных различиях текстовых редакторов

Время на прочтение5 мин
Количество просмотров13K

Привет! Я из команды «Р7-Офис», и я немного гик текстового редактирования. Например, в MS Word, равно как и в нашем редакторе Р7, есть двойное зачёркивание, а вот в других русских офисах такой фичи «из коробки» нет. На самом деле это очень русская фишка: у нас есть госкомпании, которые по своим стандартам должны использовать именно двойное зачёркивание в ряде ситуаций. И если эту функцию не поддерживать, то где-то далеко в Сибири заплачет ещё один инженер. 

У нас нет разницы между ядрами онлайн-редактора и десктопной версией. У большинства офисных пакетов эволюция прослеживается с тех времён, когда никакого онлайна толком не было, и внутри монолита можно было построить Римскую империю. Поэтому при переходе к онлайну они обычно не трогали старую кодовую базу, а просто выписывали её основные свойства в бэклог и повторяли в новой версии. Как метод рефакторинга подход замечательный, если не считать того, что полностью скопировать исходный функционал не всегда получается (и не всегда экономически оправданно, видимо), и в итоге приходится поддерживать два разных продукта, которые нередко для пользователя выглядят как один. 

Но я бы хотел рассказать немного о буднях того, что происходит в «исконно славянском труЪ офисе». Начнём с подхода к открытию и сохранению docx и плавно перейдём к тому, каких функций вам не хватает. 

Читать далее

Эмодзи 18 века

Время на прочтение1 мин
Количество просмотров3.7K
По поводу «международного дня эмодзи» 17 июля любопытно вспомнить буддийскую Сутру сердца, записанную для неграмотных японцев пиктограммами:





Этот текст отсканирован из книжки Татибана Нанкэи (1795), и его устройство объясняется в статье Шарлотты Юбанкс (2013) на примере заглавия: Mahā prajñā pāramitā hṛdaya sūtra, что на санскрите означает «Великая сутра сердца совершенной мудрости». Китайцы перевели два слова hṛdaya sūtra «сутра сердца» на свой язык как xīn jīng, а остальные слова заглавия транслитерировали: из mahā «великий» получилось móhē «тереть брань», из prajñā «мудрость» — bōrě «ось если», и т.д. Японцы читают китайское название как maka hannya haramita shin gyō, и в варианте «для неграмотных» записали его как «мишень (ma) — сторона (ka) — демон (hannya) — беременная (harami) — поле (ta) — древесина (shin) — храм (gyō)». Получающаяся «эмодзи-сутра» осмысленна настолько, насколько может быть осмысленной двойная транслитерация санскритского текста через китайский язык.
Читать дальше →

Сам себе Гутенберг. Делаем многоязычные параллельные книги

Время на прочтение14 мин
Количество просмотров8.5K

Lingtrain parallel books article cover


В прошлый раз мы с вами научились делать параллельные книги и сделали русско-английский вариант отрывка романа Харпер Ли "Убить пересмешника". Сегодня мы сделаем следующий шаг и создадим полноценную многоязычную книгу на восьми языках.


Напомню, что целью этого проекта является создание инструмента, который поможет людям, изучающим и преподающим иностранные языки, создавать учебные материалы и параллельные книги для улучшения навыков чтения. Глобальная проблема состоит в том, что трудно найти интересный для изучения материал с параллельным переводом, тогда как найти книгу в оригинале и ее русскую редакцию по отдельности гораздо проще.


Семь книг


Проделаем все на примере романа Булгакова "Мастер и Маргарита", потому что он очень популярен в мире и был переведен на множество языков. Я нашел его версии на английском и немецком (германские языки); белорусском, чешском и украинском (славянские языки); а также на венгерском и китайском языках. Все семь текстов мы выровняем с русским оригиналом, получим семь книг. Затем выровняем их между собой и получим возможность выбирать любые комбинации языков для своей книги в любом порядке. Полные версии книг можно будет скачать в формате pdf в конце статьи.


Начнем с пары венгерский-русский.

Читать дальше →

5 шагов к быстрым веб-шрифтам

Время на прочтение9 мин
Количество просмотров10K
Настройте файлы шрифтов и оптимизируйте стратегию загрузки для максимальной скорости + минимум FOUT

image


В предыдущем посте я писал о системных шрифтах и ​​их преимуществах перед веб-шрифтами. Я поддерживал подход «сначала системные шрифты», утверждая, что по сравнению с системными шрифтами веб-шрифты (а) могут отрицательно повлиять на производительность, (б) использовать больше данных и (в) увеличить энергопотребление вашего сайта. Но сеть без веб-шрифтов была бы гораздо менее интересной — возможно, используя веб-шрифты более ответственно, мы сможем получить все их преимущества, сведя к минимуму недостатки.

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

Благодарим Зака ​​Лезермана, который подробно писал о веб-шрифтах на своем сайте. Стоит прочитать все его статьи, особенно The Font Loading Checklist и A Comprehensive Guide to Font Loading Strategies (которое действительно очень исчерпывающее), обе из которых оказались очень полезными, пока я писал этот пост.
Читать дальше →

Создание совершенной печатной машины из Sublime Text

Время на прочтение5 мин
Количество просмотров13K
UPD: Прошло больше месяца с тех пор, как я написал первоначальный черновик этой статьи. С тех пор я опубликовал еще три записи в блоге и более двадцати на моем канале в Телеграм. Настройки зарекомендовали себя фантастически, мне он очень нравится, и у меня нет желания искать где-либо еще.

Я был давним поклонником iA Writer из-за того, что писал. Я купил оригинальную версию для iPad, оригинальную версию macOS (когда она еще называлась MacOS X), версию для Android и даже ту, которую они переиздали как «платное обновление по полной цене». На мой взгляд, в нем есть идеальный баланс между функциями и простотой, дизайном и направленностью.

Вот скриншот первоначальной версии iA Writer от 2011 года:

image

А вот как это выглядит сейчас, в 2021 году:

image

Дизайн настолько вне времени, что практически не изменился за 10 лет.
И я этим доволен, я не собираюсь жаловаться. Это здорово и для вдохновения, и для нововведений, и для фактического воплощения. Я искренне рекомендую его всем, кто пишет.
Читать дальше →

Как и почему эмодзи портят онлайн-переписку

Время на прочтение8 мин
Количество просмотров39K

Разве могут эти милые значки испортить ваши отношения с подписчками или навредить в личной переписке? А что на счёт онлайн-переписки с коллегами в условиях дистанционной работы? Автор статьи на всё отвечает «да». Более того, между многобукаф и многосмайлоф он выбирает первое, считая это за меньшее зло. Почему?

Чтобы ответить на этот вопрос, он вводит критерии качества общения и выстраивает соответствующую аргументацию.

Несколько недель назад я опубликовал в Instagram Stories саморекламы пост. Через полчаса я обнаружил, что подписчики положительно отреагировали на него. Вроде бы всё хорошо, но давайте посмотрим внимательнее.
Читать дальше →

Font size бесполезен, давайте это исправим

Время на прочтение5 мин
Количество просмотров29K
Что происходит, когда вы указываете в редакторе "font_size": 32? Я бы вам всё равно рассказал, но хорошо, что спросили.

Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:


Если мы измерим сами буквы, то нигде не найдём числа 32:

32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела?
Читать дальше →

Под капотом у Emoji

Время на прочтение6 мин
Количество просмотров30K
image


В течение последних нескольких недель Nikita Prokopov внедрял поддержку эмодзи для Skija. Он решил поделиться несколькими мелкими деталями того, как это «самое большое новшество в человеческом общении со времен изобретения буквы image» работает под капотом.

Примечание переводчика: Хабр не поддерживает эмодзи, поэтому пришлось выкручиваться и заменить эмодзи картинками.

Unicode


Каждый символ на компьютере кодируется числом. Самая популярная кодировка — Unicode, а две самые распространенные подвариации — UTF-8 и UTF-16.

Unicode выделяет 221 (2 млн) символов, назывемых «codepoints». Из этих двух миллионов сейчас определены только ~150k символов. В эти 150 000 символов впихнули все языки, мёртвые и живые и прочие украшательства. Можно использовать различные шрифты, писать задом наперед и кверх ногами: image, а также отобразить «GHz» как один глиф: image.

Направленная вправо двуглавая стрела с оперением и двумя вертикальными штрихами: image или семиглазый монстр: image. И утка:

image

Читать дальше →

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

Вариант записи текстов на русском языке с помощью латиницы

Время на прочтение3 мин
Количество просмотров31K

Статья написана в порядке «зарядки для хвоста ума», не претендует на всестороннесть освещения проблемы, не призывает совершать описанное в ней — «чисто поржать», как сейчас принято выражаться.

В Telegram-чате, где я участвую (чат любителей самодельных по-настоящему эргономичных клавиатур — к слову, моя клавиатура сейчас выглядит вот так, а раскладка на ней — вот такая), на текущий момент называется «Клавиатуры: эргономика и раскладки») недавно затронули тему кириллицы и латиницы в русском языке, вспомнили проблемы, с которыми столкнулись наши «братские народы» (бывшие республики СССР) при переходе на «самостийную» (я не про Украину) латиницу, и вот какая у меня появилась мысль. Начну немного издали…

Общеизвестно, что компьютеры были изобретены «англопишущими» людьми, которые пользуются латиницей, посему в любом компьютере (да и в другой «интеллектуальной» технике) безусловно есть в наличии латинские буквы, а вот других, к примеру, кириллицы, может не быть. Сейчас-то в ОСях (операционных системах) проблемы национальных алфавитов решены чуть более, чем полностью, но многие ещё помнят, какие в 90-х совершались телодвижения для того, чтобы вывести на экран и на принтер кириллицу (русские буквы).

Так вот, в процессе обсуждения опять затронули тему, что-де, лучше было бы в русской письменности использовать латиницу (кому-то нравится вид текста, кому-то — сравнительно меньшее количество букв, кому-то — та самая совместимость с компьютерами). Кстати, несмотря на существующее мнение, что текст на латинице обладает некой визуальной красотой, коей лишён текст на кириллице — моё мнение диаметрально противоположно: дизайн кириллических букв очень гармоничный и текст на русском языке читать одно удовольствие.

Так-то, существует даже несколько стандартов транскрибации русского текста на «международную» латиницу, но, согласитесь, использование апострофов, неоднозначность фонетического соответствия, а также такие монстры, как Ч=ch, Ш=sh, Я=ja (или ya), и, коронное, Щ=shch делают такой вариант не очень привлекательным. Но ведь латиницы (26 букв) не хватает для однозначного отображения русских букв (33 буквы — и да, я считаю букву Ё значимой, несмотря на то, что она «засунута в …» даже в UniCode).

И вот тут-то мне и пришла в голову мысль (а мысль убивать нельзя, как говорил мой учитель!): а почему бы, действительно, не попытаться использовать латинские буквы в русском языке?

Сразу сформировалась концепция.

Кому ещё интересно — прошу под кат!

Загадочные субтитры на CNN

Время на прочтение3 мин
Количество просмотров50K
Зрители CNN обратили внимание, что в выпуске новостей 12/11/2020 на их официальном YouTube-канале вместо субтитров какая-то каша из обрывков английских слов, сплошным капсом:


Как такое могло получиться? (По состоянию на 1/12/2020, субтитры на YouTube так и не исправлены.)

Stenotype


Американские стенографисты уже больше сотни лет как используют специальные устройства с минимальной 22-клавишной клавиатурой — по две клавиши под каждый палец, чтобы минимизировать движения кистей:



Сто лет назад стенотайп был вариантом печатной машинки, и каждая клавиша оставляла оттиск на бумаге. Каретки не было: после каждого «аккорда» из одной или нескольких одновременно нажатых клавиш, бумага проматывалась на одну строчку вниз. Оттиск каждой литеры приходился всегда на одно и то же место в строке. Клавиши P, R, S, T присутствуют в двух экземплярах каждая — под левой и под правой рукой.

Читать дальше →

Стилевые особенности барокко в типографике

Время на прочтение4 мин
Количество просмотров4.9K
Научный консультант — кандидат исторических наук доцент Кирьянова Елена Георгиевна

Типографика считается древнейшей разновидностью промышленного дизайна. С середины XV в. книга обретает привычную нам форму кодекса (скрепленных вместе прямоугольных или квадратных листов в переплете), а для набора основной массы текста используются удобочитаемые антиквенные шрифты. Как известно,
антиква (лат. antiquus — древний) — собирательное название шрифтов с короткими (обычно перпендикулярными) вспомогательными штрихами (засечками) в начале и конце основных штрихов знака.



Читать дальше →

Система font fallback: что происходит, когда шрифт не может найти нужный символ

Время на прочтение21 мин
Количество просмотров20K
image

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


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


Вы видели, как пользователь Twitter использует крутые шрифты, хотя сайт, казалось бы, не разрешает выбирать шрифт.


Или вы разобрались, как использовать эти шрифты в Twitter, но кто-то попросил вас подумать о читателях или жаловался, что видит только пустые квадраты.
Читать дальше →

Пора обновить ваш монитор

Время на прочтение16 мин
Количество просмотров187K

Иллюстрация: Юлия Прокопова

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

Поэтому я оптимизирую настройки, чтобы показывать действительно, действительно хорошие буквы. Для этого необходим хороший монитор. Не просто нужен, а ОБЯЗАТЕЛЕН. А под «хорошим» я имею в виду настолько хороший, насколько это возможно. Это мои мысли, основанные на моём собственном опыте того, какие мониторы лучше подходят для программирования.
Читать дальше →

Знаменитые дизайнеры vs научные исследования про читаемость шрифтов

Время на прочтение6 мин
Количество просмотров71K
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.

А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.

Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).


Читать дальше →

Этот восхитительный Юникод

Время на прочтение27 мин
Количество просмотров104K


Перед вами обновляемый список самых замечательных «вкусностей» Юникода, а также пакетов и ресурсов

Юникод — это потрясающе! До его появления международная коммуникация была изнурительной: каждый определял свой отдельный расширенный набор символов в верхней половине ASCII (так называемые кодовые страницы). Это порождало конфликты. Просто подумайте, что немцам приходилось договариваться с корейцами, где чья кодовая страница. К счастью, появился Юникод и ввёл общий стандарт. Юникод 8.0 охватывает более 120 000 символов из более 129 письменностей. И современные, и древние, и до сих пор не расшифрованные. Юникод поддерживает текст слева направо и справа налево, наложение символов и включает самые разные культурные, политические, религиозные символы и эмодзи. Юникод потрясающе человечен, а его возможности сильно недооцениваются.
Читать дальше →

Вклад авторов