Шрифтовая схема сайта: Памятка дизайнеру сайтов / Habr – Памятка дизайнеру сайтов / Habr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tipografika-v-dizayne-sayta-osnovnye-ponyatiya-sekretnaya-informatsiya-iz-kursa-teksterry

Применение шрифтовой схемы — Publisher

Примечание:  Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .

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

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

Применение шрифтовой схемы

1. Выберите Макет страницы и нажмите кнопку шрифты.

   

2. Выберите шрифтовую схему из списка.

Атрибуты текста элемента управления, которые влияют схемы шрифтов

1. Выберите Макет страницы и нажмите кнопку шрифты.

2. Нажмите кнопку Параметры шрифтовой схемы и затем снимите или установите нужные параметры.

Разработка дизайна сайта: использование шрифтов (типографика)

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

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

При изготовлении сайтов желательно применять весь комплекс ниже перечисленных рекомендаций:

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

Требования типографики или что нужно знать о использовании шрифтов:

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

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

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

Наиболее популярными и читабельными шрифтами без засечек принято считать: Rockwell, Helvetica, Futura, Garamond, Bodoni, Frutiger, Trajan, Myriad. Эти шрифты наиболее часто используются при разработке веб сайтов.

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

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

Вас могут так же заинтересовать следующие публикации по веб дизайну:

Вам нужен красивый современный дизайн сайта и выбираете исполнителя?

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

Понятие кегля в современном дизайне

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

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

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

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

← Поделиться с друзьями !

Типографика в веб-дизайне — правила и тренды современной типографики

“Веб-дизайн — это 95% типографики”, — сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

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

1. Чем проще — тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций — не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
2. Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя — любой веб-дизайнер не раздумывая выберет второе.
3. Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать — значит, типографика хромает.
4. Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко — это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
5. Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки — а значит, графика должна быть на службе у контента, а не наоборот.
6. Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты — мир!

История шрифтов в типографике заставляет задуматься. На заре веб-дизайна считалось крутым использовать необычные шрифты по принципу “чем чуднее — тем моднее”. Со временем появилась тенденция к упрощению: сейчас предпочтение отдается простым крупным шрифтам. И обязательно читаемым.

Приведем несколько основных правил использования шрифтов на сайте:

1. Не используйте слишком много шрифтов. Мы все понимаем — хочется сделать свой сайт поярче и поинтереснее, но пожалуйста, остановитесь на двух-трех. Слишком большое количество шрифтов выглядит непрофессионально и нечитабельно. Подумайте о посетителе — легко ему будет подстраиваться под хотелки дизайнера? Да и сочетать много шрифтов будет непросто — как правило, в итоге таких экспериментов получается сборная солянка.

Например, хорошо сочетаются шрифты Georgia и Verdana — они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер — не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

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

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” — в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

1. Играйте на контрасте. Цвет текста и фона для него должны различаться. Серый на сереньком — так себе тренд. Чем больше бросается в глаза контраст — тем гарантированнее он привлечет внимание пользователей. Чем меньше шрифт, тем более он должен быть контрастным, и наоборот.

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

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

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

Оформление текста

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

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

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню — ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы — сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

3. Забудьте про капслок! Тренд выделять главное капсом давно умер: сейчас большие буквы воспринимаются как крик и вызывают у читателя лишь негатив. Большие буквы уместны лишь в заголовках, да и то не всегда. Привлекать внимание с помощью капса уж точно не рекомендуется.

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

Эксперты говорят, что оптимальное количество символов на строку — не более 60. Если меньше — читатель будет слишком быстро возвращаться в начало строки и сбивать ритм чтения. Если больше — сложно будет сосредоточиться на тексте: пока подойдешь к концу строки, забудешь о том, что написано в ее начале.

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов — больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн — наше все.

5. Следите за межстрочным интервалом. Чем он больше — тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

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

• привлекает и удерживает внимание посетителя. Сложно не заметить крупные шрифты, яркие цвета и особое расположение самого важного текста на странице. На сайте интернет-магазина, например, таким текстом будет призыв к действию, информация о скидках и поступлении новых коллекций. На новостном сайте — самая актуальная в данный момент статья. Большой текст — как неоновая надпись в небе: ну посмотри же на меня, прочитай меня, выбери меня, купи меня;
• вызывает эмоции. Если написать одну и ту же фразу мелким и крупным шрифтом — посетитель стопроцентно отдаст предпочтение второму варианту. Вопрос еще и в том, как написать — если удастся воздействовать на чувства посетителя — велик шанс, что он вернется и станет вашим постоянным посетителем. Если за громким слоганом стоит личность создателя сайта — эффект может быть ошеломительным. Главное — не только сказать, но и кем это сказано;
• позволяет определить главное. Все слышали про эффект баннерной слепоты — когда посетитель бегло сканирует взглядом текст, не задерживаясь на отдельных элементах. Крупный заголовок или рекламный баннер позволяет отделить зерна от плевел и остановить взгляд на самом главном. Заголовок помельче — информация второго уровня важности. Ну и так далее.

