Использование шрифтов в дизайне. Использование шрифтов

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

Требования к шрифтам

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

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

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

— Четкость

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

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

— Читабельность

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

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

Группы шрифтов

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

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

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

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

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

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

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

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

— Рукописные шрифты

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

— Декоративные шрифты

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

Подбор шрифта

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

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

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

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

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

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

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

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

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

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

Оптимальные варианты

Для контента лучше выбирать шрифты без засечек (гротески). На экранах и мониторах они воспринимаются гораздо лучше. Шрифты с засечками (антиква) используются преимущественно в заголовках или печатных материалах.

Наиболее популярными вариантами являются Arial, Trebuchet десятого кегля для основного контента и Georgia, Times New Roman двенадцатого кегля для заголовков. Это обусловлено их широкой распространенностью и удобством чтения. А вот Impact и Comic Sans, несмотря на популярность, использовать не рекомендуется.

Еще один удачный вариант – это шрифт Verdana. Визуально он похож на Arial, но имеет более тонкий контур. Имейте ввиду, что этот шрифт по умолчанию устанавливается только на поздних версиях Windows и Mac OC, поэтому обязательно указывайте замену.

Использование шрифтов

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

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

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

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

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

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

Что такое насыщенность шрифта

Читабельность шрифта

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

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

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

Пример 1: Текст читается не очень

Пример 2: Текст читается хорошо

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

Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ - ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.

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

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

01. Zopa.com

На логотипах многих популярных веб-сайтов преобладают серая цветовая схема со светлыми бликами. Логотип веб-сайта Жопа:) и общая картина сайта являются ярким тому примером.

02. Shutterfly

Современный логотип Shutterfly очень прост и задорен. Данное изображение отображает нам то, что жизнь течет так быстро, что не стоит быть таким серьезным. Общая картина дополняется тем, как в логотипе применена современная тенденция и светлые проблески.

03. NewsGator

В логотипе этого сайта использован интересный шрифт на разноцветном фоне.

04. Shoutwire

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

05. Shozu

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

06. Facebook

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

07. Twitter

Светло-синие буковки с закругленными углами – вот и готово! Теперь вы легко отличите известное лого Twitter.

08. Digg

В отличие от предыдущего шрифта, здесь у нас нет закругленных углов вообще: всё в строгости, а диагональное направление создает особое впечатление.

09. Cork’d

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

10. Vimeo

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

11. Last.FM

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

12. Technorati

Если логотип Technorati «оторвать» от содержимого веб-сайта, то вряд ли можно будет понять, для чего этот логотип используется.

13. Flickr

Шрифт, названный в честь своего создателя, Адриана Фрутигера (Adrian Frutiger) крайне часто используется в различных логотипах и рекламных кампаниях. Например, логотип сервиса Flickr очень популярен.

14. Youtube

Прямой диагональный шрифт на красном фоне.

15. Google

Здесь есть нечто от каллиграфии + контрастная высота строки. Поиграйте немного с цветами, и вы получите точную копию логотипа Google.

16. Yahoo

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

17. Hulu

Никаких дополнительных деталей: плавные линии и закругленные углы позволяют нам получить вполне элегантный логотип.

18. TMZ

Логотип TMZ представляет собой очень эффективное применение шрифта Amelia.

19. Linked-in

Myriad Pro Bold уже давно используется в различных вариациях, но именно вариант на логотипе LinkedIn принес ему популярность.

20. Skype

Плавные изгибы символов, немного задвинутых друг на друга создают вполне уникальную комбинацию.

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

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

1. Шрифт с засечками (Serif)

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

Старый стиль

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

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

Современный стиль

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

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

Египетский стиль

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

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

2. Рубленый шрифт

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

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

3. Рукописный шрифт

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

4. Декоративный шрифт

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