Большая коллекция сервисов, которые помогут быстро подготовить качественный контент прямо в браузере.
Типографика *
Играем с шрифтами
Новости
Nota, Typst и Evidence. Языки программирования для генерации документов
Все настолько привыкли к Markdown, что считают его неким стандартом для оформления документов в вебе. Но это не конечная истина, высеченная на камне, а просто популярный язык разметки, как HTML и TeX.
В то же время появляется всё больше новых языков, которые позиционируют себя как замену, альтернативу или дополнение к Markdown и TeX. В некоторых случаях они включают функции программирования, то есть позволяют добавить в документ исполняемый код. Веб-редакторы нового поколения можно использовать даже вместо Google Docs.
Почему 4 базовых правила дизайна нужно знать всем, будь ты разработчик, верстальщик или копирайтер
Есть на свете особо ценные приёмы и инструменты, применимые почти к любой профессии. И речь не о пресловутых софт-скилах, с ними всё достаточно очевидно. Куда интереснее поговорить о «жёстких» навыках, которые, за счёт своей универсальности, здорово прокачивают профессиональную эрудицию и не только.
Эмоциональное восприятие шрифтов. Метод семантического дифференциала
Я занимаюсь в Иви UX-исследованиями. Однажды ко мне пришел директор по дизайну с запросом: “Разрабатываем новый шрифт для внешних коммуникаций. Хотим, чтобы вызывал у людей эмоции, соответствующие новой платформе бренда. Сделали несколько вариантов. Помоги понять, действительно ли люди будут испытывать больше эмоций по сравнению с нашим нейтральным шрифтом для интерфейсов, и выбрать наиболее подходящий”.
С подобной задачей я никогда раньше не сталкивалась, поэтому первая моя мысль была: “Да ладно, эмоции и шрифты? Люди вообще не заметят разницу”. Вторая — про семантический дифференциал.
В этой статье я поделюсь методикой и результатами исследования шрифтов с точки зрения эмоций методом семантического дифференциала.
Истории
Точка, точка, запятая, или Почему на Госуслугах нет части пунктуационных знаков
Госуслуги — это не просто очередной портал, на котором размещается полезная информация о работе органов государственной власти. По сути Госуслуги — это средство коммуникации. Как социальные сети и мессенджеры, но не между людьми, а между государством и гражданами.
Чтобы коммуникация была более эффективной, на Госуслугах введены собственные правила оформления текстов. Одно из них — удаление части знаков пунктуации.
Для чего мы это сделали и что именно убрали, я расскажу в этой статье.
XeLaTeX для оформления текстов: Текст, рисунки, таблицы, автоматизация
В статье рассмотрим пример того как в XeLaTeX можно настроить форматирование отдельных элементов текста, автоматически создавать таблицы, рисунки. В первую очередь будет интересна тем кто собирается оформлять ВКР (выпускная квалификационная работа) бакалавра или магистра, писать диссертации и т. п., а также тем кто много создаёт текстов, презентаций с формулами. Статья основана на опыте написания ВКР, отчётов, оформления презентаций с большим количеством формул, таблиц и рисунков.
КОГДА УМЕСТЕН CAPS LOCK, как расставить акценты и другие заметки о типографике
Привет. Меня зовут Костя, и я отвечаю за дизайн в AGIMA. Мы занимаемся дизайном интерфейсов. Особенность нашей работы в том, что во многих проектах мы не можем управлять контентом. Например, когда мы делаем какой-нибудь магазин, мы задаем «гнезда», в которые потом система или контент-менеджер вставит фото товаров, цену, описание и т. д. Каталог товаров формируется динамически, а состав главного меню может поменять продакт-оунер после A/B-тестов или хотелок инвестора. Даже надписи на кнопках правит UX-райтер.
Верстальная программа TeX: какие изменения сделаны в 2021 году
Пишут, что ПО развивается — и только TEX Дональда Кнута завершён и остановлен. Однако в 2021 году TEX обновился. Посмотрим, что изменилось в программе, которая считается образцовой и примерной.
Как мы делали свой шрифт
Я Павел Лаптев, графический дизайнер Даблтап. В этой статье речь не о том, как нормальные люди делают шрифты. Я расскажу, как мы сами делали свой собственный шрифт и зачем это нам понадобилось.
Если вдруг у вас появится желание повторить этот путь — для этого нужно:
1. Понять, для чего вам нужен свой шрифт (и нужен ли).
2. Определиться с характером шрифта.
3. Долго и много рисовать буквы.
4. Упороться с кернингом.
5. Обратиться к специалисту-шрифтовику.
6. Повторить подход.
7. Да, и хинтинг, конечно.
Типографика: основные виды и характеристики шрифтов
Гармонично подобранный шрифт не только доносит информацию до аудитории, но и визуально дополняет проект. Ошибка в выборе шрифта может испортить впечатление и оттолкнуть зрителя от продукта, будь то афиша, вывеска магазина или кафе, упаковка товара, веб-сайт или приложение.
Интуитивно подбирать шрифты для проектов — мечта новичков и рядовая задача профессиональных дизайнеров. Чтобы из первой категории попасть во вторую, нужны годы тренировок и изучения типографики, насмотренность и теоретические знания о шрифтах.
Шрифтовая «не-пара»
Сегодня нет никаких технических, технологических, финансовых, нейро-эстетических обоснований для использования в цифровых продуктах такой конструкции как «шрифтовая пара». Это искусственное ограничение дизайнерской мысли носит исключительно исторических характер и не способствует здоровому развитию специалистов не заставших «типографскую печать».
Расти и делись: создание шрифта для фестиваля G8
Фестиваль креативных индустрий G8 представил публике свою айдентику 2022 года. Ассоциации приходят сразу: делящиеся клетки, органика и единение человека с природой.
Именно по принципу «расти и делись» был собран фирменный стиль, над которым работала большая команда. Студия шрифтового дизайна TypeType[ссылка удалена модератором] — один из участников креативного процесса по созданию шрифта и логотипа.
CSS-селектор :has() и междустрочные интервалы в длинных текстах
Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д.
Ближайшие события
Заблуждения программистов о тексте
Возжелавший прильнуть к жанру вестернов обратится либо к десятой строчке топ-250 лучших фильмов по версии IMDb, либо уже будет обладать знанием, что начинать нужно с «Хороший, плохой, злой». Там он увидит жадных потных мужчин, которые заканчивают фильм напряжённым мексиканским противостоянием. Жалкая охота за золотом конфедератов разворачивается на фоне кровавых битв Гражданской войны между «Севером» и «Югом». Таким зритель запомнит вестерны как жанр.
В реальности «Хороший» — это не классика, а яркий представитель поджанра ревизионистских вестернов, снят в Европе и наоборот, критикует американскую идеологию направления. В нём нет ничего общего с картинами, где герой встаёт на защиту правильного и справедливого общества от злодеев или кровожадных индейцев. В пятидесятых и шестидесятых классический вестерн сошёл на нет, но в коллективном сознании критика быстро заместила критикуемый объект. Когда Марти Макфлай жалуется на анахронизм наряда, он сравнивает себя с антигероями Клинта Иствуда, а не бравыми ковбоями в исполнении Джона Уэйна.
Иногда нашему восприятию требуются корректировки. Собственные заблуждения необходимо не забыть при проектировании информационных систем. Помнить нужно о многом: для времени, карт и почтовых адресов получаются длинные списки. Для текста неожиданностей мало.
Заблуждение 1. Любые символы, кроме управляющих, имеют предсказуемую ширину
В реальности ширина символов может отличаться даже в моноширных шрифтах.
Создание собственного корпоративного шрифта. Зачем он нужен и какой путь мы прошли
Привет, Хабр! Меня зовут Станислав Игнатьев, я начальник отдела дизайна продуктов сервисов X5 Group. Мы проектируем интерфейсы для внешних и внутренних сервисов, например: подписка «Пакет», приложение «Пятёрочка», цифровая платформа для поставщиков Dialog.X5, приложения для работы сотрудников.
Сегодня я хотел бы рассказать, как и зачем мы создавали собственный шрифт.
Темная тема = шрифтовой ад / Решение
В предыдущей статье я подробно разобрал проблемы связанные со шрифтами для темной темы и причины их актуальности. В данном материале смотрим на то, какие есть решения и что предлагает индустрия. + figma файл с адаптированным мной под темную тему стандартным текстовым набором стилей Material Design для Roboto.
Темная тема = шрифтовой ад
Я обожаю темные интерфейсы: в по для кодинга и работы с графикой. То есть там, где текст не нужно читать, а только считывать знакомые иконки и слова. А вот темная тема — шрифтовой ад, в котором нарушен базовый принцип типографики — контрастность. Увы, но сегодня не существует ни одного шрифта и алгоритма растеризации для темной темы для создания полноценных интерфейсов. И вот почему.
Кавычки при вложенных цитатах
В средневековых рукописях слова не разделялись пробелами. И кавычек там тоже не было. По мере отрыва письменной речи от устной всё нужнее становились пробелы, по мере отрыва цитаты от контекста всё нужнее становились кавычки, а по мере развития культуры цитирования всё чаще возникали ситуации, когда один цитирует другого, который цитирует третьего, который приводит слова четвёртого… И как же различать, где кто?
Digital богемия. Руководство по дизайну 1.0
В свое время, мне надоело пересылать бесконечные ссылки на статьи и материалы своим студентам. Тогда я взял и собрал свое «полное» руководство, первой версией которого и делюсь с вами. А поскольку дизайн — это всегда борьба с шаблонами восприятия, я отказался от привычных «страниц» для каждого раздела, ведь digital свободен от ограничений печати. Так и получился первый «гранд-рид».
Как мы улучшили типографику на сайте Авито
Всем привет! Меня зовут Денис Сбитний, я руковожу группой дизайна в дизайн-системе Авито. В этой статье я расскажу, как мы применили новый подход к типографике, описали в дизайне и упростили её реализацию в разработке.
Эта статья может быть интересна как дизайнерам, так и разработчикам. Здесь будет всё: отступы, кегли, интерлиньяжи и, конечно же, токены.