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

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

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

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

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

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

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

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

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

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

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

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

Основные группы шрифтов

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

Serif (с засечками)

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

Slab serif (прямоугольные засечки)

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

Script (пропись)

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

Blackletter (готический шрифт)

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

Sans serif (без засечек)

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

Handwriting (рукописный шрифт)

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

Decorative (декоративный)

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

Подборка и совмещение шрифтов

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

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

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

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

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

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

Как смешивать и использовать шрифты в тексте

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

Сайт должен быть читабельным

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

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

Не используете большое количество разных шрифтов

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

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

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

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

Не используйте неподходящие сочетания

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

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

Примеры объединения шрифтов

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

Заголовки:
Sentinel (serif slab)

Параграфы:
Gotham Narrow (sans-serif)

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

Заголовки и параграфы:
Freight Text Pro (serif)

Остальное:
Freight Sans Pro (san-serif)

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

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

Заголовки:
PMN Caecilia (slab serif).

Параграфы:
Gill Sans (sans-serif)

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

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

Заголовки и параграфы:
Skolar (serif)

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

Привет, Хабр!

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

01. Зачем вообще нужны веб-шрифты, почему не обойтись стандартными?

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

И можно было бы вовсе отказаться от стандартных шрифтов, тем более, что многие мобильные ОС их не поддерживают (например, Arial, Taһoma, Verdana и Georgia). Но, к сожалению, индустрия, много лет подгоняемая под 96 DPI экраны и джорджии-верданы, оказалась не совсем готова к быстрым переменам, и на старых ОС Windows до сих пор возникают проблемы с отображением нестандартных шрифтов из-за особенностей механизма растеризации.

02. Как выбрать хороший веб-шрифт?

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

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

03. Как браузеры отрисовывают шрифты?

Довольно часто приходилось слышать, дескать, браузеры сами отрисовывают шрифты, поэтому везде выглядят по-разному. Но на самом деле, отрисовкой шрифтов занимается специальная графическая подсистема ОС: в Windows это GDI или DirectWrite , а на OS X и iOS - CoreText (а раньше QuickDraw). Всего есть 3 распространенных механизма растеризации (рендеринга) шрифтов: двухцветное (черно-белое) пиксельное, монохромное пиксельное (его еще часто называют antialiasing или обычное сглаживание) и субпиксельное. Субпиксельное использует особенность ЖК и плазменных дисплеев, где каждый пиксель разделен на 3 части (красную, зеленую и синюю), для того, чтобы увеличить горизонтальное разрешение отрисованной картинки и повысить четкость.

Однако браузеры действительно сами выбирают способ отрисовки, из тех которые предоставлены ОС. Например, в составе GDI есть 3 варианта рендеринга: ч/б, обычное сглаживание и субпиксельный ClearType . Особенность последнего в том, что сглаживание происходит только по горизонтали, в соответствии с расположением субпикселей. Именно поэтому при его использовании мы часто наблюдаем ужасные зубцы на горизонтальных и диагональных штрихах шрифта. К счастью, Microsoft начала потихоньку совершенствовать механизм, и на смену GDI пришла технология DirectWrite, где таки появилось сглаживание по вертикали. Сравните:

04. TTF или OTF?

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

Посмотрите на картинку. Если TrueType шрифт намного читабельнее в мелком кегле, но в крупном размере мы видим характерные зубцы, то для PostScript шрифта все ровно наоборот. Так происходит потому, что для PS и TT браузеры выбирают разные методы растрирования. Для PS браузер применил обычное монохромное сглаживание, а TT был обработан ClearType’ом. Вот и получается, что для текстовых шрифтов предпочтительнее будет TrueType, а для заголовков и крупных надписей лучше подойдет PostScript.

Еще мы видим, что пока DirectWrite используют не все браузеры. Так, его до сих пор нет в Google Chrome.

05. Что еще влияет на отображение?

Иногда способ растеризации лучше задавать вручную. Например, в браузерах с движком Webkit можно использовать CSS-свойство -webkit-font-smoothing и включить вручную обычное сглаживание вместо субпиксельного, и наоборот. Есть и нетривиальные способы добиться от браузера смены способа растрирования, на хабре однажды предлагали использовать хак с text-shadow .

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

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

06. Нужен ли веб-шрифтам хинтинг?

Хинтинг - это специальные инструкции, которые жестко привязывают абстрактные кривые шрифта к пикселям на мониторе. Абсолютное большинство шрифтов (в том числе коммерческих) - не хинтованные, потому что это довольно трудоемкая и сложная процедура. Для TrueType и PostScript хинтинг выполняется по-разному. Если вы берете дешевый шрифт, безопаснее формат OTF, потому что в TT процедура осталась неизменной со времен черно-белого растрирования и не совсем адекватная, а для PS процедура проще, и у автора есть возможность сделать автоматический хинтинг.

Шрифт без хинтинга при растрировании становится замыленным, а высота букв может скакать.

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

В ОС Windows мы видим, пожалуй, самый радикальный подход: такие популярные шрифты как Tahoma, Verdana, Arial и Georgia были отхинтованы специально под GDI ClearType, и когда появился DirectWrite, пришлось перехинтовывать и обновлять основные шрифты в комплекте ОС.

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

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

07. @font-face или Cufon?

Как бы странно это не звучало, но есть еще люди, которые задают себе этот вопрос. Казалось бы, после того как браузеры начали поддерживать аттрибут @font-face, все остальные технологии встраивания шрифтов (Cufon, sIFR, Flash) вроде как должны были стать неактуальными. Но некий смысл все же остается, например способ замены шрифта изображением, когда на сайт выводятся не векторные кривые, а только отпечаток, как принтер отпечатывает его на листе или Photoshop выводит нередактируемый JPG. Это разрешено многими лицензиями на обычные (десктопные) шрифты. Некоторые производители шрифтов (например, Adobe) разрешают внедрять (в программы и на сервер) десктопный шрифт, если при этом он остается защищенным и его нельзя скачать. Если у вас нет возможности купить отдельную веб-лицензию, тогда можно применить подходящую для этого sIFR , когда шрифт встраивается с помощью флеш-объектов. Недостаток в том, что используется Flash, который поддерживается далеко не всеми устройствами. Еще можно использовать технологию Cufon (используется Canvas), если позволяет лицензия. Конечно, в данном случае скрипт будет громоздким, а выделение текста не работает, но в безвыходной ситуации подойдет.

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

08. В каких форматах должны быть файлы шрифта?

Подготовленные к внедрению (@font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах:

TTF или OTF - привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF - незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT - внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8 кроме TrueType кривых, поддерживаются и PostScript);
SVG - для поддержки браузера Safari.

09. Можно ли конвертировать веб-шрифты?

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

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

10. Сколько должны весить веб-шрифты?

Прежде чем отобразить страницу, браузер должен полностью загрузить файлы шрифтов. Может быть, вам приходилось видеть эффект «font flash» (или FOUT), когда на короткое мгновение вместо экзотических шрифтов успевают вспыхнуть стандартные шрифты системы. Нормально, если TTF (OTF) укладывается в 100 кб, а WOFF (EOT) в 50 кб. Всегда задумывайтесь о том, нужно ли вам вообще использовать нестандартные шрифты, даже если вы используете его в 1 коротком заголовке, все равно придется загружать весь файл шрифта целиком.
Чем больше в дизайне перфекционизма, тем меньше могут весить файлы шрифта, и старайтесь выбирать простые формы. В этом смысле, идеальная форма - это открытый геометрический гротеск с малым контрастом. Для ускорения загрузки шрифта, также бывает полезно включить его в файл стилей с помощью data:uri.

11. Сколько начертаний шрифта можно использовать в вебе?

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

12. Нужно ли ограничивать набор символов?

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

Тем, кто делает англоязычные сайты проще всего, им вообще не нужно грузить дополнительные знаки, достаточно тех, что есть в Basic Latin (или ASCII). Если вы используете шрифт только для заголовков на русском языке + вкрапления английского, то вам будет достаточно наборов ASCII (Basic Latin) и 64 символа русского алфавита, совсем не обязательно грузить набор Cyrillic Extended из 420 символов. Совсем другая история, если ваш сайт многоязычный, в этом случае во избежание некорректного отображения символов нужно постараться охватить все используемые языки.

13. Можно ли использовать шрифтовые клоны?

Бывает, что купить оригинал шрифта или слишком дорого, или вообще невозможно, вот тогда будет уместно подобрать шрифтовой синоним (клон). Конечно, от них не стоит ждать потрясающего качества, даже если они сделаны, скажем, именитой российской фирмой. Совсем все плохо, когда вам попался опус какого-нибудь анонимуса-грамотея, решившего опробовать себя на новой ниве, таких шрифтов остерегайтесь. Вот примеры клонов (в скобках указан оригинал): FreeSet (Frutiger), Pragmatica и Helios (Helvetica). Обратите внимание, что формы букв могут отличаться. Большое количество клонов есть в справочнике шрифтовых синонимов Паратайпа .

14. Как протестировать шрифт?

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

15. У меня на компе есть шрифт, можно ли его использовать на сайте?

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

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

16. Как купить веб-шрифт?

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

Удобный способ покупки шрифтов - через каталоги шрифтов (Fonts.com, MyFonts, Ascender, Typekit). Вы сможете просмотреть, сравнить и выбрать один из имеющихся вариантов использования, оплатить картой. Для компаний проще всего будет напрямую связаться со студией-производителем или же предоставить покупку шрифтов заказчику

А может быть вообще лучше не тратить деньги на шрифт? Существует множество замечательных бесплатных шрифтов, которые ни в чем не уступают платным!

17. Какие бывают лицензии?

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

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

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

Свободные лицензии (public domain) - автор шрифта допускает свободное распространение, с условием указания своего имени (Creative Commons) или без него (например, OFL, GPL, Apache 2.0). Этот тип лицензии допускает даже коммерческое использование, кроме продаж и платного распространения. Примеры: PT Sans, Opensans, Droid. Иногда разрешается модификация шрифта (GPL), но созданная вами модификация автоматически наследует такую же лицензию (то есть, вас тоже могут форкнуть). Свобода предполагает, что можно использовать на любых носителях, в т.ч. и веб.
Свободные для некоммерческого использования - то есть, вы можете использовать его во всех случаях, когда не заработаете на этом. Допустим, для обучения, хобби и общественных проектов. Иногда, производители разрешают использование для дизайнеров, в надежде на то, что счастливый клиент дизайнера потом купит коммерческую версию шрифта.

18. В чем отличие лицензий для веб-шрифтов?

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

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

После покупки вы получаете специальные файлы, которые встраиваете в сайт (TTF, OTF, WOFF, EOT), и некоторые шрифты не разрешают размещать данные файлы на сайте в незащищенном виде, так как теоретически третьи лица могут заполучить сами файлы шрифтов. Третий вариант – вы используете специальный веб-сервис производителя шрифтов, например как Typekit, принадлежащий компании Adobe, и платите абоненскую плату.

19. Где взять хорошие веб-шрифты?

Каталог свободных шрифтов от Google
Fontsquirrel - известный конвертер и каталог веб-шрифтов
Myfonts - огромный магазин шрифтов с удобной системой оплаты
Fonts.com - главный конкурент MyFonts
Typekit - сервис для аренды шрифтов от Adobe
Typecast - вышеупомянутый магазин с сервисом тестирования
P.S. еще один полезный ресурс, который посоветовал ilyaerin , WebFont.ru Функциональность важнее формы: проектируя для читателя
Марии Дореули. Licensing. Внести ясность
Tim Brown. Type rendering on the web
Tim Brown. CSS properties that affect type rendering
Tim Brown. Type rendering: operating systems
Tim Ahrens. A Closer Look At Font Rendering
Tim Ahrens (Typekit). A closer look at TrueType hinting
The Benefits Of OpenType/CFF Over TrueType

Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering

Здравствуйте, друзья! Сегодня мы поговорим о том, как выбирать шрифты для логотипа.

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

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

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

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

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

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

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

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

Как вы видите, шрифт логотипа может много рассказать о вашем бизнесе. Дальше мы будем говорить о том, какие есть категории шрифтов.

Категории шрифтов

Все основные шрифты можно разделить на несколько видов: Serif (с засечками), Sans serif (без засечек), рукописные, Script, машинописные шрифты, шрифты с завитушками Display.

Шрифты Serif самые традиционные. У этих шрифтов линии (черточки) в конце каждого штриха, они смотрятся профессионально и классически. Например, Times New Roman – один из самых часто используемых шрифтов Serif.

Шрифты Sans serif выглядят более чисто и современно, потому что у них нет линий в конце штрихов.

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

Шрифты Script очень изысканны и предполагают роскошь. Как и у рукописных шрифтов, у них есть характерные черты.

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

Машинописные шрифты имитируют текст, набранный на печатной машинке.

Такие шрифты неплохо сочетаются со шрифтами других групп, в отличие от декоративных шрифтов.

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

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

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

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

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

Выбирайте шрифт, не основываясь на личных предпочтениях

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

Учтите дух и особенности вашего бизнеса

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

Не копируйте конкурентов

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

Будьте оригинальными

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

Выбирайте простые шрифты

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

Как будет выглядеть выбранный шрифт в различных средах

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

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

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

Избегайте популярных шрифтов

Сейчас в Интернете столько сайтов со шрифтами, что уже нет оправданий, чтобы не исследовать их. Большинство из них позволяют просмотреть каждый шрифт, проверить как он будет смотреться с названием вашей компании, и т.д. Стоит помнить, что понравившийся вам шрифт могли использовать до вас или еще будут. Поэтому старайтесь избегать очень популярных шрифтов для своего дизайна — Roboto, Lobster, Ubuntu и т.д.
И помните, покупать шрифт или другой качественный продукт в Интернете — это нормально:)

Будьте вне времени

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

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

Никаких вычурностей

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

Дайте пространства

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

Сочетание несколько шрифтов

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

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

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

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

Сайт для подбора шрифтов

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

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

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

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

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

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

Русскоязычный веб-ресурс, представляющий собой большую библиотеку бесплатных качественных шрифтов для использования в Adobe Photoshop или на сайте.

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

Больше сайтов со шрифтами можно найти в нашей .

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

Как выбрать правильный шрифт для логотипа: полное руководство обновлено: Февраль 17, 2018 автором: admin

Как известно, шрифты бывают платные и бесплатные.

Но есть и комбинированный вариант - условно-бесплатные шрифты.

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

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

Бесплатные шрифты бывают системые и несистемные.

Набор системных шрифтов, в зависимости от версии windows или mac os может различаться, но как правило стандартный набор выглядит так:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Шрифты из этого набора ещё называют наиболее "безопасные" шрифты.

Использовать бесплатные шрифты разрешается на разных носителях по своему усмотрению.

Платные шрифты бывают с 2-мя видами лицензии :

1. Настольная лицензия

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

2. Веб-лицензия

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

• Оплата за просмотры (pageviews )
• Подписка на шрифт на месяц\полгода\год и т.д
• Подписка на тариф. Каждый тариф может ограничивать количество просмотров или количество времени на использования

Как проверить платный шрифт или нет

1. Идем на www .myfonts .com
2. Вбиваем название шрифта в строку поиска - http ://s3.micp .ru /Q48rU.jpg
3. Кликаем на нужный шрифт в результатах поиска - http ://s3.micp .ru /SoG6F.jpg
4. Кликаем на вкладку Licensing - http ://s1.micp .ru /vIOm1.jpg
5. Внимательно читаем условия использования

Заказчикам

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

Дизайнерам

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

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

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

Больше интересной информации в моём