Эффективный сайт некоммерческой организации. Веб-шрифты

Снимок экрана 2013-01-24 в 12.51.19
Текст явля­ет­ся глав­ным спо­со­бом пере­да­чи инфор­ма­ции в Сети и, как след­ствие, одним из важ­ней­ших ком­по­нен­тов веб-сай­та. Есте­ствен­ным и логич­ным при таком поло­же­нии дел выгля­дит жела­ние любо­го вла­дель­ца сай­та добить­ся того, что­бы его тек­сты были не толь­ко инфор­ма­тив­ны­ми и увле­ка­тель­ны­ми, но еще и хоро­шо выгля­де­ли. Для это­го совре­мен­ные тех­но­ло­гии веб-дизай­на и верст­ки предо­став­ля­ют обшир­ный арсе­нал инстру­мен­тов. Сего­дня мы пого­во­рим о самом глав­ном из них – шриф­те и осо­бен­но­стях его при­ме­не­ния на веб-сай­тах.

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

Acumen Fund
Фраг­мент сай­та Acumen Fund
National Tank Truck Carriers
Фраг­мент сай­та National Tank Truck Carriers

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

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

  1. Файл опре­де­лен­но­го фор­ма­та. Файл шриф­та, что­бы его мог­ла исполь­зо­вать про­грам­ма, с кото­рой мы рабо­та­ем, дол­жен быть опре­де­лен­но­го «извест­но­го этой про­грам­ме» фор­ма­та. Фор­ма­тов ком­пью­тер­ных шриф­тов суще­ству­ет несколь­ко, что авто­ма­ти­че­ски порож­да­ет про­бле­му сов­ме­сти­мо­сти. Все уси­лия по поис­ку и под­бо­ру шриф­та сой­дут на нет, если он не под­дер­жи­ва­ет­ся про­грам­мой, в кото­рой про­смат­ри­ва­ет­ся текст.
  2. Исполь­зу­ет­ся про­грам­мой или ОС. Файл шриф­та дол­жен быть физи­че­ски досту­пен систе­ме, что­бы его мож­но было исполь­зо­вать для отоб­ра­же­ния тек­ста. В усло­ви­ях Интер­не­та это – нетри­ви­аль­ная зада­ча. Ведь сайт про­смат­ри­ва­ет­ся на мно­же­стве раз­ных ком­пью­те­ров, и мы вовсе не можем быть уве­ре­ны, что на них есть необ­хо­ди­мые шриф­ты.
  3. Опи­са­ние набо­ра букв и зна­ков. Мы долж­ны быть уве­ре­ны, что шрифт содер­жит гли­фы, опи­сы­ва­ю­щие все сим­во­лы в отоб­ра­жа­е­мом тек­сте. Напри­мер, если мы будем пытать­ся отоб­ра­зить рус­ский текст с исполь­зо­ва­ни­ем шриф­та, в кото­ром отсут­ству­ют кирил­ли­че­ские гли­фы, у нас ниче­го не полу­чит­ся.
  4. При­ме­не­ние для отоб­ра­же­ния сим­во­лов. Необ­хо­ди­мо иметь спо­соб про­ин­фор­ми­ро­вать про­грам­му, в кото­рой осу­ществ­ля­ет­ся про­смотр тек­ста, о том, какая имен­но его часть долж­на отоб­ра­жать­ся с исполь­зо­ва­ни­ем того или ино­го шриф­та.

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

Поиск шрифта для веб-сайта

Самая пер­вая зада­ча, кото­рую нам необ­хо­ди­мо решить, это – най­ти и выбрать под­хо­дя­щий шрифт и убе­дить­ся, что:

  • он под­дер­жи­ва­ет нуж­ный язык (в част­но­сти, рус­ский)
  • лицен­зия шриф­та допус­ка­ет его исполь­зо­ва­ние на веб-сай­те

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

  • MyFonts – круп­ней­шая онлайн биб­лио­те­ка шриф­тов, предо­став­ля­ет удоб­ную систе­му поис­ка с подроб­ной инфор­ма­ци­ей о каж­дом шриф­то­вом семей­стве и воз­мож­но­стью ска­чать или при­об­ре­сти выбран­ные вари­ан­ты.
  • Google Webfonts – биб­лио­те­ка сво­бод­но-рас­про­стра­ня­е­мых шриф­тов, создан­ная ком­па­ни­ей Google, все шриф­ты из дан­ной кол­лек­ции могут быть сво­бод­но исполь­зо­ва­ны на любых сай­тах, при этом Google так­же предо­став­ля­ет про­стой интер­фейс для их встра­и­ва­ния.
  • Adobe Edge Web Fonts – ана­ло­гич­ный сер­вис от Adobe, содер­жа­щий боль­шой ката­лог сво­бод­но-доступ­ных шриф­тов, сред­ства поис­ка и тести­ро­ва­ния, воз­мож­ность встра­и­ва­ния в сайт.
  • free.type.org.ua – попол­ня­е­мая кол­лек­ция сво­бод­но-рас­про­стра­ня­е­мых шриф­тов с под­держ­кой кирил­ли­цы.

Если в назва­нии шриф­та его кирил­ли­че­ская сущ­ность не ука­за­на явно (напри­мер, Museo Sans Cyrillic), то что­бы убе­дить­ся в под­держ­ке рус­ско­го язы­ка, необ­хо­ди­мо либо про­смот­реть таб­ли­цу содер­жа­щих­ся в нем сим­во­лов, либо попро­бо­вать что-нибудь им напи­сать. Неко­то­рые онлайн биб­лио­те­ки предо­став­ля­ют такую воз­мож­ность, аль­тер­на­тив­но мож­но исполь­зо­вать сер­ви­сы для тести­ро­ва­ния шриф­тов, напри­мер:

  • Typetester – тести­ро­ва­ние и срав­не­ние шриф­тов, путем про­смот­ра тесто­во­го тек­ста с настра­и­ва­е­мы­ми пара­мет­ра­ми, таки­ми как раз­мер кег­ля, меж­строч­ное рас­сто­я­ние и т.п.
  • Wordmark – про­стой сер­вис тести­ро­ва­ния шриф­тов, уста­нов­лен­ных на ком­пью­те­ре, посред­ством отоб­ра­же­ния тесто­вой фра­зы, кото­рую ввел посе­ти­тель

Шрифт мож­но исполь­зо­вать на сай­те, толь­ко в слу­чае если лицен­зи­он­ное согла­ше­ние (EULA) при­об­ре­тен­ная у дизай­не­ра или агент­ства раз­ре­ша­ет это. Мно­гие про­из­во­ди­те­ли шриф­тов (в том чис­ле и кирил­ли­че­ских, напри­мер, ParaType) предо­став­ля­ют такую лицен­зию. В каче­стве аль­тер­на­ти­вы покуп­ки веб-лицен­зии шриф­та у отдель­но­го агент­ства, высту­па­ют сер­ви­сы встра­и­ва­е­мых шриф­тов (Web Font Embedding Services). Они пред­став­ля­ют собой по сути уда­лен­ные биб­лио­те­ки шриф­тов, даю­щие сво­им кли­ен­там воз­мож­ность под­гру­жать шриф­ты и встра­и­вать их в свои сай­ты за неко­то­рую або­нент­скую пла­ту (обзор сер­ви­сов встра­и­ва­ния). Наи­бо­лее попу­ляр­ные сре­ди них:

Одна­ко все эти сер­ви­сы в силу сво­е­го про­ис­хож­де­ния ори­ен­ти­ро­ва­ны в первую оче­редь на зару­беж­ный (исполь­зу­ю­щий лати­ни­цу) рынок и коли­че­ство шриф­тов, под­дер­жи­ва­ю­щих кирил­ли­цу, у них неве­ли­ко. Цена же под­пис­ки на эти сер­ви­сы доста­точ­но высо­ка и может быть при­зна­на неоправ­дан­ной для отдель­но­го неком­мер­че­ско­го про­ек­та. Достой­ной аль­тер­на­ти­вой им слу­жит исполь­зо­ва­ние сво­бод­но-рас­про­стра­ня­е­мых шриф­тов, напри­мер из уже упо­ми­нав­ших­ся Google Webfonts или Adobe Edge Web Fonts, а так­же предо­став­ля­е­мых отдель­ны­ми дизай­не­ра­ми или агент­ства­ми (подроб­нее о про­бле­ме лицен­зи­ро­ва­ния шриф­тов для веб рас­ска­зы­ва­ет ста­тья A List Apart).

Форматы шрифтов для веб

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

