Как выбрать шрифт для сайта


Как правильно подобрать шрифт для сайта

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

1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.
Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.

2. Избегайте шрифтов одного класса

Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».
На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к Slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon. Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.

3. Присвойте шрифтам разные роли

Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

Отчетливый Rockwell Bold мы оставили для привлечения внимания к заголовку. В целом использовали уже открытую нами схему сочетания рубленого шрифта и шрифта с засечками. И даже при таком выборе у нас большое количество вариаций по размеру, весу и функциям шрифтов. В общей сложности использовались 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!

4. Контрастная насыщенность шрифтов

Самый лучший способ испортить макет – не разделить элементы текста друг от друга по их иерархии. Кроме использования разных размеров, убедитесь, что ваши шрифты разного веса (жирности), чтобы дать читателю «путеводитель» по вашему дизайну.
На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

5. Создайте на странице различную тональность текста

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

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

6. Не смешивайте настроения шрифтов

Одна из частых ошибок – игнорирование присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!
На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

7. Сочетайте яркое с нейтральным

Чистый, читабельные типографский дизайн требует внимательного отношения к намеренному и непреднамеренному напряжению между шрифтами. Столкновение разных личностей шрифтов – это только одна причина ненужного напряжения. Если один из шрифтов имеет яркую личность, то второй должен быть нейтральным.
На примере слева Dax Bold стоит рядом с Bernhard Modern. Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon, который относится к классу Old style, но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

8. Избегайте несоизмеримых сочетаний

Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

9. Будьте проще – не используйте более двух шрифтов

Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

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

10. Используйте различные размеры шрифта

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

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

В заключение

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

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine (в ред. автора)

Как выбрать шрифты для веб-дизайна

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

Есть рекомендации по использованию бренда? Следуйте за ними.

от Deni K для Civil Pour

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

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

Важность последовательности

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

Соответствие шрифтам существующего бренда

by FuturisticBug для Nordkern

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

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

У вас еще нет шрифтов и руководств?

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

Определите индивидуальность вашего бренда

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

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

Выберите шрифты, которые подходят вашему бренду

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

Или, допустим, вы - юридическая фирма или производитель высококачественной косметики и хотите, чтобы ваша типографика отражала доверие и профессионализм с оттенком класса. Вы можете выглядеть стильно, но в то же время классически и элегантно, используя шрифты с засечками, такие как Frank Ruhl Libre или Playfair Display, чтобы показать потенциальным клиентам, что вы цените надежность и первоклассное обслуживание. Если вы хотите узнать больше, Venngage написал прекрасную статью о психологии шрифтов, которая поможет вам сделать правильный выбор.

by gotza

Независимо от того, какой шрифт вы в конечном итоге выберете, чтобы соответствовать своему бренду, убедитесь, что вы выбрали безопасный для Интернета шрифт, который прост в использовании и подходит для большинства браузеров.Вы спросите: «Что означает веб-безопасность»? Читай дальше что бы узнать.

Что такое веб-безопасные шрифты?

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

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

Какие типы шрифтов подходят для Интернета и почему это важно?

через Google Fonts.

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

Как комбинировать разные шрифты в веб-дизайне
-

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

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

от MarkoSimić.

Вот как это выглядит в действии: сначала определите основной шрифт, который является наиболее заметным и должен использоваться для заголовков. Совет: вы можете сопоставить этот шрифт со стилем вашего логотипа . Как правило, вы хотите, чтобы ваш основной шрифт привлекал внимание. Мне очень нравятся тяжелые шрифты, такие как Rubic Black, или слегка закругленные, такие как Nunito, для заголовков, но выбор шрифтов полностью зависит от вашего бизнеса и бренда. Затем выберите дополнительный шрифт, который будет использоваться для основного текста.Он должен быть легко читаемым при использовании для более длинных текстов даже на маленьких экранах, поэтому мы могли бы выбрать шрифт, такой как Noto Sans, в дополнение к нашим основным параметрам шрифта. И, наконец, ваш третий шрифт должен быть акцентным шрифтом. Этот шрифт можно использовать на кнопках, CTA или для выделения определенных частей текста, чтобы привлечь внимание посетителей. Такой шрифт, как Monserrat, будет хорошо работать с нашим основным и второстепенным выбором.

Как разные типы шрифтов влияют на ваш веб-дизайн
-

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

от LoudFrog для Coffee And Chokes BJJ

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

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

Скажи это шрифтом

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

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

.

Как выбрать шрифт для сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

css - Все о выборе шрифта для сайта

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

.

Как правильно выбрать шрифты для своего сайта

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

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

Морфология и функциональность

Форма шрифта определяет его пригодность для конкретной роли в макете. Для основного текста лучше всего подходят шрифты с номерами старого стиля; нумерация строк подходит для заголовков

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

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

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

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

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

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

Но самый важный вопрос, связанный с выбором шрифта, вероятно, наиболее часто упускается из виду: набор символов.Другими словами, содержит ли шрифт все глифы, необходимые для выполнения работы? Тревожно, что дизайнеры и разработчики часто обнаруживают, что им не хватает нескольких акцентов (или дробей, или маленьких заглавных букв) после того, как они убедили клиента, что они нашли «правильный шрифт для работы». В настоящее время очень мало что можно считать само собой разумеющимся, кроме классического набора символов Mac OS Roman из 256 символов. Даже если текст установлен на английском языке, могут быть ссылки на иностранные имена или места или просто необходимость в определенных символах.Поэтому рекомендуется как можно тщательнее ознакомиться с шрифтом, прежде чем использовать его в проекте. Стоит даже попросить у типового завода специальную лицензию на испытания.

Технические аспекты

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

Одна из этих проблем - та, которая неизбежно влияет на качество шрифта и общее качество дизайна - это разрешение, при котором воспроизводится шрифт. Компьютерные экраны, даже новые, весьма ограничены по сравнению с офсетной печатью. Например, обычная офсетная пластина может печатать 2400 точек на дюйм, но экран компьютера будет отображать только между 120 и 300 dpi.Эта разница заметно повлияет на печатный шрифт - и чем меньше шрифт воспроизводится, тем сильнее влияние.

Шрифты с неравномерным ударением (слева) выглядят сделанными вручную; даже машинные

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

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

Детали форм письма многое говорят вам о том, когда и в каком размере можно безопасно использовать шрифт. Мелкие детали семейства книжных шрифтов, таких как Maiola или Sabon, говорят о необходимости рендеринга с высоким разрешением и довольно больших размеров воспроизведения. В противном случае эти тонкие формы были бы скрыты. Гарнитуры, разработанные для газет или специально для экранов, более надежны, хотя и не имеют такого же изысканного внешнего вида.Например, такие шрифты, как Georgia или Abril Text, хотя и выглядят более грубыми, будут работать намного лучше при рендеринге с низким разрешением.

Относительные пропорции шрифта определяют его пригодность в качестве основного текста

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

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

Эстетические соображения

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

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

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

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

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

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

Экономика

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

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

Заголовок (серый) и текстовые шрифты (черные контуры) различаются по конструкции

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

Анализ, а не рецепты

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

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

слов : Вероника Буриан и Хосе Скальоне

Вероника Буриан и Хосе Скальоне встретились в Университете Рединга, когда получали степень магистра в области шрифтового дизайна, открыв в 2006 году независимое литейное производство TypeTogether.Эта статья впервые появилась в сетевом журнале.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий