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

26 правил цифровой типографики для начинающих

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

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

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

Выбор правильного шрифта

1. Не используйте причудливые шрифты

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

2. Шрифт Trajan Pro и не причудливый, и не старый

Просто нужно правильно им пользоваться.

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

3. Забудьте о Comic Sans

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

4. Избегание шрифтов по умолчанию — это полный бред

Серьёзно. Если кто-то думает, что стандартные шрифты скучны, то он невежда. Всё дело в том, как вы распорядитесь этим шрифтом. Вот что определяет его внешний вид. Times New Roman может смотреться просто отлично. Вам нужно только сделать так, чтобы это увидели и другие люди.

Пусть лучше ваш текст будет скучен, чем некрасив или нечитаем.

Сочетание шрифтов

5. Не смешивайте больше, чем два шрифта

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

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

6.

Сочетайте только контрастирующие шрифты

Первый абзац выглядит лучше, не так ли?

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

Sans Serif + Serif: рукописный шрифт в паре с современным. Сохраняйте контраст. Два похожих шрифта рядом смотрятся неряшливо.

7. Но убедитесь, чтобы высота строчных знаков была схожей

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

Настройка текста

8. Размер текста — Кегль

Кегль текста в абзацах на сайтах устанавливайте минимум на 13px. Я больше всего люблю 14-18px. Размер текста получается не слишком большим, и текст удобно читать.

9. Выбирайте верную длину строки

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

10. Подбирайте межстрочный пробел, подходящий кеглю

Чтобы достичь баланса в блоке текста, воздух между строками должен быть примерно 150% от высоты строчных. Ещё проще — установить высоту строки, как 125% кегля.

Абзацы

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

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

12. Избегайте переносов

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

13. Обойдитесь без отступов

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

14. Подписи

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

15. Висящие знаки пунктуации

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

16. Вдовы и сироты

Widow — вдова. по англ.

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

17. Не переусердствуйте с межсловным пробелом

Shift+enter требуется только для того, чтобы начинать новую строку. Нажимайте кнопку «enter» для начала нового абзаца. Всё просто.

Слова

18. Kёрнинг

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

19. Трекинг

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

Устанавливая большие заголовки, желательно пропорционально уменьшать трекинг шрифта.

20. Акценты в тексте

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

21. Не делайте разрядку в строчных

Этот текст нечитаем…

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

22. Ставьте разрядку в прописных

Ставьте бОльшую разрядку между прописными. Читаемость всегда улучшается благодаря большему пространству между прописными. Значение в 10% отлично подойдёт.

23. Не набирайте текст капителью

Не набирайте капителью текст, длиннее одной строки.

24. Обойдитесь без малых прописных

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

Буквы

25. Не меняйте ширину букв

Выглядит нехорошо.

Просто не надо. Пожалуйста.

Цифры

26. Пишите цифры буквами

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

Спасибо за внимание,

Том — старший веб-дизайнер в GOG.com и фрилансовый продукт-дизайнер и арт-директор в Pixology.

9 принципов хорошей типографики

• Типографика
• 3 мин на чтение
• 2652

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

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

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

Создавайте правильную иерархию

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

Не используйте слишком мелкий текст

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

Используйте простой шрифт для основного текста

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

Не используйте много шрифтов на одной странице

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

Добавляйте больше места между строками

Отсутствие пробелов между строками может сильно ухудшить восприятие. Однако эта проблема легко решается путем увеличения высоты строки (line-height). Главное не переусердствовать т.к. слишком много места, как и его отсутствие, может негативно сказаться на читаемости.

Не используйте верхний регистр

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

Ограничивайте длину строки 50-60 символами

Все очень просто. Если строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку. Если она слишком короткая, можно нарушить ритм т.к. «перескакивание» по строкам будет очень частым. Отсюда оптимальная длина должна составлять примерно 50-60 символов.

Не используйте выравнивание по центру очень часто

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

Достаточный контраст между текстом и фоном

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

Надеемся, эти правила помогут вам в создании легких в читаемости и восприятии текстов.

Источник: i love typography
Фото на обложке: ShutterStock

• #статья
• #типографика

• 1

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

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

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, а также работала или писала почти для всех бывших и нынешних печатных изданий сайта, от Computer Arts до ImagineFX. Теперь она целыми днями пишет обзоры матрасов и походных ботинок в качестве редактора по туризму и оздоровлению на T3.com, но в свободное время продолжает писать о дизайне на внештатной основе.

Купите шрифты у ваших любимых независимых разработчиков…

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

Обновите браузер

• Код комикса: это не шутки!
• Списки экспертов: шрифты для книг
• Мероприятие: беседа со Стивеном Хеллером

Добро пожаловать в ILT, где собраны тысячи высококачественных шрифтов для настольных компьютеров, Интернета и приложений! Мы отобрали лучшие из независимых производителей, так что откройте для себя наши рекомендуемые шрифты или позвольте нам удивить вас!
Ищете выгодную сделку? Эти шрифты со скидкой не менее 40%!