Большие шрифты

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

Сломанные сетки

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

Больше движения!

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

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

Как создать устойчивую и гармоничную систему отступов в дизайне для более быстрой разработки

Перевод «Я люблю ИП»

Недавно я работала над созданием системы отступов и размеров для одного продукта в сфере здравоохранения, чтобы улучшить читабельность текста и добиться последовательности на всех страницах. Я вывела три правила для отступов (Правило трёх «К») и четыре размера (16px, 8px, 4px, 2px), которые работали гармонично с новой системой типографики.

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

Проблема

• Мы использовали отступы в 5px, 10px, 15px, 20px, при этом у нас не было чётких правил, когда использовать каждое из этих значений.
• Отступы (внешние margin и внутренние padding) — это всего лишь один из элементов пазла. Интерлиньяж также добавляет достаточно пространства пользовательскому интерфейсу. Раньше в дизайне мы не указывали интерлиньяж, и разработчикам приходилось догадываться, какие значения установить и какие отступы добавить, чтобы дизайн выглядел более или менее одинаково. Это привело к разным отступам по всему продукту.
• Одни и те же компоненты и блоки контента выглядели по разному. В результате в дизайне отсутствовала стабильность и это мешало читабельности текста из-за плотности данных.

Располагая элементы вертикально, дизайнер не может оставить это на волю случая или неопределённости. Слишком часто дизайнеры полагаются на вертикальные отступы, которые есть по умолчанию в Photoshop (5px, 10px). Такой подход допустим при создании горизонтального ритма, если колонки являются кратными 10px, но вряд ли это будет соответствовать типографике.

Роберт Брингхёрст, автор книги «Основы стиля в типографике»

Интерфейс до и после введения системы отступов

Начало

Ещё раз приведу слова Роберта Брингхёрста:

Не создавайте без шкалы. Именно шрифт должен быть той мерой, которая определяет всё остальное.

Итак, шрифт и интерлиньяж — это основа, на которой мы будем строить нашу систему расстояний.

Шаг 1. Определите интерлиньяж для основного текста (и сетку, которая будет для вас работать)

Я начала с гипотезы, что нам подойдёт популярная 8-пиксельная сетка (т. е. расстояния, которые кратны или делятся на 8). В качестве эксперимента я взяла основной шрифт размером 13px и интерлиньяж размером 16px и 24px. Но эти значения не подошли. В первом случае, расстояния были слишком маленькие, во втором — слишком большие.

13/16px + отступы 8px сверху и снизу = 48px ширина строки. Слишком тесно!
13/24px + отступы 8px сверху и снизу = 64px ширина строки. Слишком свободно!

Затем я решила соединить шрифт размером 13px с чётными значениями от 16 до 24px в качестве интерлиньяжа. Сначала я попробовала 18px. Если бы это сработало, то это означало, что я буду применять 6-пиксельную сетку (с расстояниями в 2, 3, 6, 12, 18, 24…). Затем я попробовала интерлиньяж в 20px, и он отлично подошёл. Значит, я буду применять 4-пиксельную сетку (с расстояниями в 2, 4, 8, 12, 16, 20…).

13/18px + отступы 6px сверху и снизу = 48px ширина строки. Всё ещё слишком тесно!
13/20px + отступы 8px сверху и снизу = 56px ширина строки. В самый раз!

Шаг 2. Закон Хика и геометрическая прогрессия для определения расстояний

Чем больше количество вариантов, тем сложнее сделать выбор.

Закон Хика

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

• Все расстояния должны быть кратны базовому числу сетки, например, в моём случае, 4. Значит, я могу выбрать любые значения из этого ряда: 2, 4, 8, 12, 16, 20, 24, 28…
• Обычно 4–5 вариантов будет достаточно даже для сложных корпоративных продуктов. Но если вам действительно нужно, то можно выбрать дополнительные значения.
• Я решила выбрать первые четыре значения, полученные с помощью геометрической прогрессии, так как это даёт более визуально ощутимые интервалы (чтобы подчеркнуть иерархию). Итак, я получила следующие цифры: 2, 4, 8, 16.

Подробнее о том, как выбирать значения, можно почитать в этом посте от Нейтана Кёртиса (перевод).

Как использовать эти значения для создания устойчивой системы? На помощь приходит Правило трёх «К»

На меня оказали большое влияние термины, которые представил в своей статье Нейтан: внешние отступы (Insets), стеки (Stacks) и строчные отступы (Inline). Я решила добавить к этому ещё один слой, чтобы моей команде было легче понимать, где используется каждый из этих элементов. Я разбила все правила для расстояний на три группы, начинающиеся на «К»: Контейнеры, Контент и Компоненты.

• В контейнерах используется квадратный отступ (16px) (Square Inset).
• В контенте используются стеки (сверху — 2px, снизу — 0, 4, 8, 16px в зависимости от вида контента).
• В компонентах используются строчные отступы (в большинстве случаев — 8px, редко — 4px, когда элементы связаны).

Первая «К» — Правила для Контейнеров

Контейнеры — это рамки в вашем интерфейсе, которые содержат внутри себя контент. Обычно это страницы, карточки, модальные окна, панели и т. д. Раз они стоят на самом верху иерархии, необходимо, чтобы у них были самые большие отступы со всех сторон (в моём случае — 16px). Нейтан называет это квадратным отступом. Совет: никогда не включайте границу (border) в ваши расчёты (в этой статье хорошо объясняется почему).

Страница, страница с карточкой, панель с деталями, модальное окно

Вторая «К» — Правила для Контента

Контент живёт внутри контейнера. Контент содержит:

• заголовки (h2, h3, h4, h5, h5),
• разные данные в виде абзацев, списков, форм, таблиц (они стоят ниже по иерархии, чем заголовки, поэтому в дальнейшем я буду называть их «узел»).

Контент выстраивается вертикально при помощи отступов. Но интерлиньяж (расстояние между строк) также добавляет пространство. Нейтан рассказывает в своей статье, как этого избежать при помощи mixin. Но я так и не смогла разобраться, как использовать этот подход на постоянной основе, поэтому придумала свой с учётом и интерлиньяжа, и отступов одновременно. Вот он:

А) Сначала разберитесь с отступами для заголовков

Как видно на рисунке ниже я начала с двух вариантов интерлиньяжа для заголовков. Соотношение основного шрифта (13px) к основному интерлиньяжу (20px) равно ~ 1,54. Берём это значение, чтобы посчитать интерлиньяж для остальных шрифтов. И округляем до ближайших значений, кратных 4 (базовое число сетки).

Чтобы облегчить выбор между двумя вариантами, я решила использовать интерлиньяж 1,5 и выше. Я всё ещё сомневалась, что лучше выбрать, но после некоторых поисков мы с командой определились, какой вариант нам подходит.

Рассчитываем соотношение интерлиньяжа. Выбираем варианты со значением 1,5 и выше. Путём поисков находим окончательное решение.

Немного о самих поисках

Я начала с заголовка h2 и попробовала разные отступы 0px, 2px, 4px, 8px. Большинство отступов при интерлиньяже 36px были слишком узкими. Но отступ в 4px при интерлиньяже 40px был как раз тем, что нужно.

Затем я перешла к h3. В нашем продукте h3 — это первый заголовок в контейнере с белой страницей. По правилу для контейнеров первый заголовок h3 получил сверху отступ в 16px. Я решила сделать такой же отступ перед всеми заголовками h3, так как в этом случае хорошо видна иерархия между секциями.

Применяем правило для контейнеров и делаем по краям отступ в 16px. Делаем отступ 16px между секциями. Если между секциями сделать отступ 8px, то иерархия теряется.

Далее я экспериментировала со всеми отступами (от 0 до 8px) между заголовками от h3 до h5 и узлами контента (абзацами, списками, формами, таблицами). Отступы в 2px и 4px были достаточно близки, но нам всё-таки показалось, что отступ в 2px смотрится немного лучше.

Расстояние между заголовком и узлом контента пропорционально расстояниям внутри узла.

Стеки из заголовков, расстояния в 2px и 4px

Б) Затем разберитесь с отступами внутри узлов

В нашем продукте четыре основных вида контента:

• таблицы (около 50 %),
• списки (около 30 %),
• формы (около 15 %),
• абзацы (ещё 5 %).

Я начала с самого простого вида контента — с абзаца.

Отступы внутри абзаца

Это самое простое — просто сделайте так, чтобы расстояние между двумя линиями внутри абзаца было равно 0px. Любые элементы внутри абзаца (например, две отдельные строки в таблице), которые выглядели не как список, получали отступ в 0px.

Настройки для абзацев в Sketch

Отступы между двумя абзацами

Моим первым желанием было использовать в качестве отступа между абзацами расстояние равное интерлиньяжу — 20px. Но затем я наткнулась на рекомендации WCAG SC 1.4.8, где сказано: «Интерлиньяж внутри абзаца должен равняться 150 %. Расстояние между абзацами должно быть (минимум) в 1,5 раза больше, чем интерлиньяж — под этим мы имеем в виду, что расстояние от верхней линии последней строки первого абзаца до верхней линии первой строки следующего абзаца должно быть равно 250 %». Предположив, что эти проценты вычисляются из базового шрифта в 13px, я рассчитала значение для расстояния между абзацами:

13px X 250% — 13px X 150% = 13px.

Это значение будет указано в CSS как margin-bottom: 13px. Но у нас нет такого отступа среди тех, которые мы определили на шаге 2. Поэтому я взяла ближайшее значение в 16px.

Определяем расстояние между абзацами на основании WCAG SC 1.4.8

Настройки для отступов между абзацами в Sketch

Если я сомневаюсь в расчётах, я всегда проверяю их визуально. Расстояние между абзацами в 16px выглядит лучше по сравнению с другими вариантами. (Мне показалось, что 12px подходит ещё лучше, но я стала вводить ещё один отступ только для таких случаев, так как в нашем продукте не так много абзацев, а абзацев, идущих друг за другом — тем более.)

Отступы между элементами списка

Список — это узел, который состоит из нескольких элементов однородных данных. Раз все эти элементы группируются в списке, важно, чтобы расстояние между ними было меньше, чем расстояние между абзацами (например, 16px), которые обычно включают разнородные данные. В то же время элементы списка должны отделяться друг от друга, иначе они будут выглядеть как один абзац. Я взяла значения от 0 до 16px, их было всего три — 2, 4 и 8px. Отступ в 4px выглядел лучше всего для иерархии.

Расстояние между элементами списка в 2, 4 и 8px

Отступы между двумя инпутами с лейблами

Поля внутри формы складываются в стеки один за другим.

Расстояние в 4px выглядит слишком тесно, 16px — слишком свободно, 8px — в самый раз.

Отступы между двумя инпутами без лейблов

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

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

В этом случае, в зависимости от ситуации, используется разное расстояние. Если инпуты относятся к одному объекту, то лучше использовать расстояние в 8px. Если логически они относятся к разным вещам, то лучше использовать 16px, как и в случае с абзацами.

Отступы внутри таблиц

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

Расстояние между текстом и границей таблицы в 4px — слишком тесно, 8px — в самый раз.

Третья «К» — Правила для Компонентов

Компоненты — это кнопки, инпуты, иконки и т. д. Обычно они располагаются друг за другом горизонтально (в строке). Все компоненты имеют размер кратный 4 (и 8). Поэтому высота кнопок и инпутов составляет 24px (вместе с границей — 26px). Когда шрифт и все компоненты лежат на сетке базовых линий и имеют пропорциональный размер, то весь дизайн становится гармоничным.

Отступы между двумя компонентами

Я придерживалась простого правила использовать отступ в 8px в большинстве случаев между двумя компонентами. Иногда я использовала отступ в 4px, чтобы показать более тесную связь между ними (по закону близости в гештальт-психологии).

Расстояние в 8px (фиолетового цвета) и 4px (оранжевого цвета)

Отступы внутри компонентов

Для всех компонентов я использовала отступы в 8px с правой и с левой стороны.

Кнопка и инпут высотой 26px (включая границу 1px сверху и снизу и отступы в 8px по бокам)

Отступы внутри компонентов с иконками

Ещё раз, основываясь на законе близости, я сделала отступ между иконками внутри компонента в 4px, вместо 8px.

Отступы между компонентами и иконками

Если иконка относится к компоненту, то она размещается на расстоянии 4px от него, чтобы показать связь с этим компонентом (по закону близости). Если иконка относится к группе компонентов, то она располагается на расстоянии 8px, чтобы показать связь именно с группой, а не с отдельным компонентом.

Заключение

Используя данные принципы:

