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

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

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

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

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

Гарнитура - это набор стилистически похожих символов, которые можно писать/печатать. Это цифры, буквы, символы. Шрифт - это более узкое понятие, котрое определяется несколькими факторами, например, размером и стилем. Вобщем, 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) - закруглённая линия, которая отходит от основного штриха. (честно говоря, на многих российских сайтах дают совсем другое определение этого понятия, )

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

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

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

Правило 1. Чем меньше шрифтов, тем лучше

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

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

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

Правило 2. Следите за разрядкой

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

Правило 3. Правильное выравнивание

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

Правило 4. Поменьше декоративных шрифтов

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

Правило 5. Размер имеет значение

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

Правило 6. Следите за читабельностью

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

Правило 7. Правильно подбирайте цвета

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

Правило 8. Подходящая группировка

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

Правило 9. Достаточный интерлиньяж

Это расстояние между строками текста. Очень важно правильно подобрать этот интервал. Гораздо более приятно читать, когда есть место для отдыха глаз между строками. Как правило, стараются использовать интерлиньяж, по крайней мере, на 2 пункта больше, чем размер шрифта. Например: для максимального удобства чтения при 10pt для шрифта должны задать хотя бы 12pt.

Правило 10. Следите за кернингом

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

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

Друзья!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет

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

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

Заключение

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

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

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

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

CSS-свойства для правильной веб-типографики

1. Семейство шрифтов (свойство font-family)

Подбор шрифта начинается с выбора гарнитуры шрифта.

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

Гарнитуры можно разделить на две основные категории: с засечками (антиква и брусковые шрифты) и без засечек (гротески).

Шрифты без засечек имеют простой и четкий внешний вид. Шрифты с засечками, напротив, придают более серьезный и официальный тон.

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

В каких случаях можно использовать несколько шрифтов:

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

Сервис TypeTester для подбора шрифта

2. Сочетание шрифтов с засечками и без засечек

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

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

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

3. Цвет шрифта (свойство color)

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

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

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

При выборе количества цветов текста предпочтительно ограничиться двумя достаточно контрастными цветами (не считая черного и белого цвета). Черный текст на белом фоне — это классика, достаточно контрастная.

4. Размер шрифта (свойство font-size)

Размер базового шрифта в браузере равен 16px , а размер заголовков устанавливается пропорционально размеру базового шрифта (h1 — 2em, h2 — 1.5em, h3 — 1.17em и т.д.).

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

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

Шрифты различных семейств одинакового размера также могут иметь разный фактический размер.

С ростом разрешения экранов и размеров мониторов необходимо пересмотреть привычный размер текста в 12-14px. Для обычного текста уже повсеместно применяется шрифт размером 14-18px. Задавая размер шрифта, нужно не забывать про адаптивность, т.е. размер шрифта должен изменяться в зависимости от размера экрана.

5. Выравнивание текста (свойство text-align)

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

6. Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)

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

Шрифты с засечками смотрятся более выразительно при уменьшенном значении letter-spacing .

7. Межстрочный интервал (свойство line-height)

Оптимальное значение межстрочного интервала в 1.4 — 1.6 раза больше размера шрифта.

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

8. Длина строки

В строке для сплошного чтения должно помещаться от 30 до 75 знаков (приблизительно 7-10 слов на одной строке). Чем шире строка текста, тем больше должен быть межстрочный интервал. Межстрочное расстояние не должно быть меньше пробела между словами.

9. Начертание шрифта (свойство font-style)

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

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

10. Структура текста и визуальная иерархия

В структуре веб-страницы выделяют следующие объекты:

• Логотип / название сайта;
• Названия/заголовки;
• Заголовки второго плана;
• Основной текст;
• Навигацию;
• Гипертекстовые ссылки;
• Длинные цитаты;
• Боковые панели;
• Подписи/надписи в таблицах, рисунках.

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

В HTML существует шесть уровней заголовков, начиная с более важного

и заканчивая менее значимым

. Заголовок

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

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

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

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

• Капитель;
• Курсив;
• Полужирное/жирное начертание;
• Размер;
• Цвет;
• Смена гарнитуры;
• Изменение положения знаков на полосе текста (верхний и нижний регистр, отступы);
• Выделение знаков при помощи графических элементов — указателей, рамок, иконок и т.п.

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

11. Безопасные шрифты

Windows fonts / Mac fonts / Font family

Arial, Arial, Helvetica , sans-serif

sans-serif

cursive

monospace

Georgia 1 , Georgia , serif

sans-serif

Lucida Console, Monaco 5 , monospace

sans-serif

serif

Tahoma, Geneva , sans-serif

Times New Roman, Times , serif

Trebuchet MS 1 , Helvetica , sans-serif

Verdana, Verdana, Geneva , sans-serif

Symbol, Symbol (Symbol 2 , Symbol 2 )

Webdings, Webdings (Webdings 2 , Webdings 2 )

Wingdings, Zapf Dingbats

MS Sans Serif 4 , Geneva , sans-serif

MS Serif 4 , New York 6 , serif

Arial, Arial, Helvetica , sans-serif

Arial Black, Arial Black, Gadget , sans-serif

Comic Sans MS, Comic Sans MS 5 , cursive

Courier New, Courier New, Courier 6 , monospace

Georgia 1 , Georgia , serif

Impact, Impact 5 , Charcoal 6 , sans-serif

Lucida Console, Monaco 5 , monospace

Lucida Sans Unicode, Lucida Grande , sans-serif

Palatino Linotype, Book Antiqua 3 , Palatino 6 , serif

Tahoma, Geneva , sans-serif

Times New Roman, Times , serif

Trebuchet MS 1 , Helvetica , sans-serif

Verdana, Verdana, Geneva , sans-serif

Symbol, Symbol (Symbol 2 , Symbol 2 )

Webdings, Webdings (Webdings 2 , Webdings 2 )

Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )

MS Sans Serif 4 , Geneva , sans-serif

MS Serif 4 , New York 6 , serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings - в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua - с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции