все, что вам нужно знать об искусстве шрифтов

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

Типографика вовсе не ограничивается выбором шрифтов и отступов — это более глубокая, сложная и интересная дисциплина. И освоить её вам поможет наша подборка книг.

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

Книга Гордона — менее всего книга «по истории». Историческим примерам посвящена едва ли не пятая часть работы. Скорее это — живое и наглядное пособие для вдумчивых шрифтовиков, оформителей и дизайнеров: о технике исполнения букв, о производстве шрифтов. Каждому знаку кириллического алфавита посвящён свой раздел. Также стоит отметить богатые иллюстрации книги.

Задача любого шрифтовика — выработать идеальный по красоте и по читаемости шрифт. И именно её помогает решить Юрий Гордон.

Книга Роберта Брингхёрста, американского поэта, литератора и типографа, впервые вышла более четверти века назад. Основательный подход автора, опора на классическую традицию, серьёзная проработка темы и осознание важности практического подхода к решению вопросов типографики сразу сделали эту книгу лучшей, основополагающей, классической. Для человека без специального образования книга должна стать настольной. Добиться идеального результата при оформлении текста — вот задача, которую ставит Брингхёрст.

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

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

Англоязычная версия (The Elements of Typographic Style).

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

«Облик книги» — это сборник эссе разных лет. Автор задаётся ключевыми вопросами типографики и ищет ответы на них. Чихольд — прежде всего критик. Рассказывая, как «не надо», он от противного вырабатывает безупречную эстетическую теорию. Автор считает гармонию высшей ценностью: нет гармонии — нет хорошей книги. Добиться гармонии позволяют грамотные пропорции. По Чихольду, маятник, раскачивающийся от гармонии до дисгармонии, по сути, перемещается от «хорошей» до «плохой» книги.

«Облик книги», как и большинство работ Чихольда, будет интересна не только профессионалам, но и широкому кругу читателей — всем людям, любящим книгу.

Книга впервые издана в Германии в 1928 году. В максимально новаторском для своего времени исследовании автор анализирует теорию социального критицизма и истории искусств, а также рассуждает, например, о возрастающей важности фотографии в графическом дизайне. Теоретический блок помогает понять основы типографики и связать её с другими видами искусства (архитектурой и пр.). А вот в практическом блоке автор с поистине немецкой скрупулёзностью предлагает правила оформления печатных материалов и практические указания по вёрстке деловых документов.

Скептики скажут, что Чихольд устарел: стандарты, описанные в книге, давно не применяются, да и сам он позже отказался от своих идей. И всё же магия великих книг заключается в их непреходящей актуальности, в их вневременном значении. Чихольда читать надо. Профессионалы по-прежнему признают «Новую типографику» одной из основных книг ХХ века и рекомендуют её не только специалистам, но и всем интересующимся темой.

Книга Джеймса Феличи целиком и полностью посвящена типографике: искусству оформления печатной продукции с помощью набора и вёрстки. Это база, основа, библия — назовите как хотите. Без книги Феличи в типографике делать попросту нечего.

Огромная историко-теоретическая база исследования подаётся не оторванной от жизни. Знание этой базы — первый шаг на пути к эстетически идеальному оформлению книги. Автор обращает внимание на компьютерные шрифты и описывает основы и тонкости работы в основных программах для вёрстки, а также сведения о веб-типографике. Удачное совмещение классических представлений и современного взгляда позволит книге Феличи занять достойное место на рабочем столе профессионального шрифтовика, оформителя или дизайнера.

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

Представлять профессиональному сообществу Эрика Шпикермана — неблагодарное дело: слишком известен. Его универсальная книга, изданная на русском языке в 2005 году, называется скромно и просто — «О шрифте» — и до сих пор остаётся неувядающей классикой. Автор рассуждает о новых шрифтовых технологиях, о современных шрифтах (обращая внимание на веб-типографику и компьютерные шрифты).

Главный вопрос, который решается в труде Шпикермана: как выбрать правильный шрифт, чтобы подать информацию в книге красиво и при этом доступно. Обратите внимание, что для российского издания большинство шрифтовых примеров пересмотрено с учётом кириллического алфавита. Также в книге вы найдёте образцы кириллических гарнитур и уникальный по информативности справочный материал: сведения об использованных шрифтах, библиографию и многое другое.

