15 примеров хорошей типографики в веб-дизайне

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

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

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

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

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

15 лучших примеров типографики в веб-дизайне

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

1. Van Holtz Co

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

2. Cambridge International School

Cambridge International School – пример образовательного веб-сайта. Его типографика включает в себя тексты разных размеров, но все они выполняют четкую и простую функцию. На этом сайте посетители могут найти идеальную навигацию. Это пример хорошо спроектированных меню, навигационных систем и кнопок.

3. Child’s own

Child’s own – это сайт, на котором детские рисунки используются для изготовления мягких игрушек. Что касается типографики, то дизайнер использовал два контрастных шрифта, но они хорошо сочетаются друг с другом. Шрифт заголовков контрастирует со шрифтом инструкций. Шрифт заголовка делает дизайн игривым, что соответствует «детской» тематике сайта.

4. The Next Rembrandt

The Next Rembrandt — это напечатанная на 3D-принтере картина, созданная на основе данных о произведениях Рембрандта. Дизайн этого сайта выделяется значительным негативным пространством и набором текста. Общий минималистичный характер этой страницы выделяет центральный текст и фокусируется на теме сайта. Панель навигации также проста и понятна.

5. 1MD

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

6. Kashoo

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

7. Innovator. Boris Ignatovich

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

8. Evolve Wealth

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

9. RSQ

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

10. Luke Stephenson

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

11. Pest Stop Boys

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

12. By the Books

By The Books – это виртуальный литературный фестиваль, на котором представлены книги, рекомендованные Аминату Соу ​​и Энн Фридман. Это отличный пример того, как типографика может влиять на дизайн сайта. Заголовки и основной текст используют одинаковую типографику на всей странице, но в разных книгах используются дополнительные шрифты, что делает дизайн слегка контрастным, но согласованным.

13. Marianne Brandt

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

14. Rijksmuseum

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

15. KOTI Sleepover

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

Лучшие практики типографики в веб-дизайне

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

Ограничьте количество шрифтов

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

Сопоставьте шрифты и подберите правильные сочетания

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

Ограничьте длину строки

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

Установите межстрочный интервал

Если вы правильно используете пробелы между строками текста, улучшится не только визуальная привлекательность, но и удобочитаемость. Чтобы текст было легче читать, можно установить междустрочный интервал 120–145 % от кегля. Если вы используете такой инструмент дизайна, как Mockplus, вы можете легко установить межстрочный интервал на левой панели.

Используйте цветовой контраст

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

Старайтесь не писать текст только заглавными буквами

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

Не забудьте проверить текст

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

Вывод

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

Перевод статьи uxplanet. org

Как типографика может помочь сделать дизайн более интересным?

Аудио перевод статьи

Сможете ли вы разработать успешный пользовательский интерфейс только за счет типографики?

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

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

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

1. Определите иерархию шрифтов (и придерживайтесь ее!)

Это имеет решающее значение для восприятия контента. Поэтому:

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

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

Пример иерархии шрифтов

2. Внимание к деталям

Призовите своего внутреннего перфекциониста и учитывайте, что:

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

3. Размер и начертание имеют значение

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

• Легче управлять начертаниями для шрифтов без засечек. Начертания могут варьироваться от тонкого до очень жирного.
• Можно использовать вариативные шрифты и менять их начертания и ширину. Кстати, теперь Figma поддерживает вариативные шрифты! 

«Правильно подобранная типографика поможет продемонстрировать структуру и индивидуальность страницы или продукта». — Эллен Луптон (дизайнер, писатель и куратор)

Пример, который показывает, что размер и начертание действительно имеют значение

4. Сетки, сетки и сетки

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

4 разных макета с использованием одной и той же 12-колоночной сетки 

5. Выравнивание

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

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

6. Ширина текстового столбца

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

В абзацах идеальное количество слов в строке должно составлять от 8 до 12.

Оптимальная и неправильная ширина столбцов

7. Высота строки (или интерлиньяж)

Если высота строки слишком большая, то набор связанных предложений не будет восприниматься читателем как единый текстовый блок. А если высота строки слишком мала, текст будет трудно читать. Поэтому следует подыскать подходящую высоту строки с учетом свойств выбранного шрифта. Это значение обычно колеблется в пределах 110% — 130%.

Примеры правильной и неправильной высоты строки

8.

Обеспечение достаточного контраста

Нельзя забывать о доступности контента. Важно:

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

Подсказка: вы можете использовать плагин Figma под названием Contrast, чтобы проверить контрастность (см. ниже). 

Контраст между цветом текста и цветом фона

9. Обводка букв

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

Обводка для больших букв и более мелкого текста

10. Анимация текста

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

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

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

Заключение

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

Шрифт — это ключевой элемент в дизайне, и давайте закончим эту статью цитатой Роберта Брингхерста:

«Типографика существует, чтобы чтить контент».

Типографический дизайн 101: руководство по правилам и терминам

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

by Mky

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

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

Краткая история типографики

—

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

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

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

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

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

Термины типографского дизайна, которые вам нужно знать

—

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

Стиль

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

Serif

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

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

К концу 18-го и началу 19-го веков родился модный радикальный стиль с засечками: Modern . Мы можем узнать этот стиль по резкому контрасту веса и тонким прямым засечкам.

С появлением рекламы в 19 веке были введены египетских или Slab Serifs . Благодаря смелому внешнему виду и крупным шрифтам с засечками они были предпочтительным стилем для отображения коммерческих сообщений.

Sans Serif

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

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

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

Cursive

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

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

Наконец, Gothic или Blackletter имеют в своей основе традиционную каллиграфию фломастером. Стиль развился из каролингского минускула, и к середине 12 века был создан новый стиль с резкими, прямыми и угловатыми линиями.

