Как подобрать сочетающиеся шрифты – несколько полезных советов. Сколько мне будет стоить шрифт? Размер имеет значение

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

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

Что такое типографика?

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

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

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

Ключевые компоненты типографики

Выбор и применение шрифта зависит от совокупности нескольких факторов и элементов:

• Тип начертания - ошибочно мы называем эту характеристику «шрифтом», но начертание относится к группам символов, букв и цифр, которые объединены общим дизайном. Например, начертание - это Garamond, Times, Arial; мы же привычно по ошибке называем их «шрифтами».
• Шрифт - конкретный тип размера, длины, ширины и жирности букв. На практике это выглядит так: Georgia - это начертание, а 9pt Georgia Bold - шрифт.
• Длина строк - характеристика, которая обозначает расстояние между левым и правым крайним полем и число символов и слов, которые умещаются на этом отрезке.
• Расстояние между строками - пространство между основными линиями, по которым размещены буквы, выражается в количестве точек.
• Кернинг - обозначает незаполненное пространство между отдельными символами или буквами. У большинства шрифтов кернинг задается автоматически так, чтобы выбранное начертание и размер выглядели естественно и приятно для глаз.
• Пробелы и плотность символов - отвечают за плотность и однородность размещения символов в словах и строках по тексту.

Почему типографика настолько важна?

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

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

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

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

Чтобы достичь совершенства в структурировании текста, надо сначала понять, как организовать информацию, для чего стоит почитать, например, Gestalt’s Principles of Perception («Гештальт-принципы восприятия»).

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

• схожесть (внешне схожие объекты - по размеру, форме, цвету - воспринимаются вместе);
• смежность (близость объектов в пространстве и визуальный переход от одного к другому, когда одно событие как будто вызывает другое);
• замкнутость (несколько объектов образуют вместе фигуру завершенной формы);
• близость (объекты, расположенные рядом, воспринимаются вместе);
• фигура и пространство вокруг (когда пространство вокруг фигуры воспринимается как ее фон).

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

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

О чем говорят исследования?

В июле 2012 года в The New York Times был проведен эксперимент под названием «Вы оптимист или пессимист?». Читателям предлагался абзац из книги The Beginning of Infinity, за которым шли два вопроса, подразумевавших ответы «да» или «нет». Интересно, что сами ответы не так сильно интересовали исследователей, как реакции людей на выбранное начертание шрифтов и эмоциональный фон, который несет в себе тот или иной шрифт. Может ли шрифт влиять на доверие к тексту? Это и хотели узнать авторы эксперимента.

Все 40 тыс. участников видели один и тот же абзац в шести разных начертаниях: Baskerville, Helvetica, Comic Sans (профессиональные дизайнеры критикуют Comic Sans или, точнее, просто ненавидят его из-за корявого начертания и широкого распространения в работах любителей. - Прим. ред.) , Computer Modern, Georgia, Trebuchet.

В результате выяснилось следующее. Утверждения и вопросы, напечатанные шрифтом Comic Sans, вызвали наибольшее несогласие. Недалеко ушла и Helvetica: утверждения, написанные этим шрифтом, тоже особо не убедили участников опроса. Зато наибольшее согласие и доверие вызвали утверждения, написанные начертанием Baskerville.

Урок для интернет-маркетологов

Вот почему, по мнению психолога, победил шрифт Baskerville: он более формален и надежен на вид.

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

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

Размер имеет значение?

Касательно размера шрифта также был проведен интересный эксперимент в Usability News. В ходе этого исследования сравнили восемь популярных в интернете шрифтов: Courier New, Georgia, Arial, Century Schoolbook, Times New Roman, Comic Sans, Tahoma, Verdana. Разобрали при этом шрифты размером 10, 12, 14 пунктов. В исследовании принимали участие 60 участников.

Вот что выяснилось: Verdana, Arial, Comic Sans лучше всего читаются при размере шрифта 10, 12 и 14 пт.

Быстрее всего люди читали тексты, набранные Times New Roman и Arial.

Также Arial и Courier влияли наилучшим образом на степень восприятия текста, в то время как текст, набранный Comic Sans, доверия не вызывал (показал наихудший результат). Наибольший уровень положительного восприятия вызвали в числе прочих шрифты Tahoma 10 пт, Courier 12 пт и Arial 14 пт.

Дискуссия о Serif и Sans Serif

Несмотря на такие вполне отчетливые результаты, не было четкого ответа на вопрос о том, что лучше использовать: Serif (шрифт с засечками) или Sans Serif (рубленый шрифт, то есть без засечек). Но последний легче воспринимается при чтении, потому что отчетлив и удобен даже при очень маленьком размере букв и символов. А значит, люди могут больше сосредоточиться на содержании текста, чем на его форме и начертании.

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