Англоязычная версия (Stop Stealing Sheep & Find Out How Type Works): Amazon.

В. Г. Кричевский. Типографика в терминах и образах. Том 1 и том 2

В 2000 году эта работа искусствоведа и дизайнера Владимира Кричевского победила на конкурсе «Лучшие издания XIII ММКЯ» в номинации «Книга года». «Типографика в терминах и образах» — без преувеличения, одна из важнейших книг для шрифтовиков и дизайнеров. Это странное и прекрасное издание перевернёт ваши представления о пособии по типографике.

Двухтомный труд по искусству оформления текстов средствами набора выглядит очень оригинально. Первый том — справочное пособие из 158 статей, расположенных в алфавитном порядке. По очереди вы узнаете всё об абзаце, афише, бланке, буклете… Причём «всё» значит действительно всё! Спокойно и неэмоционально, логично и продуманно, обращая равное внимание на основы и детали, Кричевский рассказывает обо всех русских типографических терминах. Удивившись, что в книге по дизайну нет «картинок» (совсем нет!), вы отправитесь ко второму тому. А там… нет текста! Только картинки, которые иллюстрируют понятия из первого тома. Подробная и разветвлённая система отсылок поможет вам представить типографику во всём многообразии её проявлений.

Книга Александры Корольковой увидела свет в 2007 году и с тех пор пережила уже пять изданий. Популярная, востребованная, важная и интересная книга — «студенческая». И по тону изложения, и по замыслу автора, и по способу написания (как результат преподавательской работы школы графического дизайна). Живой, динамичный язык упрощает понимание типографических понятий (но вовсе не сами понятия!). Работа не претендует на звание «лучшей», «библии», «исследовательского труда» — вовсе нет. Это живой и яркий учебник, возможно, первая ступень для знакомства с типографикой. Несомненный плюс: книга полностью построена на русском материале, обращается к кириллическому шрифту. Примеры из переводных книг именитых типографов, к сожалению, зачастую неприменимы для «русской почвы».

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

Каллиграфия — искусство писать красиво — пленяет людей, и владение этим искусством — один из признаков культуры общения. Леонид Проненко, заслуженный художник России и каллиграф, увлекательно рассказывает о своём ремесле. В книге вы найдёте краткую историю каллиграфии, сведения об орудиях и материалах для письма. Вы заразитесь восхищением автора и наверняка последуете его советам по овладению шрифтовой культурой.

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

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

Бренд «швейцарская типографика» — заслуга исключительно Рудера. В сфере типографики он действительно — «наше всё».

Источник: habrahabr.ru

основные понятия и секретная информация из курса «Текстерры»

Вы удивитесь, но в блоге «Текстерры» еще не было статьи, полностью посвященной типографике. Исправляемся! Перед вами основные понятия и правила типографики от А до Я.

В этой статье мы также делимся эксклюзивными материалами – свежачком из курса «UX-специалист». Такого в свободном доступе вы не увидите!

А что это вообще такое? Типографика в веб-дизайне (а мы будем говорить именно про него) – это наука оформления текста на сайте. Правила типографики созданы для того, чтобы текст был удобен для чтения и подталкивал пользователя к совершению целевого действия: купить товар, оформить подписку, дочитать статью до конца. Получается, типографика работает в тесной связке с UX-дизайном – мы к этому еще вернемся.

Большие элементы. Последние несколько лет в тренде большие шрифты – чем крупнее, тем лучше. Почему так? Большие шрифты воспринимаются лучше, прочитать их не составляет труда. Однако есть и исключения: например, в дизайне бренда холодного кофе CoolBrew используется мелкая типографика. По словам одного из создателей, «массивный системообразующий символ контрастирует с мелким шрифтом, но не забирает на себя все внимание. А мелкая типографика гармонично заполняет пространство, добавляя дизайну премиальной эстетики».

Выравнивание. Считается, что оптимальным является выравнивание текста по левому краю. По ширине, по правому краю или, боже упаси, по центру нужно применять очень осторожно. Исключение – подзаголовки или микротексты в несколько слов, которые могут располагаться друг под другом.

Голос бренда на сайте определяет взаимоотношения компании и потребителей. Об этом рассказывает лектор курса «UX-специалист» (и главред блога «Текстерры») Константин Рудов. Вот основные правила подобных текстов:

• Определитесь со стилем общения. Деловой, дружеский, немного фамильярный – все зависит от вашего позиционирования на рынке.
• Придерживайтесь единой манеры – или ты, или вы.
• Вступайте в диалог с пользователем, объясняйте значение графических элементов, а не раскидывайте их по странице в надежде, что сам разберется.
• Не используйте термины и профессиональный жаргон – говорите так, чтобы вас поняли.
• Говорите о пользе для потребителя, а не о том, что нужно вам.

Длина строк – какой она должна быть? Слишком длинная мешает понять суть: пока дойдешь до конца – забудешь, что было в начале. Короткая – тоже ничего хорошего: только и будешь стрелять глазами от начала к концу строки. Если не знаете, какой должна быть золотая середина, расслабьтесь: все уже вычислено. Оптимальный размер строки для декстопной страницы – 55-65 символов. Для мобильной версии – 30-40 символов. Пользуйтесь.

Заодно расскажем о двух забавных терминах – вдовах и сиротах. Так на профессиональном жаргоне называются висячие строки. «Вдовы» – это одинокие слова на строке, которые остаются в конце абзаца или страницы. «Сироты» – висячие строки, которые убежали на новую страницу. От них нужно избавляться.

[Запись вебинара] Какой должна быть типографика на сайте?

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

«Дежурка» говорит, что это круто. Мне не нравится – сильно отвлекает от текста. А вам как?

Ёлочки или лапки? В русском языке предпочтительнее елочки. Не спрашивайте, чем они лучше лапок – так сложилось. Лапки используются, когда надо поставить кавычки внутри кавычек или в рукописном тексте. А еще есть железный способ определить новичка в копирайтинге. Матерый автор автоматически будет ставить елочки – даже если в ТЗ или редполитике об этом не сказано.

Жена Стива Круга не была веб-дизайнером, но суть ухватила точно. В своей книге «Веб-дизайн» писатель приводит слова супруги (на картинке).

Упрости жизнь своему читателю (клиенту) – не заставляй его продираться сквозь нечитабельный текст и преодолевать трудности. Пусть идет по страницам легко, словно на лодочке плывет, преодолевая мели, водовороты и водопады. Подробнее этого мы коснемся, когда дойдем до буквы Ю.

Заголовки набираются по принципу пирамиды. Основной заголовок – крупным шрифтом, подзаголовок (если есть) – поменьше, остальной текст – еще меньше.

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

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

И

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

• 12 ресурсов с бесплатными шрифтами
• «Бесплатные шрифты» (VK)
• 1001 Fonts
• Abstract Fonts
• Dafont
• Google Fonts и другие.

Еще больше инструментов – в статье нашего блога 76 ресурсов для тех, кому нужен бесплатный дизайнерский контент.

Кегль, кернинг, трекинг и прочий интерлиньяж – слова из лексикона верстальщика. Кегль – высота буквы. Кернинг – интервал между буквами. Причем между разными буквами он может быть разным – чтобы читалось лучше (изменение расстояния называется трекинг). Интерлиньяж – расстояние между строками. Обычно он делается в 1,5 раза больше кегля.

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

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

Тренды дизайна-2019

Микротексты – это не полноценные новости, статьи, продающие тексты. Микротексты могут состоять из одного или нескольких слов – например, разделы меню, фильтры для выбора товаров в интернет-магазине, надпись на кнопке СТА, надпись в форме заказа и так далее. Для таких текстов тоже есть свои правила. Лайфхаками из курса «UX-специалист» делится Константин Рудов:

• Используйте узнаваемые выражения. К любому слову можно подобрать синонимы, но это тот самый случай, когда лучшее – враг хорошего. В микротекстах используйте формулировки, которые знакомы большинству пользователей. Даже не так – которые ПРИНЯТО использовать в этом контексте. Чем более предсказуемо выглядит интерфейс – тем больше вероятности, что человек щелкнет на кнопку.
• Сокращайте все лишнее. Например, если вы раздумываете, что лучше написать на кнопке – «Оставить заявку на обратный звонок» или просто «Обратный звонок» – без сомнений выбирайте второе, такой текст будет считываться быстрее.

• Однако если ваша ЦА – не очень опытные пользователи, тогда лучше писать более длинно. Или под основным предложением (записаться на консультацию, заказать товар) писать текстовое пояснение – для удобства.

