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

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

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

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. Тем более, что он поддерживается последними версиями всех популярных браузеров.

Здравствуйте, уважаемые читатели!

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

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

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

Можно, но есть определенные условия.

Стандартные и нестандартные шрифты

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

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

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

Как же решить эту проблему?

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

Как подключить шрифты для сайта

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

В этой статье мы рассмотрим подробнее первый способ.

Работа с сервисом Google Fonts

Начнем с сервиса Google Fonts , как самого известного и надежного.

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

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

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

Далее переходим к последнему пункту – кнопка Use . Здесь можно скопировать код для подключения шрифта к сайту.

Этот код следует вставить на HTML-страницу вашего сайта между тэгами <head > и head >. Для сайтов на WordPress эти тэги находятся в файле заголовка header.php . В пункте 4 копируется код для описания стиля CSS.

Как видите, я выбрал три варианта, и если теперь в HTML-редакторе WordPress набрать такой код:

то на странице это будет выглядеть так:

Этот текст оформлен нестандартно. Poiret One.

Сделать это можно двумя основными способами. Russo One.

Рассмотрим подробнее первый способ. Marck Script.

Работа с сервисом AllFont.ru

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

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

После этого можно скопировать коды для вставки на сайт. Все делается аналогично тому, как делали на сайте Google Fonts. Я для примера выбрал шрифт AGZeppelin-Roman, посмотрите, как он выглядит.

Добро пожаловать в крупнейшую библиотеку AllFont.ru

Надеюсь, что статья оказалась для вас полезной. Если так, подписывайтесь на обновления блога, так как готовятся новые полезные статьи.

До скорых встреч.

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

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

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

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

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

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

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

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

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

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

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

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

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)

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