Шрифт и гарнитура

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

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

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

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

Анатомия

Анатомия букв довольно сложна — каждая мелочь и элемент имеет свой термин.

Вот некоторые из них:

Вот несколько знаков препинания, их названия и правильное употребление:

Распознавание типографских иллюзий

—

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

Давайте посмотрим на несколько оптических иллюзий, встречающихся в типографике:

Иллюзия 1

Буква S кажется идеально симметричной, верно? Ну, это не так. Просто поверните его на 180 °, и вы увидите, что верх на самом деле меньше, чем низ. Это делает его более стабильным и уверенным.

Иллюзия 2

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

Иллюзия 3

Чтобы буква О казалась симметричной и одинаковой по весу, нам на самом деле нужно сделать ее не одинаковой по весу. Переверните букву O на 90°, и вы поймете, что стороны немного толще, чем верх и низ.

Иллюзия 4

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

Иллюзия 5

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

Иллюзия 6

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

Иллюзия 7

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

Правила типографского дизайна

—

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

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

Выравнивание

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

Вровень по левому краю

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

Следите за тем, чтобы в новых строках не было одиночных слов. Их называют «вдовами», и они печальны.

Выравнивание по правому краю

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

По центру

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

Justified

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

Отслеживание

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

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

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

Кернинг

Кернинг относится к изменению расстояния между отдельными буквами. Несмотря на то, что в большинстве случаев мы можем обойтись без отслеживания, иногда нам нужно вмешиваться и настраивать пространство только между двумя буквами. Эти пробелы в кернинге чаще всего появляются вокруг таких букв, как A, W, V, T.

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

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

Интерлиньяж

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

Иерархия

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

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

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

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

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

Запоминание всех этих ссылок поможет нам построить правильную иерархию, не перегружая читателя.

Прекрасный пример чистой и понятной иерархии: заголовок, основной текст и подпись к изображению. Via erdem özsaray. Мы можем использовать иерархию не только для классификации определенной информации, но и для создания привлекательных образов. Через Macmillan. Обратите внимание на эффект градиента благодаря постепенному изменению веса. Via Typografische Monatsblätter.

Сетки

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

Как и со всем остальным, мы можем работать с простыми и простыми сетками, или же мы можем пойти на все и придумать замысловатые и сложные сетки.

Несмотря на то, что общая сетка для этого макета довольно проста и статична, большое поле в центре вместе с двумя меньшими по бокам придают ей некоторое движение, делая ее визуально привлекательной. Via Süddeutsche Zeitung, иллюстрация Дирка Шмидта.

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

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

Прекрасные примеры совместной работы шрифта и пустого пространства для создания чистой и воздушной композиции. Через Arbeitsform: Rochade. Нет ничего плохого в том, чтобы сойти с ума с вашим макетом, если ваш текст остается разборчивым. Через futuraproject.cz.

Сила типографики

—

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

Понимая правила и факты о буквах и различные способы их использования, мы можем выражать себя через них бесконечными способами. Эти правила не что иное, как руководство. Я настоятельно рекомендую вам пойти дальше и сломать их все! Учись, экспериментируй, забывай то, чему ты научился, делай ошибки и начинай сначала. Таким образом, вы разработаете уникальный для вас стиль.

Хотите узнать больше о типографике? Ознакомьтесь с новейшими тенденциями шрифтов, лучшими сочетаниями шрифтов и лучшими шрифтами для логотипов.

Правильная типографика может создать ваш бренд!

Наши талантливые дизайнеры могут создать идеальный дизайн именно для вас.

Получить дизайн

Типографский дизайн: правила и термины, которые должен знать каждый дизайнер

(Изображение предоставлено: Фотография Паоло Мартинеса через Гетти)

1. Чаша; 2. Стебель; 3. Счетчик; 4. Рука; 5. Лигатура; 6. Терминал; 7. Позвоночник; 8. Восходящий; 9. Апекс; 10. Засечка; 11. Ухо; 12. Спусковой механизм; 13. Ригель; 14. Финал; 15. Высота подъема; 16. Высота крышки; 17. Х-высота; 18. Исходный уровень; 19. Нисходящая строка

(открывается в новой вкладке)

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

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

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

01. Выбор шрифта

Существует широкий выбор шрифтов

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

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

02. Размер

Не все шрифты одинаковы. Некоторые толстые и широкие; другие тонкие и узкие. Это означает, что слова, набранные разными шрифтами, могут занимать на странице разное количество места.

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

Наиболее распространенным методом измерения шрифта является балльная система, которая восходит к 18 веку. Один пункт равен 1/72 дюйма, а 12 пунктов составляют одну пику, единицу, используемую для измерения ширины столбца. Размер шрифта также может быть измерен в дюймах, миллиметрах или пикселях.

03. Интерлиньяж

(Изображение предоставлено Элис Томлинсон через Getty)

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

04. Трекинг и кернинг

(Изображение предоставлено Bortonia через Getty)

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

Кернинг похож на отслеживание, но это не одно и то же. Отслеживание применяется равномерно для настройки интервала между всеми символами в слове.

05. Размер

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

Существует ряд теорий, которые помогут вам определить идеальную меру для вашей типографики. Одно эмпирическое правило заключается в том, что ваши строки должны быть длиной 2-3 алфавита (то есть 52-78 символов, включая пробелы).

06. Иерархия и масштаб

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

Следующая страница: Глоссарий типографских терминов

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

• 1

Текущая страница:
Типографический дизайн: ключевые понятия

Следующая страница Глоссарий типографских терминов

Подпишитесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

Свяжитесь со мной, чтобы сообщить о новостях и предложениях от других брендов Future.