• Вы создадите систему отступов с ограниченным количеством вариантов и ограниченными правилами применения (закон Хика), которые будет легко запомнить.
• В вашем интерфейсе вы будете использовать расстояния, которые помогают передать визуальную иерархию и соответствуют рекомендациям WCAG 1.4.8. Это позволит людям с разными возможностями получать информацию с вашего сайта.
• Это ускорит процесс разработки, так как разработчики будут знать правила применения отступов и смогут правильно перенести их из макета.
• Дизайнерам не нужно будет поправлять вёрстку, разработчикам не нужно будет изучать макеты с помощью таких инструментов как Zeplin.

Полезные ссылки

Если у вас есть ссылки по теме помимо тех, которые я уже упомянула в статье, присылайте их в комментариях.

НОУ ИНТУИТ | Лекция | Цветовые схемы и макеты дизайна

Аннотация: Основная информация о гарнитурах шрифтов. Определение гарнитуры шрифта для заголовков, подзаголовков и основного текста. Некоторые секреты выравнивания. Советы по подбору различных цветовых комбинаций для Web-сайта. Поэтапное создание макета сайта. Тестирование Web-сайта перед переходом в рабочий режим

Введение

После того как Web-дизайнер представил архитектуру сайта, или каркас, клиенту для утверждения, следующий шаг состоит в определении внешнего вида сайта с помощью цвета и графики. В этой лекции будет показано, как сохранить этот процесс насколько возможно простым, как для разработчика, так и для клиента. Я придерживаюсь философии KISS (Keep Its Simple Stupid) — Будь проще. Имеется две причины для использования такой тактики: Первая, жизнь и так достаточно сложна, зачем усложнять еще; вторая, простой план помогает также сохранить сайт более доступным и легче используемым для всех заинтересованных сторон. В этой лекции будет рассмотрено:

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

Лекция имеет следующее содержание:

• Первый шаг: рассмотрение шрифтового оформления
  • О гарнитурах шрифтов или шрифтах
  • О четкости и удобочитаемости
• Второй шаг: добавление шрифтового оформления
  • Внимание к выравниванию
• Третий шаг: цвет
• Четвертый шаг: тестирование
• Заключение
• Контрольные вопросы

Первый шаг: рассмотрение шрифтового оформления

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

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

