Сегодня, когда большую часть информации мы потребляем онлайн, особенно важно научиться доносить идеи наглядно. Разработка дизайна сайта, создание презентации, написание рабочего документа включают работу с типографикой. Давайте разберёмся, что это такое и как использовать один из важнейших элементов веб-дизайна для придания большей образности своим мыслям.
Что такое типографика
Типографика в веб-дизайне — это искусство оформления текста. Сюда относятся все инструменты, которые помогают подать информацию красиво, читаемо, понятно, словом, так, чтобы за минимальное время читатель смог обработать максимум данных.
Сама по себе информация, даже набранная в виде текста, выглядит сухо. Использование правил типографики помогает быстрее ориентироваться в тексте, вычленять ключевые идеи, посылы, смыслы, формировать запоминающиеся ассоциации, усиливать эффект от информации при помощи грамотной её подачи. Типографика пронизывает всю нашу жизнь: очень многие предметы обихода были разработаны именно дизайнерами и теперь вызывают устойчивые ассоциации.
Читая этот шрифт, можно ощутить нарастающий гул поезда и вибрацию на платформе метро:
А такая надпись мысленно перенесёт вас на пятьдесят лет назад, во времена советского прошлого:
Именно поэтому многие современные рестораны и закусочные используют похожий шрифт, чтобы создать ассоциацию «Советское = домашнее = проверенное = атмосферное». Например, сервис доставки еды в Нижнем Новгороде:
С помощью инструментов дизайна и, в частности, основ типографики в нашем сознании закрепляются устойчивые образы, которые могут характеризовать целую эпоху или сферу жизни: церковный шрифт, шрифт из граффити, дизайн упаковки сгущёнки как воспоминание о детстве.
Давайте разберёмся, как создать прочную связку «текст — оформление», чтобы максимально полно и ёмко выразить свою мысль в статье, на сайте, в рекламной рассылке, пригласительном письме и любой другой форме текста.
А если вам интересно самостоятельно создавать креативные визуальные решения, можно записаться на курс «Ого, я дизайнер!» на образовательной платформе Edutoria или поискать аналогичные в сети — отличный способ монетизировать своё увлечение.
Из чего состоит типографика
Как вы уже могли заметить, важную роль в оформлении текста играет шрифт. Но есть и другие параметры: разметка страницы, наличие пустого пространства, расположение объектов, расстояние между символами, цветовая палитра. Разберёмся в терминах типографики вместе.
Как правило, всё происходит на прототипе страницы (он же план-эскиз или mockup) — это основное рабочее поле веб-дизайнера, каркас, на котором создаётся оформление страницы.
Как только дизайнер заполняет прототип содержимым, появляется макет:
Макет можно создать в специальных приложениях (например, Tilda, Supa и другие), в текстовом редакторе или даже на обычном белом листе бумаги — выбирайте любой удобный вариант и начинайте творить магию.
Правила типографики
Положение каждого объекта должно быть чем-то определено. Что бы вы ни делали — макет сайта, визитку, сториз для Телеграма, презентацию, приглашение или флаер — сначала представьте в голове готовую картинку. В этом помогут несколько общих принципов.
Сделайте поля
Поля — это элемент, который задаёт общий стандарт для всего макета. Определите размер рамки, внутри которой будет находиться контент. Наличие полей помогает визуально отделить информацию от «внешнего мира».
На размер полей влияет предназначение вашего материала. Если вы оформляете текст для соцсетей, адаптируйте его под разные устройства — так поля помогут сгладить разницу между неодинаковой шириной смартфонов у ваших читателей. Если планируете печатать документ, оставьте поля с запасом, чтобы даже при кривой печати весь текст остался на листе. В некоторых документах поля с левой стороны листа делают больше, чтобы впоследствии сшить или склеить страницы документа без потери содержимого. Например, в дипломах и курсовых работах:
Первая джедайская техника
Оставьте в нижней части макета чуть больше пустого пространства, чем сверху. Так устроен наш глаз — снизу важно иметь небольшой запас свободного пространства. То же самое работает и при расположении объекта «ровно посередине» — на самом деле, этот эффект будет достигнут только если расположить элемент чуть-чуть выше центра.
Вся дальнейшая работа происходит уже внутри очерченного пространства — поля неприкосновенны.
Добавьте воздух
Большое полотно текста сложно читать — глазу не за что зацепиться. Этим приёмом иногда пользуются студенты, которые хотят скрыть за объёмом плохо проработанное содержание. Но если вы пишете для сайта компании, важно помочь читателю ухватить суть.
Как это сделать?
- Разбейте текст на смысловые фрагменты. Один абзац — одна мысль. Добавьте пустое пространство между.
- Внутри абзаца важно выбрать интерлиньяж — расстояние между строками (он же межстрочный интервал).
- Расстояние между буквами тоже имеет значение.
Ещё можно расположить текст блоками или колонками, это поможет визуально сгруппировать мысли или, наоборот, отделить их друг от друга:
Но не усложняйте без надобности — при каждом действии важно руководствоваться принципом «любое решение должно быть чем-то обосновано».
Выровняйте
Если нет очевидной причины использовать другое решение, выравнивайте текст по левому краю — это привычно глазу и не вызывает вопросов. В больших текстовых документах можно делать выравнивание по ширине, а в электронной версии лучше не стоит.
Длина строки имеет значение:
Чтобы текст смотрелся красиво и читаемо, важно учесть 3 пункта:
- Перенесите предлоги и все короткие слова на новую строку.
- Уберите «висящие хвосты» — длинные одиночные строки текста.
- Следите за шириной текстового блока: слишком короткий и слишком длинный не подходят.
Шпаргалка для самопроверки есть в иллюстрации выше, сохраняйте.
Раскрасьте
Используйте в тексте контрастные цвета. Классика — чёрные буквы и белый фон, но и здесь есть интересный момент.
Вторая джедайская техника
Если текста много, глаз устаёт от резких контрастов. В этом случае лучше использовать более мягкие оттенки: темно-сёрый или коричневый для текста, бежевый или любой светлый для фона. Главное ― проверьте, что всё хорошо читается.
Подробнее о том, как подбирать цвета для оформления, читайте в нашей статье про круг Иттена, удачные комбинации цветов и полезные инструменты.
Как выбрать шрифт
Все шрифты можно разделить на четыре категории.
Антиква — шрифты с засечками
Используются в книгах и печатных документах, подходят для текстов большого объёма. Но если размер букв маленький, бывает трудно читать текст из-за обилия тех самых засечек.
Самый известный шрифт — Times New Roman:
Гротеск — простые шрифты без засечек
Наиболее подходящий тип шрифтов для оформления медиаконтента. Этот текст написан шрифтом из категории гротескных. Самые популярные шрифты этой группы — Arial, Open Sans, Montserrat.
Рукописный — буквы как в прописях. Используйте с осторожностью и по чуть-чуть, читать полотна косого текста бывает трудно. Пример шрифта:
Акцидентный — креатив для привлечения внимания. У этой группы шрифтов нет общего правила написания, всё зависит от фантазии создателя. Шрифты используются в логотипах и для оформления иллюстраций. Примеры:
Существует бесконечное множество видов шрифтов. Если ищете простые и проверенные решения, используйте стандартные варианты из любого текстового или графического редактора. Если хочется создать уникальное оформление, можно купить необычный шрифт или нанять дизайнера, иллюстратора, даже каллиграфа для отрисовки букв вручную.
У шрифтов бывает разная насыщенность: тонкое начертание, обычное, жирное, курсив и другие вариации. Это встречается не всегда, но если есть, удобно использовать разные начертания для оформления текста — так вы точно можете быть уверены, что шрифты сочетаются. Другой путь — найти шрифтовую пару, которая хорошо выглядит вместе. Для подбора важно знать основы стиля (или подсмотреть в интернете готовые решения).
Чек-лист, чтобы подобрать правильный шрифт
- Учитывайте контекст. В материалах делового характера лучше выбрать один гротескный шрифт без засечек, а для привлечения внимания можно использовать любые неожиданные решения.
- До трёх шрифтов на макет. Разные варианты начертания (жирный, обычный, курсив и т. д.) считаются разными шрифтами.
- Все шрифты или с засечками, или без.
- Размер шрифта определяет его читаемость. Минимальный — от 16px. Проверьте, чтобы текст был легко виден с разных устройств.
- Одинаковое оформление однородных элементов. У всех заголовков единый шрифт, размер, цвет и насыщенность, как и у всех текстовых блоков.
- Цвета подобраны контрастно, ярких мало или они имеют приглушённый оттенок: не красный, а бордовый, не чёрный, а тёмно-серый.
- В тексте есть иерархия: заголовок самый крупный, подзаголовок меньше, основной текст — совсем маленький. Чем больше размер текста, тем больше ему нужно пустого пространства вокруг.
Третья и последняя джедайская техника
Хорошая новость для всех, кто часто создаёт контент. Уделите время созданию фирменного стиля один раз, чтобы больше никогда не тратить на это время: подберите цветовую палитру, шрифты и инструменты для художественного оформления текста. Можно нанять дизайнера или разобраться самому — в этом может помочь курс по веб-дизайну на платформе Edutoria.
Желаем удачи и вдохновения!
Источники иллюстраций, использованных в статье:
https://stihi.ru/2015/12/27/7851
https://www.behance.net/gallery/46678475/Soviet-style-lettering-vol3
https://chenazvezde.ru/
https://www.artstation.com/artwork/aYn8R9