Еще одно исследование (PDF), проведенное совместно доктором Кевином Ларсоном (Kevin Larson) из Microsoft и доктором Розалиндой Пикар (Rosalind Picard) из MIT, выявило взаимосвязь между настроением и когнитивной производительностью. Были проведены в два этапа измерения трех различных характеристик: сравнительная продолжительность, шкала Лайкерта и задания на распознавание.

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

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

Эксперименты по измерению эффективности текстов со шкалой Лайкерта выявили лишь со второй попытки преимущество хорошей типографики.

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

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

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

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

• Помните, что выбранная вами типографика должна дополнять текст, а не подавлять заложенный в нем смысл своей формой. Прочитав текст, люди должны запомнить не шрифт, а призыв к действию или информационный посыл, которые в этом тексте заложены.
• Всегда помните о двух принципах: взаимосвязь и контраст разных шрифтов в одном тексте. Сочетание двух разных шрифтов в одном тексте должно быть таким, чтобы при переключении между ними у читателя не появлялось ощущение, что его от текста внезапно отвлекли. Рассматривайте пары вроде Helvetica и Arial. А контрастность должна делать шрифты разными, но при этом сохранять в них хотя бы одну общую черту.
• Не забывайте, что ключ к успеху - в простоте. Не стоит превращать ваш текст в выставку ваших любимых шрифтов.
• Для поиска идеально подходящего шрифта изучите нишу, которую занимает ваш проект и его аудитория. Нужен ли вам формальный, строгий шрифт? Нужен ли вам крупный шрифт? Изучите рынок и его запросы, факторы, которые побуждают ваших покупателей внимательнее читать надписи и тексты.
• Выберите типографику такую, чтобы текст внушал доверие, выглядел удобно и при этом легко читался. Внимательно отнеситесь также к пробелам между буквами и словами - они должны быть в меру широкими.
• Не используйте заглавные буквы в начале каждого слова. 90% всех текстов, которые люди читают в интернете, набраны строчными буквами.
• Длина строки не должна быть слишком короткой, чтобы не приходилось перескакивать постоянно взглядом на начало строки - это утомляет читателя. И она не должна быть слишком длинной. (Оптимальной шириной текста можно считать 600 пикселей. В «Ловим сетью» установлена именно такая ширина. - Прим. ред. )
• Плотность слов и строк должна быть такой, чтобы пользователю не казалось, будто весь текст свален в одну кучу.

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

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

Выступая перед выпускниками и студентами Стэнфордского университета в 2005 году, основатель и в то время генеральный директор компании Apple Стив Джобс рассказывал, что в университете не очень интересовался обычными дисциплинами, зато записался на курсы каллиграфии, где изучал шрифты и особенности комбинирования Serif и Sans Serif. Делал он это исключительно для собственного удовольствия - и даже не предполагал, что десять лет спустя, в работе над шрифтами для революционного компьютера Macintosh ему пригодятся именно эти знания и опыт (кстати, есть легенда, что Стив Джобс уволил своего сотрудника за одну-единственную фразу «Шрифт - это не главное». - Прим. ред. ).

Подводя итоги

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

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

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

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

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

Определите свою цель

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

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

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

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

Очертите свою аудиторию

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

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

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

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

Ищите вдохновение

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

Вдохновение: шрифты

За свежими идеями насчет шрифтов можете обратиться к The 100 Best Free Fonts от CreativeBloq - это отличный источник, который придаст вам нужный настрой. В своей статье CreativeBloq объясняет логику, которой они следовали при выборе каждого из шрифтов.

Кроме того, Invision составил целый с ресурсами по типографике. Там вы найдёте массу источников для вдохновения.

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

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

Вдохновение: сочетания

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

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

FontPair - еще один ресурс о том, как лучше выбирать сочетания, предназначенный конкретно для работы с Google Fonts . На ресурсе предусмотрена возможность сортировки по сочетаниям стилей (например, sans-serif и serif или serif и serif).

И наконец, в Сети полно наборов готовых сочетаний от профессиональных дизайнеров. Скажем, Typography: Google Fonts Combinations или Typography: Google Fonts Combinations Volume 2 . Просто вбейте запрос «font pairing» на Behance , Dribble и других подобных сайтах.

Выберите шрифт

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

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

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

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

Для веб-шрифтов можно использовать Google Fonts , Typekit , и Font Squirrel . На Google Fonts всё бесплатно, Typekit и Font Squirrel предлагают платные и бесплатные варианты.

Задайте размер

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

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

СКОЛЬКО ШРИФТОВ НУЖНО ИСПОЛЬЗОВАТЬ В ДИЗАЙНЕ?

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

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

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

КАК ВЫБРАТЬ ОСНОВНОЙ ШРИФТ

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

При выборе шрифта для основного текста прежде всего нужно обращать внимание на его читаемость. Лучше всего не пытаться изобретать велосипед и использовать «испытанные» шрифты, которые хорошо смотрелись в предыдущих проектах. У каждого дизайнера всегда есть в запасе несколько проверенных вариантов – вот эти шрифты и нужно использовать в первую очередь. Если говорить о шрифтах Google, то оптимальным выбором будут Droid Sans, Noto Serif и Cabin .

КАК ВЫБРАТЬ ШРИФТ ДЛЯ ЗАГОЛОВКОВ

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

В данном примере использовано сочетание шрифтов FiraSans и Merriweather .

ВАРИАНТ 1: БЕЗОПАСНЫЙ ВЫБОР

Многие шрифты созданы в двух вариантах – без засечек и с засечками. Например, шрифты Scala Sans и Scala Serif, Meta и Meta Serif, Droid Sans и Droid Serif. Данные шрифты можно безо всяких опасений использовать в паре, так как форма букв в сансах и серифах практически идентична, но при этом они достаточно хорошо контрастируют между собой. Тем дизайнерам, которые не до конца уверены в своем умении правильно подбирать шрифты, лучше всего использовать этот способ, так как он наиболее безопасный.

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

ВАРИАНТ 2: ИГРА НА КОНТРАСТЕ

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

К примеру, шрифт Noto Serif отличается плавными очертаниями букв, он легкий и хорошо читается. При этом он очень выразительный и, если это слово можно применить к шрифту, доброжелательный. Какой шрифт лучше всего подобрать к нему в пару? Лучше всего взять шрифт без засечек и с похожими характеристиками. То есть, персоналити-шрифт должен иметь похожие пропорции, а его очертания должны перекликаться с очертаниями основного шрифта. В паре с Noto Serif будет очень хорошо смотреться Questa Sans – он достаточно выразительный и современный и хорошо контрастирует со шрифтом с засечками.

Сочетание шрифтов Noto Serif и Questa Sans

ВАРИАНТ 3: УСИЛЕНИЕ КОНТРАСТА

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

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

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

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

ВЫВОД

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

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

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

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

1. Выбор семейства шрифта

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

• Arial ;
• Verdana ;
• Times New Roman ;
• Georgia ;
• Trebuchet MS ;

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

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

Во-первых, появляется зависимость от других сайтов (в данном случае от Google). Например, Google по каким-то причинам может медленно работать, то в этом случае Ваш сайт также затормозится. За примерами далеко ходить не надо. Я лично подгружал скрипт для работы с библиотекой AJAX (jquery) с сайта Google, но периодически он вообще не грузился и это приводило к некорректной работе всего сайта.

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

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

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

2. Выбор размера шрифта

Выбор размера шрифта является сложной задачей, поскольку некоторым нравится более мелкий шрифт, а кому более крупный. Лично я для себя сделал предпочтение размеру 14 пикселей . Этот размер является стандартом во многих областях (например, такой размер используется при написании дипломов, курсовых по ГОСТУ). На данном сайте размер шрифта 14 и больше его делать нет необходимости и меньше тоже. Помните, что самое главное то, чтобы пользователям было удобно читать контент.

Примечание

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

3. Выбор цвета шрифта и фона под него

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

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

• Синий на белом;
  Пример - Синий на белом
• Черный на желтом;
  Пример - Черный на желтом
• Зеленый на белом;
  Пример - Зеленый на белом
• Черный на белом;
  Пример - Черный на белом
• Красный на желтом;
  Пример - Красный на желтом
• Красный на белом;
  Пример - Красный на белом
• Зеленый на красном;
  Пример - Зеленый на красном
• Оранжевый на черном;
  Пример - Оранжевый на черном
• Черный на пурпурном;
  Пример - Черный на пурпурном
• Оранжевый на белом;
  Пример - Оранжевый на белом
• Красный на зеленом;
  Пример - Красный на зеленом

4. Другие мелочи

К этим мелочам я бы хотел отнести следующее:

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

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

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

Шрифты имеют огромное значение в дизайне. В статье мы расскажем:

Как сочетать несколько шрифтов на одной странице;

Как создать контраст при помощи шрифтов.

1. Где брать шрифты?

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

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

Вот несколько ресурсов, где можно найти шрифты:

• http://www.google.com/fonts/ - каталог свободных шрифтов от Google;
• http://www.fontsquirrel.com/ - агрегатор и конвертер шрифтов;
• http://www.myfonts.com/ - большой каталог шрифтов;
• http://www.fonts.com/ - еще один большой каталог шрифтов;
• http://webfont.ru/ - коллекция бесплатных шрифтов.

2. Как выбрать шрифты?

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

При работе с визуальным редактором доступны разные типы шрифтов:

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