Одним из первых шагов по окончательному оформлению Web-дизайна является решение о шрифтах (http://www.w3.org/TR/REC-CSS2/fonts.html), которые будут использоваться на Web-сайте. Многие исследования показывают, что множество гарнитур шрифта на Web-сайте может путать читателя. С другой стороны, сайт, который использует везде только один шрифт, кажется безвкусным. Потому я советую использовать одну гарнитуру шрифта для заголовков и подзаголовков и другую гарнитуру шрифта для основного текста, особенно если планируется добавить на сайт рекламу. Использование одного шрифта для заголовков и другого для основного текста на всем Web-сайте добавит сайту целостность, и позволит также читателю различать заголовки и основной текст при просмотре Web-страницы. Реклама добавит разнообразие, так как никогда невозможно знать заранее, какие гарнитуры или варианты гарнитуры рекламодатель может использовать в баннере или текстовой рекламе. Лично я обычно использую шрифт Verdana для основного текста и Times Roman или Georgia для заголовков, и я придерживаюсь использования этих двух шрифтов и их вариантов в течение всей моей карьеры Web-дизайнера. Гарнитуры шрифтов Times Roman или Georgia используют засечки, а шрифт Verdana засечек не имеет. Как вы скоро увидите, я решила оставить для основного текста шрифт Verdana, но так как логотип был создан с помощью Arial Black, я также использовала эту гарнитуру шрифта без засечек для всех заголовков. Иногда необходимо нарушать свои собственные правила, и эта компоновка предоставляет простой пример такого случая. Но сначала позвольте мне объяснить различие между двумя гарнитурами шрифтов и почему я придерживаюсь такого простого выбора типа.

О гарнитурах шрифтов или шрифтах

Существует четыре следующие основные типы шрифтов:

1. Шрифт с засечками (serif): Любая гарнитура шрифта, которая содержит завершающие штрихи, расширяющиеся или сужающиеся концы, или имеет реально отсеченные окончания (включая прямоугольные засечки). В ходе истории шрифт с засечками был выбран для печати основного текста, так как его легко читать на печатной странице. Но Web отличается от печати, и некоторые исследования (http://www.wilsonweb.com/wmt6/html-email-fonts.htm) по удобочитаемости шрифта (http://www.webaim.org/techniques/fonts/#readability) показывают, что некоторые шрифты без засечек читать легче, чем такие как шрифт, показанный на рисунке 10.1, когда он используется для основного текста на странице Web.
   Рис. 10.1. Пример типа шрифта с засечками, Times New Roman, нормального (не жирного и не курсива), размером 18 pt
2. Без засечек (sans-serif): Любая гарнитура шрифта, конечные штрихи которой не имеют никаких расширений, пересекающих штрихов, или других украшений. Хотя некоторые авторы (http://www.hgrebdes.com/typefaces/fontresearch.php) утверждают, что исследования по удобочитаемости шрифтов не вызывают доверия, я заметила, что эти сайты используют шрифт без засечек для основного текста. Даже статьи, которые утверждают, что гарнитуры шрифтов с засечками более удобочитаемы (http://www.linotype.com/2258-16905/aboutlegibility.html), используют шрифт без засечек в основном тексте своей Web-страницы. Поэтому в этом вопросе я придерживаюсь общего мнения — использую шрифт без засечек, такой как показан на рисунке 10.2, так как он стал традиционной гарнитурой шрифта основного текста для Web.
   Рис. 10.2. Пример шрифта без засечек, Verdana, нормального, размером 18 pt
3. Рукописный или курсив: Эти шрифты обычно выглядят по большей части как написанные пером или кистью, а не как печатные буквы, как, например, показано на рисунке 10.3 ниже. Эти шрифты будут включать те, которые кажутся рукописными, даже хотя и не являются курсивом. Одной из причин отказа от использования этого типа шрифта на Web-странице, особенно в основном тексте, является трудность чтения в больших отрывках (подумайте о том, как трудно было бы читать написанное от руки письмо, или манускрипт двенадцатого века, который можно увидеть в музее). Кроме того, не все браузеры выводят один и тот же шрифт, поэтому если вы решите использовать рукописный и курсивный шрифт, то он может быть выведен как шрифт с засечками в каком-то другом браузере.
   Рис. 10.3. Пример рукописного шрифта Staccato, размером 18 pt
4. Специальные шрифты, включая моноширинный: Единственным критерием моноширинного шрифта является единая фиксированная ширина всех глифов, аналогично тому, как может выглядеть машинописная страница. Другие шрифты могут иметь фантастический внешний вид, как показанный на рисунке 10.4 ниже, и эти шрифты используются единственно с декоративной целью. Моноширинные шрифты нашли свое применение на Web-сайте, особенно при выводе программного кода (http://www.lowing.org/fonts/). Эта гарнитура шрифта часто используется для такой цели, так как моноширинный шрифт четко показывает каждую букву и символ, используемые в коде.
   Рис. 10.4. Пример специального шрифта, Jokewood, размером 18 pt

Взгляд на изображения выше показывает, что не все типы шрифта создаются одинаковыми, даже если создаются одного размера в пунктах. Размер в пунктах определяет высоту букв, и некоторые шрифты будут больше при 18 пунктах, чем другие. Существуют также и другие различия, такие как расстояние между буквами и словами, или тот факт, что некоторые гарнитуры шрифтов, такие как Jokewood, не имеют букв нижнего регистра. Но легко можно видеть, что шрифты Jokewood и Staccato было бы трудно читать как основной текст. Эти шрифты могут найти применение в небольшой области, такой как заголовки или в рекламных объявлениях.

Один из моментов для рассмотрения состоит в том, что эти шрифты могут выглядеть по разному во всех браузерах, так как различные браузеры остаются по сути несовместимыми. Вы могли обратить внимание на мой комментарий выше, что «не все браузеры выводят одни и те же шрифты». Причина этой проблемы состоит в том, что не все операционные системы поддерживают одни и те же шрифты. Они могут поддерживать одни и те же шрифты, но вариант, толщина и другие факторы могут представляться по разному в том или ином браузере. В связи с этим для вывода Web-страницы можно использовать базовый шрифт (http://www.upsdell.com/BrowserNews/res_fonts.htm), или просто «serif» или «sans-serif». Можно также использовать базовое имя и имя выбранного шрифта и надеяться на лучшее, так как пользователи в некоторых случаях также имеют возможность изменить шрифт или то, как он выглядит.

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

Именно по этой причине, как Web-дизайнер, вы должны понять тот факт, что Web является — во всех отношениях — по сути пластичным форматом. При дизайне Web-сайта вы можете контролировать многое. Тип шрифта является одним из объектов, над которым вы имеете некоторый контроль, но только если вы сохраняете его как можно более простым. И именно это является причиной, почему я постоянно все эти годы использую шрифт Verdana для основного текста и Times Roman или Georgia для заголовков.

Помня об этом, дизайнеры шрифтов и программисты постоянно пытаются найти способы сделать шрифты более читаемыми и красивыми (http://brainstormsandraves.com/articles/typography/webfonts/). Поэтому принимайте сказанное с некоторой долей критики и пробуйте что-нибудь новое, если считаете, что это будет работать. Достаточно скоро вы обнаружите, получится это или нет, когда протестируете самостоятельно Web-страницу на ряде браузеров (что будет показано дальше в этой лекции).

О разборчивости и удобочитаемости

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

1. Используемый шрифт достаточно большой, чтобы его можно было читать с различным разрешением браузера. Хотя пользователи имеют в некоторых браузерах (таких как Opera) средства для изменения размера шрифта, вы можете попробовать проверить, что используемые шрифты настраиваются для различного разрешения браузера (http://www.456bereastreet.com/archive/200611/ resolution_vs_browser_size_vs_fixed_or_adaptive_width/). Одним из способов сделать это является задание размера шрифтов в процентах (http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_fontsizes.hcsp) или ems, а не высотой в пикселях (для этого используется CSS).
2. Обеспечивается достаточный контраст между фоном и основным текстом. Белый или светлый шрифт на черном фоне для больших кусков основного текста может переутомлять глаза (http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/), однако — если вы хотите это использовать, попробуйте предоставить альтернативный stylesheet, чтобы пользователи могли читать вместо этого темную копию на светлом фоне.
3. Заголовки на самом деле отличаются от основного текста. Возможность разбить большие куски текста с помощью заголовков и подзаголовков, или с помощью списков (как этот) облегчает пользователям просмотр страницы, чтобы найти на ней важный материал. Разбиение страницы изображениями также хорошо работает, но убедитесь, что эти изображения подходят к основному тексту. Иначе вы просто впустую заполняете полосу пропускания.
4. Исключается растягивание основного текста на всю ширину экрана с помощью текучей компоновки. Попробуйте прочитать параграф, который заполняет все горизонтальное пространство на большом мониторе — вам это быстро надоест, так как приходится использовать и глаза, и поворачивать голову при чтении текста от одной стороны экрана до другой. Просмотрите следующую Web-страницу по удобочитаемости (http://www.bastoky.com/Readability.htm), которая с моей точки зрения является лучшей, что я видела до сих пор, чтобы проиллюстрировать типичную удобную для чтения ширину основного текста (иллюстрация, показанная ниже на рисунке 10.5). Эта страница поясняет также подробно, как люди читают страницу, независимо от того будет ли это Web или печатный материал. Показанное ниже изображение было получено на двадцати-четырех дюймовом экране с разрешением 1920 x 1200. Сравните это изображение с тем, что вы увидите на своем экране, когда перейдете по предыдущей ссылке. Затем проверьте разрешение своего экрана, чтобы увидеть различие. Иногда фиксированная компоновка является хорошим решением, так как она будет определять параметры области основного текста для удобства читателей. Не беспокойтесь обо всем свободном пространстве вокруг этой области основного текста (как на показанном ниже изображении). Создайте спокойный фон, который не отвлекает от дизайна текста, и вы сделаете хорошую услугу для тех, кто владеет большими экранами.

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

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

как и зачем с ней работать — статьи на Skillbox

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

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

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

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

Представьте, что на свете был бы лишь один шрифт. Как бы мы отличали «Пятерочку» от «Магнита», «Бородинский хлеб» от «Николаевского», «Медузу» от «Комсомолки»? Только по названию: каждый раз нам бы пришлось читать название целиком.

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

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

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

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

Антиква — так называют шрифты с засечками. Нередко в названии шрифтов этой группы можно найти слово serif (лат. засечка). Засечки — это короткие штрихи, которые обрамляют основные элементы букв. Антикву используют для набора основного текста в книгах и оформления текстов, заголовков в интернете.

---

Брусковый шрифт — подтип антиквы, с элементами гротеска. У брускового шрифта есть засечки, но не округлые изящные, а мощные рубленые, словно высеченные из камня. Такие шрифты впервые возникли в Англии и применялись в начале XIX века. Сначала ими набирали титульные страницы и заголовки, но в XX веке их начали активно использовать для газетного набора.

---

Гротеск — шрифт без засечек. В названии этих гарнитур часто встречается сочетание sans serif (лат. без засечек). Они появились в конце XVIII века и изначально применялись в рекламе как акцидентные. В XX веке с развитием новой школы типографики их начали использоваться для набора текста.

---

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

---

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

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

• Какой имидж у вашей компании?
• Какие качества ценят клиенты?
• Какие качества вашей компании вы хотите подчеркнуть: надежность, креативность, стабильность?
• Опишите свой бренд в трех словах. Какие бы это были слова?
• Кто ваш идеальный клиент?

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

Не используйте причудливые шрифты. Если у вас недостаточно опыта и знаний, не используйте необычные, плохо читаемые шрифты. Будьте проще, чтобы не случился шрифтовой скандал, как на чемпионате мира по футболу в России.

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

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

Используйте простые и стандартные шрифты. Не слушайте тех, кто говорит, что стандартные шрифты это скучно. С их помощью можно создавать сильные знаки. Пример простой типографики: логотип студии DILETTANT. Денис Башев набрал его с помощью Arial.

Даже Arial может выглядеть хорошо. Лучше пусть текст будем скучным, чем уродливым или нечитабельным.

У многих зарубежных компаний в основе логотипа лежит шрифт Helvetica, например, — старый логотип Microsoft, Lush, Nestle и Toyota.

Не ориентируйтесь на конкурентов. По статистике Tasty Placement, 63% мировых брендов используют гротески, из них треть — Helvetica. Это не значит, что вы должны писать все тексты на сайте и упаковке тем же шрифтом. Контраст не должен быть кардинальным. Достаточно взять шрифт с более яркими выносными элементами или другим типом засечек, выбрать более открытый гротеск, заменить шрифт на антикву или брусковый.

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

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

Издание Meduza использует отдельные шрифты для разных рубрик: для новостей — антиква, для историй — гротеск.

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

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

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

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

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

Издание «Такие дела» использует для лонгридов два шрифта: гротеск для заголовков, антикву для основного текста. Вопросы журналиста выделяют болдом.

Начинающему дизайнеру сложно разобраться, какие шрифты сочетаются, а какие нет. Можно ли, например, совместно использовать Times New Roman и Arial (нет, нельзя). Специальные сервисы помогут понять, какие шрифты хорошо работают вместе, а какие лучше не ставить рядом.

Font Pair — сервис позволяет посмотреть, как сочетаются между собой основные шрифты Google Fonts. Вы можете комбинировать шрифты для классического стиля «антиква — антиква» и для современного дизайна «гротеск — гротеск».

Typotheque — идеальный инструмент для работы со шрифтами на латинице. Кириллических начертаний здесь немного — всего 37, зато латинских — 72. Кроме этого, есть еще шрифты для арабского, иврита и греческого.

Just My Type — инструмент позволяет загрузить шрифты из сервисов TypeKit, H&FJ и проверить на совместимость.

Fast Print — шпаргалка для дизайнеров по совместимости шрифтов Google Fonts. Работает как таблица Пифагора: выбираете два шрифта и смотрите, какой цвет стоит на их пересечении. Белый — шрифты хорошо сочетаются; светло-серый — нежелательно сочетать эти шрифты; темно-серый — следует избегать сочетания этих шрифтов.

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

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

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

Webfonts — русскоязычный ресурс с большой библиотекой бесплатных качественных шрифтов для работы в Adobe Photoshop или текста на сайте.

Dafont — одна из наиболее богатых коллекций бесплатных шрифтов. Вы наверняка найдете подходящий вариант среди20 тыс. наименований, представленных на сайте.

1001 Free Fonts — широкий выбор бесплатных шрифтов и аналогов официальных.

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

Font Space — сайт с рукописными и акцидентными шрифтами.

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

Font Base — приложение, которое позволяет брать шрифты в аренду, систематизировать шрифты по папкам и проектам, разрабатывать свои начертания. Подписка стоит3 доллара в месяц.

Бесплатные шрифты — группа во «ВКонтакте» с бесплатными шрифтами.

Типографика — основа, с которой стоит начинать в дизайне. На курсе «Веб дизайн с 0 до PRO» вы сможете подробнее узнать, как с помощью типографики создавать узнаваемый дизайн и привлекать внимание пользователей, как подбирать шрифтовые пары, верстать текст по сетке и делать его удобным для чтения.

Курс «Веб-дизайн с 0 до PRO»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы