Использование шрифтов в современном дизайне. Как определить шрифт по картинке. Помните, что не все зависит от выбора шрифта
Если вы уже познакомились с основами типографии и знаете, где можно найти подходящие для вас шрифты, то самое время познакомиться с классификацией шрифтов и их типами. В наше время существует достаточно большое количество самых разнообразных шрифтов. Они бывают как платные, так и бесплатные.
Основные группы шрифтов
Сейчас существует очень много различных шрифтов. Все они имеют специфические характеристики, благодаря которым их можно разделить на группы:
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 и включить вручную обычное сглаживание вместо субпиксельного, и наоборот. Есть и нетривиальные способы добиться от браузера смены способа растрирования, на хабре однажды предлагали .Нельзя забывать и про размер шрифта (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. Где взять хорошие веб-шрифты?
Каталог свободных шрифтов от GoogleFontsquirrel - известный конвертер и каталог веб-шрифтов
Myfonts - огромный магазин шрифтов с удобной системой оплаты
Fonts.com - главный конкурент MyFonts
Typekit - сервис для аренды шрифтов от Adobe
Typecast - вышеупомянутый магазин с сервисом тестирования
P.S. еще один полезный ресурс, который посоветовал , 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
Шрифт - это важно. Как воздух, который не замечаешь, пока все в порядке. Большинство людей понятия не имеют, как называются шрифты и чем они различаются (и это нормально), но безошибочно чувствуют, что с вашим сайтом что-то не то, если шрифт, который вы используете, не подходит вашему проекту.
Что такое насыщенность шрифта
Читабельность шрифта
Какой бы шрифт вы не выбрали, он должен хорошо читаться. Особенно, если вы используете фоновую фотографию. Если поставить тонкое начертание на фотографию с мелкими деталями, текст читаться не будет. Всегда обращайте на это внимание.
Что можно сделать? Во-первых, использовать фото, подходящее для фона: с крупными, однородными элементами. Во-вторых, приглушить фотографию с помощью фильтра, она станет ровнее и текст будет читаться лучше. В-третьих, можно у конкретного блока увеличить насыщенность, применяя «инлайновый стиль». Это значит, что вы задаете настройки не для всего сайта, а только для части текста. Нужно выделить текст и задать параметры через редактор.
Стиль, который применятся таким образом, поверх глобальных настроек, всегда будет приоритетным. Поэтому, если вдруг вы меняете параметры в настройках сайта, а изменения не видны, значит в этом месте применен «инлайновый стиль». Чтобы его убрать, нужно выделить текст и нажать иконку «очистить».
Пример 1: Текст читается не очень
Пример 2: Текст читается хорошо
Если тема выбора шрифта вам интересна, найдите хорошие сайты, близкие к вашему проекту, и посмотрите какие шрифты они используют. Определить это поможет расширение для браузера What Font .
Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ - ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.
Замечали ли вы за собой то, что когда вы смотрите на какой-то логотип , то ваш мозг подсознательно пытается определить, какой шрифт там был использован? Если вы являетесь дизайнером, то это наверняка случалось с вами. Не существует какого-то четкого руководства относительно того, какой шрифт вам применить в том или ином логотипе, и поэтому, учитывая сотни тысяч бесплатных шрифтов в интернете, грамотный подбор подходящего шрифта – это настоящая сложнейшая задача.
Если вы перепробовали сотни шрифтов, но так и не нашли подходящий или вы просто хотите знать, какие шрифты используют другие дизайнеры, то эта статья как раз для вас. Сегодня мы хотим проанализировать одни из известнейших брендов, и рассказать о том, какие шрифты использованы в их логотипах. Это поможет вам развить идею для последующих проектов, но советуем вам не увлекаться, а то у вас выйдет тот же самый логотип:)
01. Zopa.com
На логотипах многих популярных веб-сайтов преобладают серая цветовая схема со светлыми бликами. Логотип веб-сайта Жопа:) и общая картина сайта являются ярким тому примером.
02. Shutterfly
Современный логотип Shutterfly очень прост и задорен. Данное изображение отображает нам то, что жизнь течет так быстро, что не стоит быть таким серьезным. Общая картина дополняется тем, как в логотипе применена современная тенденция и светлые проблески.
03. NewsGator
В логотипе этого сайта использован интересный шрифт на разноцветном фоне.
04. Shoutwire
Возникает много споров по поводу использования заглавных букв в логотипах, но создатели данного логотипа показывают нам то, что тот, кто выступает против, тоже иногда ошибается.
05. Shozu
Ультра-современный дизайн в стиле современных лучших веб-сайтов. Когда использованный шрифт подкреплен правильными цветами, ваш веб-сайт обязательно привлечёт внимание.
06. Facebook
На логотипе facebook простенькая надпись с четкими и ясными углами, которая расположена на темно-синем фоне, что делает логотип легко различимым. Логотип facebook является превосходным примером минимализма.
07. Twitter
Светло-синие буковки с закругленными углами – вот и готово! Теперь вы легко отличите известное лого Twitter.
08. Digg
В отличие от предыдущего шрифта, здесь у нас нет закругленных углов вообще: всё в строгости, а диагональное направление создает особое впечатление.
09. Cork’d
Очень задорный шрифт, где внимание уделено каждому символу. Все это представляет собой логотип Cork’d.
10. Vimeo
Полужирный наклонный шрифт, напоминающий ручное написание. Практически универсальный шрифт, который подойдет любому интерфейсу.
11. Last.FM
Очень утонченные узкие символы с закругленными углами способствуют получению отличного логотипа, подходящего для музыкального веб-сайта.
12. Technorati
Если логотип Technorati «оторвать» от содержимого веб-сайта, то вряд ли можно будет понять, для чего этот логотип используется.
13. Flickr
Шрифт, названный в честь своего создателя, Адриана Фрутигера (Adrian Frutiger) крайне часто используется в различных логотипах и рекламных кампаниях. Например, логотип сервиса Flickr очень популярен.
14. Youtube
Прямой диагональный шрифт на красном фоне.
15. Google
Здесь есть нечто от каллиграфии + контрастная высота строки. Поиграйте немного с цветами, и вы получите точную копию логотипа Google.
16. Yahoo
Ну, этот шрифт легче всего подделать: здесь использован уникальный шрифт, который доступен для свободного скачивания.
17. Hulu
Никаких дополнительных деталей: плавные линии и закругленные углы позволяют нам получить вполне элегантный логотип.
18. TMZ
Логотип TMZ представляет собой очень эффективное применение шрифта Amelia.
19. Linked-in
Myriad Pro Bold уже давно используется в различных вариациях, но именно вариант на логотипе LinkedIn принес ему популярность.
20. Skype
Плавные изгибы символов, немного задвинутых друг на друга создают вполне уникальную комбинацию.
Используемый шрифт .
Как известно, основу любого рекламного проспекта, веб-сайта или объявления составляет текст, который несет в себе ту или иную информацию для конкретной целевой аудитории. Поскольку информацию каждый человек, в первую очередь, воспринимает из прочитанного, то шрифт становится наиболее важным и интересным инструментов в арсенале любого профессионального дизайнера, занятого в самых разных областях, будь то полиграфия или создание веб-сайтов. Знания о том, как можно грамотно использовать те или иные шрифты, помогают лучше донести определенную информацию до людей и, тем самым, способствуют большей эффективности практически любого дизайнерского проекта.
Требования к шрифтам
Шрифт сегодня воспринимается как неотъемлемая часть дизайна, ведь сами буквы, составляющие определенную текстовую информацию, являются маленькими изображениями или картинками, которые по-разному воспринимаются читающими людьми. Определенный шрифт может как улучшить оформление полиграфической продукции или веб-сайта, так и совершенно отвлечь человека от заданной тематики и усложнить восприятие информации.
Таким образом, от подбора шрифта напрямую зависит легкость визуального восприятия. В настоящее время шрифты активно используются в области дизайна в самых разнообразных вариациях. Например, на Интернет-сайтах, помимо просто текстовой информации, представленной посредством использования определенных шрифтов, часто можно увидеть отдельные текстовые блоки, заменяющие картинки. Они выполняются в интересных шрифтовых сочетаниях и, тем самым, более изящно и красиво передают необходимую информацию, делая сам Интернет-ресурс стильным и современным. Красивые и вычурные шрифты нередко применяются и в качестве украшения или отличного дополнения к фотоизображениям и рисункам.
Использование шрифтов в дизайне подчинено определенным правилам, чтобы, например, пользователи, посещающие Интернет-ресурс, с легкостью читали и правильно воспринимали содержание сайта. Можно выделить два основных таких правила или требований к используемым шрифтам:
— Четкость
Данное требование, в частности, определяет такие параметры шрифта, как ширина штрихов, наличие засечек и др. Ясный, разборчивый шрифт позволяет читателю быстро отличить один символ (букву) от другого. Очевидно, что вычурные, эффектные шрифты с чрезмерными украшениями имеют не самую высокую четкость, поэтому они сразу бросаются в глаза, но их не комфортно читаются в длину. В свою очередь, шрифты с привычными взгляду буквами способствуют лучшему восприятию текстовой информации.
На четкость влияет также близость расположения символов — приличный промежуток между буквами позволяет человеку воспринимать текст легче и быстрее. Впрочем, слишком большие расстояния между буквами приводят к тому, что отдельные слова и сам текст начинают смотреться негармонично и не целостно. Кроме того, излишняя высота строчных знаков может уменьшать четкость некоторых букв.
— Читабельность
Второе важное требование к используемым в дизайне шрифтам – это читабельность. Можно подумать, что четкость и читабельность являются практически идентичным понятием, однако в действительности это не совсем так. Читабельность определяет расположение шрифта, например, на странице веб-сайта. Здесь учитываются такие параметры, как интервалы между соседними строками абзаца (интерлиньяж), размер межбуквенного расстояния, цвет и стиль текста. Все эти параметры обеспечивают тот или иной уровень читабельности текстовой информации.
Обеспечение читабельности текста, как правило, является приоритетом для дизайнера, и иногда приходиться делать выбор в пользу лучшей читабельности, нежели красивого стилистического оформления. Чтобы повысить читабельность текста, используются шрифты, разработанные для решения конкретной задачи, которую преследует дизайнер. Это отдельные шрифты для заголовков с целью привлечения внимания читателя, шрифты для общего блока текста, которые оптимально подходят для длительной зрительной нагрузки.
Группы шрифтов
На сегодняшний день существует огромное многообразие шрифтов, которые широко используются в различных областях дизайна. Их можно классифицировать по различным признакам, однако, исходя из особенностей начертания, можно выделить несколько основных групп:
— Шрифты с засечками
Засечки– это маленькие росчерки или черточки у основания буквы, либо в ее верхней части. Засечки, определяющие шрифт, отличаются разнообразием, ведь они создавались на протяжении столетий. Засечки несут в себе не только чисто эстетическую функцию, но также помогают человеческому глазу «зацепиться» за текст и создать необходимое пространство между буквами. Шрифты с засечками используются в полиграфической продукции, в книгах и на веб-сайтах. Их главная особенность заключается в простоте для чтения и возможности использования в больших текстовых блоках.
Засечки способствуют формированию ощущения линий вдоль текстовой информации, что помогает читателю более комфортно следовать по тексту и, соответственно, облегчают его восприятие. Они также способствуют упорядочиванию горизонтальной текстуры шрифта. В печатных материалах чаще всего используются именно шрифты с засечками, поскольку на бумажном листе текст, оформленный при помощи подобного шрифта, читается гораздо легче.
Шрифты с засечками подразделяются на несколько категорий. Это, во-первых, образцы старого стиля, характеризующиеся изогнутыми линиями букв, их однотипностью. Они являются наиболее предпочтительным вариантом для оформления текстов, занимающих весомую часть, поскольку такие шрифты характеризуются фактическим отсутствием каких-либо нюансов, мешающих чтению и быстрому восприятию информации.
Далее идут шрифты современного стиля, в которых имеются контрастные акценты, присутствуют более тонкие горизонтальные засечки. Они хорошо выглядят при оформлении заголовков, но в больших текстовых блоках вследствие резкого перехода от толстой линии к тонкой их применение чревато снижением читабельности текста. Так же выделяют так называемые египетские шрифты с едва заметным переходом или легким контрастом от более толстой линии к тонкой. Шрифты египетского стиля оптимальны для оформления длинных текстовых блоков, их нередко используют при оформлении детских изданий.
— Шрифты без засечек
Следующая группа – шрифты без засечек. У них фактически нет дополнительного акцента на каждую букву в виде нажима при плавном переходе от более толстой линии к тонкой. Благодаря этой особенности они обладают равномерной шириной хода. Если шрифты с засечками рекомендованы для оформления длинных текстов на бумажных материалах, то шрифты без засечек выгоднее использовать в Интернете. Подобные шрифты создают настроение молодости, свежести, стиля и рациональности.
— Рукописные шрифты
Шрифты этой группы имитируют почерк человека. Они предполагают написание текстовой информации ручным способом с помощью специальной кисточки, либо ручки для каллиграфии. Здесь все буквы связаны между собой. Зачастую подобные шрифты смотрятся очень эффектно, но не оптимальны в плане использования в длинных текстах в силу не самой высокой четкости и читабельности.
— Декоративные шрифты
Это довольно большая группа шрифтов, причем их количество с каждым годом увеличивается. Декоративные шрифты отличаются необычными линиями и порой экстравагантными буквенными формами. Применяют их дозировано, в основном для создания бросающихся в глаза заголовков, логотипов и надписей.
Подбор шрифта
В настоящий момент профессиональные дизайнеры не испытывают дефицита в шрифтах, они могут свободно выбирать из бесчисленного количества доступных вариантов. Но именно в силу такого широкого разнообразия вопрос выбора оптимального шрифта для конкретного проекта становится чрезвычайно сложным, ведь зачастую у дизайнеров уходит огромное количество времени только на то, чтобы просмотреть новые шрифты, появляющиеся регулярно.
Уже невозможно даже представить себе, сколько шрифтов появилось к текущему моменту. Помимо оптимального баланса читабельности и ясности, чтобы отобрать подходящий шрифт, дизайнер, прежде всего, задается вопросом, какую реакцию на шрифт он хочет получить от читателей. Шрифт должен удовлетворять требованиям конкретной целевой аудиторией и определенной задаче, стоящей перед дизайнером.
В частности, при создании дизайнерского проекта сайта на детскую тематику чаще выбирается стилевое решение Интернет-страниц с нежными, пастельными тонами, утонченностью и элегантностью. Естественно, шрифт выбирается более тонкий и легкий, без засечек, чтобы он соответствовал восприятию сайта и подчеркивал общее стилевое решение. Если же создается рекламный буклет, посвященный выставке художников-импрессионистов в художественной галерее или музее, то тут предпочтительным выглядит классический шрифт с засечками.
Грамотный выбор шрифтов играет важную роль в работе дизайнера, поскольку несоответствие особенностей шрифта специфике и настроению проекта может обернуться полнейшей неудачей. Кстати, на большинство популярных шрифтов сегодня имеются детальные обзоры, призванные помочь дизайнерам понять, какой шрифт выгоднее или, наоборот, не рекомендуется применять в тех или иных ситуациях.
Начинающие дизайнеры часто пытаются выделиться и стараются обильно использовать различные цвета и всевозможные декоративные эффекты. Например, большое количество разнообразных шрифтов в одном и том же дизайне. Но опытные профессиональные дизайнеры при оформлении текстовой информации чаще всего ограничиваются одним шрифтом. Плюс, иногда они применяют, так называемый, добавочный шрифт, который чаще всего используется для заголовков и подзаголовков. Или с помощью главного шрифта выделяют конкретные части текстовой информации за счет повышения контраста по отношению ко второму, более стандартному и привычному глазу шрифту.
В целом, минимальный набор шрифтов позволяет следовать важному принципу целостности и соответствия в дизайне. Дизайнерский проект без пестрящих декоративных элементов, разнообразия стилей и с использованием ограниченного количества шрифтов смотрится в действительности куда более осмысленно и привлекательнее для читателя.
В зависимости от стоящей перед ним задачи дизайнер пытается подобрать тот шрифт, который будет в наибольшей степени соответствовать особенностям проекта и сможет выделяться на фоне остальных. Неумелое и произвольное применение шрифтов способно оттолкнуть читателей от создаваемых материалов. Не существует какого-либо идеального или универсального шрифта. Любой из широкого набора доступных на сегодня шрифтов может смотреться по-разному в рамках общей стилистики и поэтому к выбору шрифта профессиональные дизайнеры всегда относятся со всей внимательностью и осторожностью.
