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

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

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

ПЕРВЫЙ ПЕРЕХОД

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

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

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

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

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

ЦИФРОВОЙ ВЕК

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

_______________________

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

В чем-то он прав. Типографика – это не просто шрифты. Это не только красивые буквы, это нечто другое, что-то, что заставляет нас чувствовать. По сути, типографика это послание. По мнению известного русского типографа Лазаря Лисицкого , типографика оптически должна донести до читателя ту же идею, которую оратор озвучивает голосом».

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

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

НОСТАЛЬГИЯ ПО ПРОШЛОМУ

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

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

ВИНТАЖНАЯ ГРАНДЖ-ТИПОГРАФИКА

Поправил старую статью о типографике, тем, кто не видел - будет полезно для ознакомления

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

Итак, эта статья посвящена тем, кто потерялся в океане типографики. Мы поговорим об основах типографики, о том, какие бывают шрифты и о структуре шрифтов.

Гарнитуры против шрифтов - в чём разница?

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

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

Классификация

Шрифты можно разделить на несколько групп - с засечками (serif), без засечек (sans-serif), рукописные (script), акцидентные (display). Впрочем, есть и другие виды классификации.

Шрифты с засечками, Антиква (Serif)

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

У шрифтов с засечками довольно много подтипов - например, Old Style («Старый стиль» - так же их называют humanist, гуманистическая антиква ) - самые первые шрифты этой классификации, они использовались аж в далёких 1400-х гг. Их отличительная черта - что та часть символа, которая расположена под наклоном, делается тонкой. Примеры шрифтов - Adobe Jenson, Centaur, и Goudy Old Style.

Transitional serifs (Переходная антиква) - использовались в 1700-х годах. Сюда входят такие шрифты, как Times New Roman и Baskerville, а так же Caslon, Georgia, и Bookman. У них разница между толстыми и тонкими частями букв более заметна, чем у Old Style, но менее заметна, чем у Modern.

Modern serifs (Антиква нового стиля) - используются уже после 1700-х годов, и имеют сильный контраст между толстыми и тонкими частями символов. Сюда входят такие шрифты, как Didot и Bodoni

И, наконец, Slab serifs (Брусковые шрифты) - вообще имеют одинаковую толщину всех линий, и крупные засечки на концах

Рубленые шрифты, Гротески (Sans Serif)

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

Вот 4 основных вида рубленых шрифтов: Grotesque (Старый гротеск), Neo-grotesque (Новый гротеск), Humanist (Гуманистический), и Geometric (Геометрический).
Старые гротески - самые первые, они похожи на шрифты с засечками, но без засечек.
Например, Franklin Gothic и Akzidenze

Новые гротески имеют упрощённый, по сравнению со старыми гротесками, вид. Очень многие из самых популярных ныне шрифтов это новые гротески, например, MS Sans Serif, Arial, Helvetica и Univers.

Гуманисты - более каллиграфичны, чем все остальные рубленые шрифты (то есть у них изменяется толщина линий). К ним относятся, например, Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande - их часто используют в наполнении тела сайта.

Геометрические основаны на правильных фигурах, например, «О» - это круг, и т.п.; считаются наиболее современными рубленными шрифтами. Примеры - ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Рукописные (Script)

Рукописные шрифты базируются на почерке. Существует две разновидности таких шрифтов - формальные (formal) и кежл (casual). Формальные как будто написаны от руки, они происходят из 17-18 вв. Некоторые шрифты основаны на почерках известных мастеров, таких, как George Snell и George Bickham. Как пример современного шрифты можно взять Kuenstler Script. Красив и элегантен, он не подходит для основного текста страницы.

Кежл-шрифты - это более современный вариант, зародился он в 20в. Он менее формальный, часто с жирной обводкой и с эффектом мазков кисти. К таким шрифтам относятся Mistral и Brush Script.

Акцидентные шрифты (Display)

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

Неалфавитные шрифты (Dingbats)

Неалфавитные шрифты - это те шрифты, которые вообще не содержат букв, но содержат символы и орнаменты.

Пропорциональные против моноширинных

В пропорциональных шрифтах символ занимает столько места, сколько требует его естественное написание. Например, Times New Roman является пропорциональным шрифтом. А вот у моноширинных шрифтов все символы одной ширины. К таким шрифтам относится, например, Courier New

Настроение

Настроение шрифта очень влияет на то, уместно ли его будет использовать в той или иной ситуации. Довольно часто используются и контрасты - деловой стиль сочетается с неформальным, светлый с драматичным. К примеру, Times New Roman - строгий шрифт, и именно он так часто используется для деловой переписки. А вот, например, Helvetica вообще меняет своё настроение в зависимости от окружающих шрифтов.

Толщина и стиль

По толщине бывают шрифты: light, thin, regular, medium, bold, heavy, или black.

Есть три стиля шрифтов - italic, oblique, и small caps. Small caps обычно используются для заголовков.