Самые продаваемые рукописные шрифты

Rollerscript автор G-Type:

2 стиля от $35,00

Новый

ГОРЯЧИЕ НОВЫЕ ШРИФТЫ

Марковальдо по Zetafonts:

Полное семейство из 1 шрифта 45,00 $ $27,00

В продаже

Шрифт месяца Стивена Хеллера

Шлак от Zetafonts

Самые продаваемые текстовые шрифты

Пролет по Джейми Кларк Тип:

29 стилей от 25 долларов США (+1 бесплатный шрифт)

Новые выпуски

Газетный киоск по Звери Англии:

Полное семейство из 1 шрифта $34,00

Новый

Вариативные шрифты — специальные предложения

Букан Переменная по Malou Verlomme:

Полное семейство из 1 шрифта $30,00

Новый

Витрина со шрифтами

Демонстрация шрифтов на упаковке сардины — для вашего вдохновения

Шрифты для словесных знаков, логотипов и упаковки

Монтерки по Zetafonts:

Полное семейство из 12 шрифтов. 110,00 $ $66,00

Распродажа

Современная классика

Meno Banner Буквенный дизайн Lipton:

12 стилей от $29.00

Новые рукописные шрифты

Оликана G-Type:

3 стиля от $42,00

Новый

Включает 2-осевой (высота и ширина) переменный шрифт

Гибкий по Art Grootfontein:

Полное семейство из 18 шрифтов. $60,00

Новый

Замечательные веб-шрифты

Proxima Sera от Студия Марка Симонсона:

18 стилей от $29.00

Шрифты для книг

Рекомендуемые шрифты для всех аспектов оформления книг

Холодный теневой тип

Аврора Гротеск Шрифты устройства:

17 стилей из $39.00

Слоевые шрифты

Цвет Экхарта ROHH:

Полное семейство из 8 шрифтов. $39.00

Шрифты с засечками

Платия по Omega Type Foundry:

Полное семейство из 9 шрифтов. $180.00

Шрифты для редакционного дизайна

Calvino Grande от Zetafonts:

Полное семейство из 20 шрифтов. 163,00 $ $81,50

В продажеНовый

Новые шрифты без засечек

Ordina от Schriftlabor. Шрифты от 39 долларов 19,50 долларов (для всей семьи 100 долларов)

Новый

Шрифты: Шрифты для упаковки

Кефир по ROHH:

Полное семейство из 7 шрифтов. $99.00

Универсальный и выразительный шрифт без засечек

Бэй Санс Blast Foundry: 

18 стилей от $49,00

Новый

Новые литейные и новые шрифты

Расширение семейства ILT за счет качественных шрифтов и литейных производств

Шрифты с потрясающими завитушками

Рейна Нойе Тип спровьеро:

Полное семейство из 45 шрифтов $149.00

Шрифты для брендинга, ориентированного на человека

Надин Шахин

Современная классика

Брэндон Гротеск Шрифты HvD:

12 стилей из $40. 00

Новые кхмерские шрифты для текста

Красар по Anagata Type:

Полное семейство из 8 шрифтов $192,00

Новый

Ретро и игровые шрифты

Шасси по Шрифты устройства: 

Полное семейство из 2 шрифтов $69.00

Неопереходные шрифты

Гвен Fontfabric:

Полное семейство из 7 шрифтов. 90,00 $ $45.00

В продажеНовый

Шрифты для обложек книг и упаковки

Шлак по Тип и рулон:

5 стилей от $30,00

Новый

Неоновые экранные шрифты

Фенеон Шрифты Teeline:

Полное семейство из 7 шрифтов $125. 00

Смелые шрифты дисплея

Спешка от DSType: 

14 стилей из $40.00

Жирный и выпуклый шрифт

Дейзи Людвиг Тип:

Полное семейство из 2 шрифтов $75.00

Скрытые жемчужины!

JAF Павлин Just Another Foundry: 

1 стиль из $59.00

Жирные квадратные засечки

LDN Northbank/Southbank по London Type Foundry:

Полное семейство из 2 шрифтов. $50.00

Популярные кодировочные шрифты

Коделия Tabular Type Foundry:

Полное семейство из 26 шрифтов 300,00 $ $150.00

В продаже

Арабские шрифты для текста

Саккал Китаб по Sakkal Design:

Полное семейство из 5 шрифтов. $399,00

Новые кхмерские шрифты

Нирадей по Anagata Type:

Полное семейство из 9 шрифтов. $249,00

Новый

Аутентичные рукописные шрифты

LiebeHeide по LiebeFonts: 

1 начертание из $19.00

Читать блог ИЛТ

Категории шрифтов

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

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

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

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

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

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

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

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

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

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

Шрифты для печати созданы из чернил. Веб-шрифты созданы из квадратных пикселей.

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

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

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

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

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

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

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

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

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

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

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

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

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

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

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

Хорошая типографика, как и хороший дизайн, невидима.