Новички часто допускают ошибки в типографике. О некоторых мы уже писали: смотрите буквы В, Г, Д, З… Какие из них самые распространенные:

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

Объединение – одно из базовых правил UX, которое относится и к типографике. Оно гласит: схожие элементы воспринимаются как единое целое. Это могут быть иконки, выполненные в одном стиле, шрифты в разделе меню, сами микротексты, поля в форме заказа. Поэтому если вы хотите не рассеивать внимание пользователя, а наоборот, заострить его, – оформляйте все одинаково.

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

Примеры отличной типографики разбросаны по всей статье. Приведу три своих фаворита.

Пройдите по ссылке на сайт – не пожалеете

Роберт Брингхёрст («Основы стиля в типографике»), Джеймс Феличи («Типографика: шрифт, верстка, дизайн»), Элам Кимберли («Графический дизайн. Принцип сетки»), Эрик Шпикерман («О шрифте»), Владимир Лаптев («Типографика. Порядок и хаос»), Александра Королькова («Живая типографика») – все эти авторы старались для нас. В их книгах вы найдете основы основ, примеры типографики XX-XXI веков и даже забавные истории.

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

А вот цветом структурировать текст лучше не надо – по крайней мере, не перебарщивать с этим. Это отвлекает внимание читателя и создает ощущение мешанины. То же самое касается выделения основных мыслей жирным, курсивом и, упаси боже, капслоком.

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

Уникальность – пожалуй, основная тенденция веб-дизайна последних лет. В статье «Тренды дизайна-2019» мы уже касались этой темы. По словам Святослава Грошева, руководителя отдела дизайна TexTerra, бренды все чаще используют собственные шрифты. Это добавляет бренду индивидуальности, особенно если свой шрифт – элемент фирменного стиля и используется везде. Уникальность проявляется не только в шрифтах – популярно нестандартное расположение текста и заголовков. Главное, опять же – не переборщить и не дезориентировать читателя («Где я? Что тут происходит?»).

Узнаваемый дизайн – эффективный способ привлечь внимание к контенту и продукции компании. Подробнее

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

Хотя есть и исключения. Создатели нового логотипа Zara просто проигнорировали все, что мы тут написали. Тенденция к упрощению, свободное пространство, большие крупные шрифты – не-е-е, не слышали.

Мнения дизайнеров разделились: от «Логотип индивидуальный, с оттенком ретро и отсылкой к журналам про моду» до «Будто бы это уже не логотип модного дома, а “логосик” где-то на базаре». И даже так: «Как минимум лого перестал быть скучным, как надпись ЛЕНИН на Мавзолее». А вы как думаете?

Холивары на тему «Шрифты с засечками / шрифты без засечек» продолжаются до сих пор. Раньше считалось, что шрифты с засечками не подходят для веб-дизайна. «Старый принцип юзабилити для интернет-типографики был прост: придерживаться шрифтов без засечек. Поскольку компьютерные экраны паршиво отображали засечки, использование таких шрифтов в тексте приводило к размытым буквам», – писал специалист по UX Якоб Нильсен. Сейчас, хвала богам, такой проблемы нет – а значит, ограничения на засечки могут сниматься. По большому счету, наличие и отсутствие засечек – не основной критерий. А что главное – расскажем в пункте «Ч» нашей азбуки.

Как делаем мы? «Шрифты с засечками очень хорошо вписываются в современный дизайн, но я бы не советовал их использовать во всех проектах. Они могут быть эффектно реализованы в качестве заголовков», – говорит дизайнер Святослав Грошев. Вот так мы и делаем на сайте и в блоге «Текстерры». Посмотрите на этот текст и вернитесь к заголовку – там совсем другой шрифт.

Цвет текста тоже имеет значение. Не будем городить огород и скажем, что лучше черного на белом или белого на черном ничего еще не придумали. Окей, серый вместо черного тоже достойно смотрится. Да и белый на темно-синем/красном/зеленом вполне подойдет. Сейчас в моде еще одна достойная альтернатива – прозрачность.

Важные текстовые блоки можно выделять цветом, чтобы привлечь внимание пользователя. Контрастная кнопка СТА – классический пример. В этих случаях сам текст точно должен быть черным или белым – иначе читатель забьется в падучей. Особенно если будете сочетать вырвиглазные цвета – красный на зеленом или синий на желтом. Думаете, такие сайты остались в прошлом? В основном да, но есть еще доисторические образчики.

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

Шрифты – наконец-то мы до них добрались! Опишем кратко свежие тенденции:

• Крупно, как можно крупнее! Особенно хорошо большие шрифты смотрятся вместе с минималистичным дизайном.
• Уникальные шрифты, разработанные специально для конкретного бренда или ресурса.
• Контурные шрифты помогают грамотно расставлять акценты на нужных частях текста.
• Шрифты с засечками – ну вы поняли.
• Выбирайте адаптивные шрифты, которые будут одинаково хорошо читаться и в декстопной, и в мобильной версиях. На смартфоне нереально прочитать слишком маленькие буквы, а постоянно увеличивать изображение быстро надоест.

Shit happens. Терминов на эту букву маловато – идем дальше.

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

Юикс, или UX – это не только про дизайн. Это и про типографику. С помощью текста можно (и нужно!) взаимодействовать с пользователем, вести его сквозь страницы сайта к целевому действию: оформить заказ, подписаться на рассылку, зарегистрироваться на сайте. Вот почему все тексты на сайте должны быть в первую очередь читабельными, во вторую – понятными. В идеале у пользователя вообще не должно быть сомнений, переходить по ссылке или нет, нажимать кнопку СТА или не стоит. Лишние сомнения – лишние печали и препятствия на пути к целевому действию, а нам это совсем не нужно.

Я недавно прослушала курс «UX-специалист» от TexTerra. Сейчас будет не реклама, просто личные впечатления. В этом курсе собраны все современные знания о UX и самое главное – дана бесценная практика. Частичкой этих знаний я поделилась с вами в статье. Надеюсь, было интересно!

Дизайн для удобочитаемости: руководство по веб-типографике

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

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

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

Проблемы цифровой типографики

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

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

Выбор наилучшего шрифта для чтения с экрана

Цифровой дизайн — сложное ремесло: не так давно мы были ограничены лишь несколькими шрифтами, совместимыми с мониторами с низким разрешением.

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

Дизайн не обязательно должен ограничиваться универсальными стандартными шрифтами (Time New Roman может выйти из употребления). Для дизайнеров доступно бесчисленное множество вариантов шрифтов, безопасных для Интернета и доступных. Google Fonts, Font Library и Adobe Typekit — это лишь некоторые из них, которые предлагают простую интеграцию и широкий выбор вариантов.

Форматирование для приятного чтения

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

Идеальный размер текста зависит от выбранного шрифта, поскольку такие факторы, как высота x и открытость счетчика, будут влиять на разборчивость. Затем размер текста будет определять высоту и длину строки. Простой способ проверить взаимосвязь между этими решениями — использовать такие инструменты, как Grid Lover, который использует ползунки для изменения внешнего вида каждого измерения.

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

Никогда не экономьте на тестировании

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

Руководство по веб-типографике

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

Вот исчерпывающее руководство по выбору правильного шрифта и его форматированию для удобочитаемости.

Загрузите PDF-версию этой инфографики.

• • •

Дополнительная литература в блоге Toptal Design:

• Анализ тонкостей анатомии типографики
• Понимание нюансов классификации шрифтов
• Слова имеют значение — истинная ценность UX Copy
• Создание руководства по стилю пользовательского интерфейса для лучшего UX
• Основы редизайна веб-сайта — пример из практики

Понимание основ

• Что такое типографика в веб-дизайне?

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

• Какой шрифт лучше всего подходит для чтения с экрана?

  Шрифты, которые лучше всего подходят для чтения с экрана, имеют характерные и открытые формы букв. Proxima Nova, Georgia и Fira имеют характеристики, облегчающие чтение на различных экранах. На удобочитаемость шрифта влияют и другие факторы, такие как размер шрифта, высота строки, контрастность шрифта и цвета фона.

• Какой размер шрифта следует использовать для веб-сайта?

  Размер шрифта на веб-сайте должен соответствовать размеру экрана, на котором он отображается. В общем, шрифт должен быть 12-16pt на мобильном экране, 15-19pt на планшете и 16-20pt на экране настольного компьютера. Также следует учитывать такие факторы, как размер шрифта, высота и длина строки.

• Что такое хорошая типографика?

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

• Сколько шрифтов следует использовать на веб-сайте?

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

Система веб-дизайна США (USWDS)

Компоненты

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

Набор текста с помощью USWDS

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

Система веб-дизайна США контролирует набор значений с помощью системы токенов. Вы можете узнать больше о токенах верстки в разделе Токены верстки и в разделе Утилиты.

Специальные возможности для Teams также дают хорошее руководство по набору текста.

Размер шрифта

• Используйте удобный для чтения размер основного текста. Для большей части текста, включая основной текст, используйте эффективный размер не менее 16 пикселей (размер шрифта 5). Меньший и больший текст можно использовать с осторожностью для специальных целей (например, заголовки, подписи, фотографии, сноски, таблицы данных или специализированные элементы пользовательского интерфейса).
• Токены размера шрифта. Следующие два пункта являются основными рекомендациями по выбору токенов размера шрифта:
  • Используйте маркеры между размером шрифта 5 и размером шрифта 8 для большей части текущего текста.
  • Используйте маркеры меньше размера шрифта 5 более экономно — для более короткого сопутствующего текста, такого как подписи, сноски, фотографии или специализированные элементы пользовательского интерфейса.

Выравнивание текста

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

• Тип установки заподлицо слева. Шрифт, установленный вровень с левым краем, обеспечивает глазу постоянную начальную точку для каждой строки, облегчая чтение текста.
• Жетоны мировоззрения: нет.

Измерение (длина строки)

Управление длиной строк текста (также известное как измерение ) помогает читателям легко переключаться с одной строки на другую, делая чтение более естественным и комфортным.

• Большинство строк текста должно быть 45–9.0 символов. Текущий стандартный диапазон читаемой длины строки составляет от 45 (мера 1) до 90 символов в строке (мера 5). Хорошая цель для длинных текстов — 66 символов (мера 2).
• Текст с большей высотой строки может иметь больший размер. Так как одной из функций меры является помощь читателям в более естественном переходе от одной строки текста к другой, эффект длинного размера можно уменьшить, увеличив расстояние между строками. Таким образом, текст с большим расстоянием между строками может иметь несколько большую длину строки.
• Короткие проходы могут иметь размер за пределами идеального диапазона. В случаях, когда пользователи будут читать короткие фрагменты текста (такие как сноски или предупреждения), вы можете безопасно устанавливать более длинные или короткие строки, чем обычно.
• Большой текст может иметь более короткий размер. Поскольку текст большего размера занимает больше места на экране, возможно, имеет смысл задать для него относительно небольшую меру.
• Жетоны измерения. Следующие три пункта являются основными рекомендациями по выбору токенов мер:
  • Токены между мерой 2 и мерой 5 подходят для большинства длинных текстов.
  • Маркер меры 6 может подходить для более коротких блоков текста, таких как подписи менее чем из трех строк, или для текста, который не предназначен для чтения длинных форм.
  • Маркер меры 1 может подходить для вспомогательного текста (длиной не более одного или двух абзацев) или для более крупного текста (например, подзаголовка или вводного текста).

Высота строки

Высота строки определяет вертикальный ритм и плотность блока текста. Он записывается как безразмерный множитель размера шрифта текста — например, высота строки 1,5 для текста размером 16 пикселей приводит к высоте строки 24 пикселя.

• Более длинные тексты требуют большей высоты строки. Заголовки и другие элементы содержимого длиной не более одной или двух строк могут иметь высоту строки от 1 (высота строки 1) до 1,35 (высота строки 3). Более длинные тексты должны иметь высоту строки не менее 1,5 (высота строки 4).
• Для более длинных строк обычно требуется большая высота строки. Различение между строками текста может быть затруднено, когда взгляд должен перемещаться от конца одной длинной строки к началу следующей. Использование большей высоты строки облегчает читателю различение отдельных строк. Хотя, как это ни парадоксально, длинные строки текста могут выиграть от немного меньшей высоты строки, чем обычно, поскольку слишком большая высота строки может сделать каждую отдельную строку слишком заметной.
• Читаемый текст средней плотности. Стремитесь к тому, чтобы текст не казался ни слишком плотным, ни рыхлым. Обычно читатель не должен замечать пробелов между строками текста.
• Жетоны высоты строки. Следующие шесть пунктов являются основными рекомендациями по выбору токенов высоты строки:
  • Токен высотой строки 1 — хороший вариант для большинства кнопок и других коротких элементов пользовательского интерфейса. (Этот вариант часто лучше всего подходит для четкого вертикального выравнивания.)
  • Токен высотой 2 строки — хороший вариант для большинства заголовков и вступительного текста длиной не более 1-2 предложений.
  • Токен высотой 3 строки — хороший вариант для короткого текста (под абзацем), заголовков и длинных строк.
  • Токен высотой строки 4 является хорошим вариантом, когда фрагменты бегущего текста состоят из одного или двух абзацев, особенно при использовании короткой меры (например, меры 1 или меры 2).
  • Маркер высотой строки 5 является хорошим вариантом для чтения большей части текста, особенно текста, предназначенного для расширенного чтения.
  • Маркер высотой строки 6 — хороший вариант для более короткого текста (около 1–2 абзацев), который должен отличаться от остального текста страницы, например цитат.

Пробел

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

• Не делайте отступ абзаца, используйте пробел перед ним. В то время как в большинстве длинных печатных изданий для разделения абзацев используются строки с отступом, в Интернете более принято использовать абзацы без отступа, разделенные пробелами.
• Используйте пробелы не менее 1em между абзацами. Чтобы правильно отделить абзацы друг от друга, используйте эквивалент одной пустой строки пробела между ними. Использование более 1,5 em нарушает поток текста, а использование менее 0,5 em не обеспечивает достаточного разделения.
• Используйте пробелы не менее 0,5 em между элементами списка. Элементы списка также должны быть разделены пробелами, но для них требуется меньше места, чем для абзацев, поскольку индикатор элемента списка также помогает различать соседние элементы.
• Заголовки должны быть ближе к тексту, с которого они начинаются, чем к тексту, который им предшествует. Важно, чтобы заголовки были более визуально связаны с текстом, для которого они являются заголовками, чем текст предыдущего раздела, чтобы уменьшить двусмысленность и когнитивный диссонанс. Используйте как минимум в 1,5 раза больше пробелов над заголовком, чем под ним.
• Текст должен иметь достаточные поля слева и справа . Для бегущего текста требуется правое и левое поля, пропорциональные ширине области просмотра. Используйте отступ не менее 1 единицы между текстом и краем области просмотра при ширине мобильного устройства и не менее 2 единиц на планшете. Для ширины рабочего стола может потребоваться 4-5 единиц минимального горизонтального поля между основным текстом и любыми соседними элементами.

Стиль шрифта

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

• Начертания с засечками могут быть хорошим выбором для длинных текстов. Шрифты с засечками , как правило, предназначены для удобочитаемости. Хотя они наиболее полезны для действительно расширенного чтения, такого как романы, научная литература и эссе, любой сайт, который требует длительных отрезков непрерывного чтения, может выиграть от использования шрифта с засечками.
• Нейтральные лица могут быть хорошим выбором для интерфейсов. Пользовательские интерфейсы — это практическое выражение организации и функциональности сайта. Простой и нейтральный шрифт может помочь пользователю сосредоточиться на использовании интерфейса как инструмента.
• Избегайте длинных разделов, выделенных курсивом или полужирным шрифтом. И курсив, и жирный текст могут ухудшить читабельность. Оба лучше всего использовать для ограниченных участков контраста. Рассмотрите возможность замены длинных разделов, выделенных полужирным шрифтом или курсивом, выноской, заголовком раздела или каким-либо другим способом, позволяющим избежать длинных отрезков стилизованного текста.
• Избегайте длинных фрагментов текста в верхнем регистре. Текст в верхнем регистре оказывает серьезное негативное влияние на удобочитаемость. Если это не предусмотрено законом, рассмотрите возможность использования других типов для любого текста в верхнем регистре, который длиннее нескольких слов.

Межбуквенный интервал

Межбуквенный интервал — это интервал между отдельными буквами в текстовом блоке. Как правило, межбуквенный интервал определяется шрифтовым дизайнером и не должен изменяться. Однако в некоторых ситуациях может потребоваться корректировка межбуквенного интервала.

