Если вы ищите, как установить шрифт, тогда, скорее всего, знаете зачем он нужен. Позвольте предположить — вы делаете открытку на свадьбу, и хотите, чтобы поздравление выглядело экзотично, а не в стандартном шрифте Times New Roman (или, что еще хуже — Comic Sans) . Или может быть, оформляете резюме и нужно выделить заголовок особым шрифтом. Так или иначе, в связи со шрифтами возникает два вопроса:

• Где скачать красивый шрифт;
• Как установить шрифт.

Где скачать красивый шрифт

Привожу несколько сервисов, на которых можно скачать разнообразие шрифтов:

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

Как установить шрифт

На самом деле установка шрифта - дело элементарное. Вообще шрифты хранятся в папке C:/Windows/Fonts (по умолчанию она скрыта). Но, в системе предусмотрен стандартный способ установки шрифтов через интерфейс.

В панели управления есть отдельный раздел «Шрифты» . Перетянув в эту «папку» любой скачанный шрифт (файл в формате ttf) вы увидите его в списке шрифтов, например, в Photoshop. Ниже показал весь этот «процесс» на .

И как можно заметить, наш шрифт успешно появился в списке шрифтов Microsoft Word

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

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

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

Знакомьтесь, Эрик Шпикерманн

Эрик Шпикерманн - дизайнер, профессор Бременской академии искусств, член Немецкого совета по дизайну, президент Международного общества дизайнеров типографики.

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

Эрик Шпикерманн и его самая знаменитая фраза о шрифте.

Если Вы когда-нибудь были в Германии и катались на немецких поездах - надписи, схемы и указатели, которые вы видели на остановках, перронах и вокзалах, написаны шрифтом Deutsche Bahn, созданный руками Эрика Шпикермана. А еще он создал шрифт для Audi, дизайн журнала «The Еcоnomist». И написал эту книгу.

«Вся прелесть его изданий в том, что они написаны Эриком для НЕдизайнеров. Это то, что люди очень любят - дизайн и типографика обычным человеческим языком. Шпикерманн - Он просто папа Римский современной типографики и дизайна вообще».
Натали ратковски

Что внутри?

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

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

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

Буквы с характером

Всмотритесь в букву: легкая она или массивная, круглая или квадратная, тонкая или приземистая. На что похожа? Буквы могут стоять по стойке смирно, как солдаты, а могут петь или грациозно танцевать в строке, могут кричать или смеяться. Одни слова не только звучат, но и выглядят приятнее, чем другие.

Шрифт для сомнения, удивления, злости и радости. Иллюстрация из книги

В шрифте для слова joy («радость») открытые формы, уверенные штрихи и ощущение динамики. Приятно видеть, что некоторые слова содержат объяснение в буквах, из которых они состоят. Эти свободные и легкие формы определенно вызовут у вас ассоциации с радостным, распростершим руки человеком, особенно буква Y.

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

Шрифт Кафки

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

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

Шрифты группы Mister K. Иллюстрация из книги

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

Типографическая головоломка

Давайте поиграем. Как вы думаете, какой шрифт соответствует каждому виду обуви?

Иллюстрация из книги.

Какой шрифт выбрать

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

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

Выбирать подходящий шрифт для конкретного сообщения интересно и в то же время трудно. Что вы хотите вложить в сообщение, кроме фактов? Как хотите его интерпретировать, прокомментировать, украсить? Если вы остановитесь на «нейтральном» шрифте, например Times New Roman, значит, и сообщение носит нейтральный характер.

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

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

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

Разворот из книги

Еще в книге

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

• История эволюции шрифтов
• Подбор шрифта к конкретной задаче
• Удобочитаемость и разборчивость шрифта
• Как заставить шрифт работать
• Особенности экранного шрифта
• Газетная, журнальная, книжная раскладка для текста
• Будущее шрифтов
• Список литературы и сайтов по типографике

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

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

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

Давайте я напишу CSS-код , а потом его поясню:

@font-face {
font-family: SpecialFont;
src: url("font/specialfont.ttf");
}
p {
font-family: SpecialFont;
}

В результате, к тегам

будет применён шрифт SpecialFont . Я думаю, код достаточно прозрачный, но всё-таки поясню. Вам нужно раздобыть шрифт и загрузить к себе на сайте, например, в папку font . Дальше в CSS-коде прописать в @font-face его имя и путь к нему, а дальше уже можно его использовать.

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

1. Есть очень крупные шрифты, которые весят сотни килобайт, а это резко увеличит время загрузки страницы .
2. Второй минус ещё серьёзнее. Не все браузеры поддерживают такую возможность , более того, некоторым браузерам нужен шрифт в другом формате (не ttf ). Таким образом, у некоторых Ваш шрифт всё равно не отобразится. Чтобы решить данную проблему, надо загружать один и тот же шрифт в разных форматах, что в разы усилит первый минус.

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

Второй минус тоже не так принципиален. Единственные более-менее популярные браузеры, которые не поймут этого кода - это IE8 и ниже , плюс iOS . Все остальные современные браузеры без проблем данный код поймут.

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

P.S. Всех женщин поздравляю с праздников весны!

Влад Мержевич

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

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам

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

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

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

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

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

Табл. 1. Поддерживаемые форматы

Формат	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Самый поддерживаемый формат - TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Вначале загружаем сам файл шрифта с помощью правила @font-face . Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

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

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

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

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts . Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

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

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

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