TTF – TrueType – фор­мат ком­пью­тер­ных шриф­тов, раз­ра­бо­тан­ный фир­мой Apple в кон­це 1980-х годов, сей­час исполь­зу­ет­ся ком­па­ни­я­ми Apple и Microsoft в сво­их опе­ра­ци­он­ных систе­мах. Фай­лы шриф­тов име­ют рас­ши­ре­ние .ttf.

OTF – OpenType – фор­мат фай­ла шриф­тов раз­ра­бо­тан­ный сов­мест­но Microsoft и Adobe для при­ме­не­ния в сво­их опе­ра­ци­он­ных систе­мах. OpenType обла­да­ет боль­ши­ми по срав­не­нию с TrueType воз­мож­но­стя­ми до печат­ной под­го­тов­ки и под­дер­жи­ва­ет боль­ший набор сим­во­лов при мень­шем раз­ме­ре фай­ла. Крос­сплат­фор­мен­ность OpenType дости­га­ет­ся за счет вклю­че­ния в один файл и Windows и Mac OS-вер­сий дан­но­го шриф­та. Фай­лы шриф­тов име­ют рас­ши­ре­ние .ttf или .otf.

EOT – Embedded OpenType – ком­пакт­ный фор­мат внед­ря­е­мых в веб стра­ни­цы OpenType шриф­тов раз­ра­бо­тан­ный Microsoft. Фай­лы таких шриф­тов обыч­но име­ют рас­ши­ре­ние .eot. Фор­мат Embedded OpenType про­при­е­тар­ный и под­дер­жи­ва­ет­ся исклю­чи­тель­но бра­у­зе­ром Internet Explorer.

WOFF – Web Open Font Format – фор­мат сжа­то­го шриф­та OpenType или TrueType, пред­став­ля­ет собой что-то вро­де кон­тей­не­ра, кото­рый содер­жит в себе ори­ги­наль­ные шриф­ты в фор­ма­те OpenType или TrueType. При этом исход­ные шриф­ты сжи­ма­ют­ся для удоб­ства пере­да­чи и сопро­вож­да­ют­ся рядом дан­ных, кото­рые может доба­вить раз­ра­бот­чик шриф­та.

SVG – Scalable Vector Graphics – язык раз­мет­ки мас­шта­би­ру­е­мой век­тор­ной гра­фи­ки, в с помо­щью кото­ро­го мож­но опи­сать и пред­став­ле­ние шриф­та.

Веб-сай­ты про­смат­ри­ва­ют­ся посе­ти­те­ля­ми с исполь­зо­ва­ни­ем раз­лич­ных бра­у­зе­ров, кото­рые в свою оче­редь функ­ци­о­ни­ру­ют в раз­лич­ных опе­ра­ци­он­ных систе­мах (Windows, Mac OS, Linux, Android, iOS и т.п.). Исполь­зуя нестан­дарт­ный шрифт, мы долж­ны обес­пе­чить его отоб­ра­же­ние в боль­шин­стве (в иде­а­ле во всех) слу­ча­ях. Так как ни один из ука­зан­ных вари­ан­тов не явля­ет­ся пол­но­стью кросс-плат­фор­мен­ным, их при­дет­ся исполь­зо­вать несколь­ко, что­бы решить эту зада­чу. Обыч­но реко­мен­ду­ет­ся иметь сле­ду­ю­щую ком­би­на­цию фор­ма­тов для уста­нов­ки на сайт: TTF, WOFF, EOT, SVG. Имея шрифт TTF или OTF мож­но кон­вер­ти­ро­вать его, исполь­зуя, напри­мер, гене­ра­тор Fontsquirrel – сер­вис поз­во­ля­ет загру­зить шрифт и кон­вер­ти­ро­вать его в необ­хо­ди­мые фор­ма­ты. Кро­ме это­го, он гене­ри­ру­ет код CSS, кото­рый мож­но исполь­зо­вать для после­ду­ю­щей уста­нов­ки шриф­тов на сайт.

При исполь­зо­ва­нии биб­лио­те­ки Google или Adobe Edge – мож­но не бес­по­ко­ит­ся о фор­ма­тах. Предо­став­ля­е­мый ком­па­ни­я­ми про­грамм­ный сер­вис опре­де­ля­ет под­держ­ку шриф­та в боль­шин­стве слу­ча­ев.

Встраивание шрифтов в сайт

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

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