• Очень маленький текст может использовать более свободный межбуквенный интервал. При очень мелком размере шрифта дополнительный межбуквенный интервал улучшает читаемость. Рассмотрите возможность использования межбуквенного интервала 1 при использовании размера шрифта micro или размера шрифта 1.
• Для очень большого текста можно использовать более узкие межбуквенные интервалы. Уменьшение межбуквенного интервала может улучшить качество больших заголовков. Заголовки с размером шрифта 9+ могут использовать межбуквенный интервал -1. Заголовки с размером шрифта 12+ могут использовать межбуквенный интервал -2. Заголовки с размером шрифта 17+ могут использовать межбуквенный интервал -3.
• Текст, набранный прописными буквами или маленькими заглавными буквами, должен использовать более свободный межбуквенный интервал. Текст в верхнем регистре и маленькие заглавные буквы могут казаться слишком тесными при нормальном межбуквенном интервале. Рассмотрите возможность использования межбуквенного интервала 1 с кнопками в верхнем регистре и межбуквенного интервала 2-3 с более длинными отрезками текста в верхнем регистре или маленькими прописными буквами (например, аббревиатуры или вступления к разделам).

Гарнитуры в комплекте

Source Sans Pro

Source Sans Pro, разработанный Полом Д. Хантом, представляет собой шрифт без засечек с открытым исходным кодом, созданный для удобочитаемости в дизайне пользовательского интерфейса. Source Sans Pro с различными весами, которые легко читаются в любом размере, обеспечивает четкие заголовки, а также хорошо читаемый основной текст.

Вдохновленный американским готическим шрифтом 20-го века, его тонкие, но открытые буквы предлагают чистую и дружелюбную простоту. Расширенные подсказки позволяют Source Sans Pro хорошо отображаться в системах Windows, в которых работает Cleartype, а также в браузерах и на разных устройствах. Кроме того, он поддерживает множество языков и алфавитов, включая западные и европейские языки, вьетнамский язык, романизацию китайского языка пиньинь и язык навахо.

Аа

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Merriweather

Merriweather, разработанный Sorkin Type, представляет собой шрифт с открытым исходным кодом, предназначенный для чтения на экране serif. Этот шрифт идеально подходит для дизайна с высокой плотностью текста: буквы имеют большую высоту по оси x, но остаются относительно небольшими, что обеспечивает отличную читаемость на экранах разных размеров, не занимая дополнительное пространство по горизонтали.

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

Аа

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Public Sans

Public Sans (available on GitHub) is an open-source sans serif typeface designed and maintained by the Design System and derived от Libre Franklin (также доступно на GitHub). Это сильный, нейтральный, основанный на принципах шрифт для текста или отображения, основанный на традиционной американской форме. (Форма Франклина наиболее заметна в двухэтажном дизайне символа «g».) Он использует метрики, аналогичные обычным системным шрифтам, для более плавного прогрессивного улучшения. Он имеет простой, прямой стиль, подходящий для интерфейсов и бегущего текста. Его большая высота по оси x делает его разборчивым при небольших размерах. Он имеет широкий диапазон начертаний — и его более тяжелые начертания имеют более узкий интервал между буквами, чем его более легкие начертания, а это означает, что бегущий текст (который имеет тенденцию быть относительно небольшим) расположен более щедро, а заголовки (которые, как правило, относительно большие) более компактны. Он имеет табличные цифры для выравнивания чисел в таблицах.

Аа

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P R S T U V W X Y Z

0 1 2 3 4 5 6 7 8

ROBOTO MONO MONO

, ROBOTO MONOSPON. Как и другие члены семейства Roboto, шрифты оптимизированы для удобочитаемости на экранах самых разных устройств и в различных средах чтения.

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

Аа

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P R S T U V W X Y Z

0 1 2 3 5 6 7 8

Последние обновления

ЗДЕСЬ СПОСКОЛЬНЫЕ КОД И НАДЕЙЖА. Версия USWDS Влияет на Взлом Описание 2023-03-09 3. 4.0

• Руководство
• Настройки

Нет

Используйте только woff2 в наших объявлениях @font-face . Поскольку современным браузерам нужен только формат шрифта woff2 , мы теперь выводим только шрифты woff2 в наших правилах @font-face . Если вам нужны woff и ttf для совместимости с IE11, установите $theme-font-browser-compatibility на true в настройках. Больше информации: uswds#5108

2022-04-28 3.