Italic и oblique - взаимозаменяемы, хотя это различные стили. Оblique - наклонный вариант обычных шрифтов. Чтобы получить его, достаточно воспользоваться функцией Free Transform-distort в Photoshop. А вот Italic - это уже отдельный набор символов, который отвечает за наклонный вариант написания шрифта.

Структура шрифта

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

Линия шрифта (baseline) - воображаемая линия, на которой расположен текст. Иногда закруглённые шрифты немного отступают от линии шрифта.

Линия строчных (meanline) обозначает высоту большинства строчных букв, обычно определяется по высоте буквы «х». Отсюда же происходит и понятие x-height.

Верхняя линия прописных (Cap) - высота заглавной буквы «А».

На рисунке выше показано три общие части всех букв.

Основной штрих, Штамб (Stem) - основная вертикаль каждого символа, в том числе и наклонная.

Перекладина (Bar) - горизонтальная часть шрифта

Овал (Bowl) - закруглённая часть шрифта.

Верхний выносной (Ascender) - торчащая вверх часть таких букв, как «d», «h», и «б».

Нижний выносной элемент (Descender) - торчащая вниз часть таких букв, как «p», «q» и «ф»

Засечки - отличительная черта шрифтов с засечками). У одних шрифтов они более ярко выражены, а у других - менее ярко.

Апертура (Aperture) - обозначает зазор у открытх символов, таких, как “A”, “с” или “m”

Ухо (Ear) это декоративное дополнение символа, как, например в букве “g” на примере выше.

Соединительный штрих (Hairline) это тончайшая часть шрифта с засечками.

Перекладина (Crossbar) - горизонтальная линия, как, например, в символах “A” и “H”.

Капля (Terminal) - круглое или овальное (каплевидное) окончание штриха в рисунке некоторых знаков шрифта.

Петля (Loop) бывает только на некоторых буквах “g” нижнего регистра, и может быть целиком закрыта или частично закрыта.

Шип (Spur) - крошечная зазубринка на некоторых буквах, например, на “G”.

Присоединение (Link) соединяет верхнюю и нижнюю часть буквы “g”.

Спина (Spine) - центральная кривая, которая есть у буквы “s”.

Хвост буквы (Tail) - декоративная линия, например, на букве “R” или “Q”.

Концевой элемент (Terminal, Finial) - окончание штриха без засечки

Заплечико (Shoulder) - закруглённая линия, которая отходит от основного штриха. (честно говоря, на многих российских сайтах дают совсем другое определение этого понятия, )

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

Типографика и информационный посыл

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

Давайте разбираться, на что реально влияет типографика в веб-дизайне.

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

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

Основы типографики в web-дизайне

Шрифты в web-дизайне

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

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

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

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

Макро- и микротипографика

Как вы наверняка уже поняли из названия этих терминов:

макроуровень - строит общую структуру текста, определяет размещение контента относительно дизайна;

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

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

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

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

Оформление текста

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

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

Теперь о верстке. Здесь есть свои правила:

Блок с текстом должен ограничиваться 40–50% ширины страницы.

Между абзацами должен быть 1,5 интервал.

Контраст фона и текста должен укладываться в 75–90%.

Комфортный для глаз шрифт - 12–16 px, но даже самый мелкий блок не должен быть меньше 10 px.

Межстрочный интервал выдерживается относительно величины шрифта и измеряется в процентах, в идеале - 140–150% будет достаточно.

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

Стили CSS

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

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

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

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

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

Еще существуют такие термины, как «вес» и кернинг. Все они могут изменяться с помощью средств CSS и быть применены к абзацам, заголовкам или другим элементам текста. Свойство «вес» шрифта определяет степень толщины линий при начертании. Это ряд значений от 100 до 900, где каждый номер указывает вес, соответствующий жирности начертания. Нормальный шрифт "normal" соответствует номеру 400, полужирный "bold" — 700. Кернинг - изменение интервала между буквами в зависимости от их формы. Это процесс правильного размещения символов, регулируя расстояния между ними, в результате которого должна быть достигнута гармония. Хотя на кернинг многие особого внимания не обращают, именно мелочи помогают достичь очень хороших результатов.

Нарушение норм

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

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

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

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

Правильный выбор шрифта

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

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

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

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

Разборчивость

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

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

Информативность

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

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

Размещение и размеры

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

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

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

Цвет

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

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

Заключение

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

Друзья!

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

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

Итак, если правило номер один для грамотного дизайна — это построение модульной сетки (см. статью ), то правило номер два звучит так: ограничивайте количество шрифтов!

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

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

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

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

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

Вот примеры хорошего применения шрифта:

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

А вот неудачное использование шрифтов:

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

Вот пример такой работы:

Это не плод моей фантазии. Таких работ я видел множество, и выполнены они были, как правило, либо дизайнерами-новичками, либо любителями.

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

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

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