Соот­вет­ствен­но, все воз­мож­но­сти веб-типо­гра­фи­ки того пери­о­да были сосре­до­то­че­ны в десят­ке шриф­тов, кото­рые вхо­ди­ли в состав «без­опас­но­го» набо­ра. Одна­ко с раз­ви­ти­ем CSS появи­лась воз­мож­ность «встра­и­вать» шриф­ты в сайт, т.е. раз­ме­щать файл шриф­та вме­сте с дру­гим содер­жи­мым сай­та на сер­ве­ре и ссы­лать­ся на него в коде шаб­ло­нов с тем, что­бы он загру­жал­ся бра­у­зе­ром при про­смот­ре сай­та и таким обра­зом ста­но­вил­ся доступ­ным для исполь­зо­ва­ния на ком­пью­те­ре поль­зо­ва­те­ля. Это дости­га­ет­ся с помо­щью дирек­ти­вы @font-face, она под­дер­жи­ва­ет­ся боль­шин­ством совре­мен­ных бра­у­зе­ров и исполь­зу­ет­ся на все боль­шем чис­ле сай­тов. Но и при ее исполь­зо­ва­нии не сле­ду­ет забы­вать ука­зы­вать «стра­хо­воч­ные» вари­ан­ты шриф­тов, кото­рые могут быть исполь­зо­ва­ны в слу­ча­ях, когда основ­ной шрифт по какой-то при­чине ока­зал­ся недо­ступ­ным. Итак, встра­и­ва­ем шрифт, рас­по­ло­жен­ный на соб­ствен­ном сер­ве­ре.

  1. Нахо­дим нуж­ный шрифт в фор­ма­те TTF или OTF, про­ве­ря­ем, под­дер­жи­ва­ет ли он нуж­ный нам язык.
  2. Исполь­зу­ем гене­ра­тор Fontsquirrel для кон­вер­та­ции шриф­та в раз­лич­ные веб-фор­ма­ты.
Рабочий экран генератора Fontsquirrel
Рабо­чий экран гене­ра­то­ра Fontsquirrel
  1. Ска­чи­ва­ем созда­ва­е­мый гене­ра­то­ром @font-face-пакет, кото­рый вклю­ча­ет в себя фай­лы шриф­тов (их необ­хо­ди­мо раз­ме­стить на сер­ве­ре, вме­сте с дру­ги­ми эле­мен­та­ми шаб­ло­на) и заго­тов­ку @font-faceпра­ви­ла, кото­рое необ­хо­ди­мо раз­ме­стить в самом нача­ле фай­ла сти­лей на сво­ем сай­те, убе­див­шись, что пути к фай­лам шриф­тов в нем ука­за­ны вер­но.
    @font-face { font-family: 'myfont'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg'); font-weight: normal; font-style: normal; } 
  2. Ука­зы­ва­ем в сти­лях, к каким эле­мен­там дол­жен быть при­ме­нен встро­ен­ный шрифт с помо­щью регу­ляр­но­го CSS син­так­си­са.
СSS правило для применения шрифта к элементу текста
СSS пра­ви­ло для при­ме­не­ния шриф­та к эле­мен­ту тек­ста

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

  1. Выби­ра­ем шрифт в биб­лио­те­ке и про­ве­ря­ем, под­дер­жи­ва­ет ли он нуж­ный язык.
  2. В режи­ме «быст­ро­го исполь­зо­ва­ния» выби­ра­ем необ­хо­ди­мый нам вари­ант начер­та­ния и набо­ры сим­во­лов, кото­рые необ­хо­ди­мо под­дер­жи­вать. Чем боль­ше вари­ан­тов мы захо­тим исполь­зо­вать, тем «тяже­лее» файл шриф­та и как след­ствие боль­ше вре­мя его загруз­ки. Поэто­му не выби­рай­те лиш­не­го.
  3. Копи­ру­ем гене­ри­ру­е­мый систе­мой код и встав­ля­ем его в код шаб­ло­на сай­та меж­ду тэга­ми <head></head> перед дру­ги­ми ссыл­ка­ми на .css фай­лы.
  4. Ука­зы­ва­ем в сти­лях, к каким эле­мен­там дол­жен быть при­ме­нен встро­ен­ный шрифт с помо­щью регу­ляр­но­го CSS син­так­си­са, так­же как и в преды­ду­щем слу­чае.

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

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