Непосредственно веб-дизайнеры сталкиваются с двумя основными категориями приёмов типографского оформления:
* с теми, которые определяют ваш выбор шрифта
* и с теми, применение которых допускает вариативность (часто за счёт использования CSS).
Поэтому вам крайне важно уметь чётко формулировать ваши мысли, излагая (клиентам или сотрудникам) ваши соображения и решения по части типографского оформления. Мы не станем вдаваться в тонкости, оценивая степень округлости каплевидных засечек или форму диакритических значков, лучше сосредоточимся на понятиях, составляющих суть типографики, ведь веб-дизайнерам важна именно она.
Своя рука - владыка
Ряд базовых характеристик типографского оформления могут варьироваться через использование CSS. Например, набор текста шрифтами того или иного семейства - пожалуй, важнейшая его особенность.
Часто приходится слышать споры по поводу значений терминов "font" ("шрифт") и "typeface" ("гарнитура"), так что, вам следует уяснить себе разницу между ними. Шрифт - это укомплектованный набор знаков; изначально так называли печатные формы, с которых делали оттиски, а теперь ещё и цифровые файлы. Это физическая оболочка текста.
Гарнитура же - творение дизайнера; графическое построение. Мне всегда нравилась сравнительная параллель на примере из области музыки; вы покупаете компакт-диск (ну, покупали ещё пару лет назад), служащий носителем данных и позволяющий вам слушать музыку при его проигрывании. Вы же не слушаете сам диск. То же и здесь - вы подбираете шрифты, чья гарнитура вас устраивает, то есть, подходящего начертания.
CSS-технология позволяет нам выбирать наиболее предпочтительные для нас семейства шрифтов, ранжировать их по степени пригодности. Мы называем это списком или последовательностью шрифтов.
С помощью каскадных таблиц стилей также можно варьировать насыщенность закраски элементов шрифта. Насыщенность или "жирность" - термин для обозначения толщины штриха символа в относительном выражении.
Выпускаются модификации многих шрифтов различной степени насыщенности, чьи линии контура проще всего описать: тонкие, стандартные, книжные, жирные, плюс ещё целый ряд вариаций. Точнее определить "жирность" шрифта можно по шкале TrueType со значениями от 100 до 900 единиц (и соответствии отметки 400 нашему общепринятому представлению о стандарте).
В идеале шрифты нужно выпускать разных по толщине штриха модификаций, чью градацию отражали бы либо цифры, либо словесные названия, тогда их можно будет варьировать средствами CSS: {font-weight: 300;} - плотность заливки штриха задаётся в 300 единиц, {font-weight: bold;} - плотность заливки штриха задаётся для получения полужирной линии. Если некая вариация шрифта браузером не воспроизводится, то браузер часто пытается задать плотность штриха самостоятельно, но результат может оказаться едва ли приемлемым.
Регистры - верхний и нижний - служат для набора, соответственно, прописных и строчных букв. Термин "регистр" ("case" - "ящик, короб") первоначально обозначал ячейки наборной кассы в типографиях (в верхних ячейках стеллажа хранились заглавные буквы шрифта, в нижних... ну, принцип вам ясен).
Привязку символов к регистру (при желании) можно менять посредством CSS, например, так: {text-transform: uppercase;}.
Раз уж мы заговорили о регистрах, заметим, что при использовании верхнего, желательно иногда (особенно, имея дело с мелкими шрифтами) увеличивать интервал между символами, набирать их вразрядку для лучшей читаемости текста. В CSS-терминологии мы называем это разреживанием набора, и присваивать этому параметру можно как положительные, так и отрицательные значения, рассчитываемые обычно в сотых долях "эма" (ширины буквы "m").
Разреживание набора принято называть трекингом. За счёт трекинга регулируется плотность набора символов в отдельной строке или фрагменте текста. Термин пришёл к нам из прошлого (подобно многим другим типографским терминам), а именно, из времён фотонабора в полиграфии, когда символы засвечивались на плёнке через шрифтоноситель, перемещаемый относительно её поверхности. Межсимвольные интервалы варьировались шагом последовательного ("track" - "след") отступа по ходу экспонирования.
Здесь вам может пригодиться и CSS-свойство "word-spacing" (величина пробела). Вы понимаете, что изменяя значение данного параметра, вы либо раздвигаете, либо сдвигаете теснее слова текста, что тоже существенно отражается на его читаемости.
Поэкспериментируйте с межбуквенными интервалами и пробелами в приведённом ниже фрагменте текста, убедитесь, что их величина влияет на его разборчивость.
Трекингом часто ошибочно называют кернинг. Кернинг - настройка интервала между символами определённого начертания (а не плотности их в неком фрагменте текста), опять же, ради улучшения читаемости.
Пропорциональный шрифт (в отличие от моноширинного, с неизменным межсимвольным интервалом) допускает вариативность взаимного расположения ряда пар символов, которое приходится подстраивать для улучшения зрительного восприятия текста.
Например, прописные V и A, стоящие рядом, приходится обычно сближать, чтобы они лучше смотрелись.
А за этот термин нам снова нужно благодарить печатников былых времён, когда символы шрифта ещё отливались из металла. Керном (kern) называлась сцепка литых брусков с буквами за счёт выступов на одних и выемок на других. Эти выступы и выемки располагались так, чтобы предотвратить непредусмотренное соседство символов.
То есть, кернинг применялся в наборной печати, и в веб-типографику, вроде бы, вписывается с трудом. Есть javascript-инструменты, например, kerning.js, позволяющие дизайнерам выполнять посимвольную настройку шрифта, а CSS-технология в этом плане, увы, пока отстаёт.
CSS-разработчики лишь предлагают дизайнерам-шрифтовикам к использованию свойство "font-kerning", но его возможности весьма ограничены.
Настройкой параметров (нестандартизированного) свойства "text-rendering: optimizeLegibility;" можно улучшить картину передачи типографской разметки в некоторых современных браузерах, задействуя кернинг для заданных пар символов при их распознавании. Применительно же к целому комплекту шрифта, это средство помогает, но не спасает. Кроме того, через его настройку запускается использование для данного шрифта при каждом удобном случае лигатур, а раз мы их упомянули, то...
Применение лигатур открывает перед нами возможности кернинга на новом уровне, позволяя нам заменять определённые пары символов специальными обозначениями. Бывает, что символы ни в какую не выстраиваются вместе красиво, как ни старайся, тогда можно соорудить из них лигатуру. Классический пример - сочетание строчных букв f и i.
А вот и ваш старый знакомый; узнаёте?
Амперсанд ("&") по своему происхождению - тоже лигатура, давно ставшая для нас привычным заменителем слова "Et" (означающего "и" по-латыни/по-французски).
В других же случаях нам не обойтись без лигатур при столкновении с разного рода лингвистическими редкостями (пожалуй, самый показательный пример здесь - буква немецкого алфавита "эсцет" - "ß"), а порой и при желании просто украсить текст. Такие лигатуры мы называем используемыми по усмотрению, дискретными (Discretionary ligatures), например, слившиеся c и t.
Если вам предоставлена свобода в выборе способов наполнения веб-страницы контентом, то вы можете задействовать Unicode или HTML-мнемоники для отображения лигатур. Например, мы с вами говорили о несовместимости f и i, так вот, в этом случае вас выручило бы использование
fiОтдавая предпочтение CSS-технологии, вы можете задействовать уже упомянутый нами прежде приём "text-rendering: optimizeLegibility", а можете попробовать предлагаемое решение "font-variant-ligatures" с рядом настраиваемых параметров, в том числе, "common-ligatures" для отображения лигатур везде, где только можно. Браузерная поддержка у него пока не полноценная, но взять его на заметку, конечно, стоит.
Подгонка по разметке
Мы переходим к разговору о том, насколько само начертание символов шрифта влияет на междустрочный интервал. Поэтому, лучше выбирать и устанавливать высоту строк с учётом особенностей используемого шрифта. Недостаточный просвет между строчками создаёт ощущение скученности текстового массива и мешает читателю находить взглядом начало следующей строки.
Избыточный просвет затрудняет чтение не меньше.
В веб-дизайне, особенно, имея дело с текстами, всегда лучше соотносить между собой размеры конструкций. Высота строк должна непременно задаваться по размеру шрифта! Устанавливая высоту строк в "эмах", вы тем самым уже будете соотносить её с размером шрифта. Посмотрите, на этом примере наглядно видна зависимость читаемости текста от значений названных параметров:
Мы по обыкновению называем междустрочные пробелы (не путать с высотой строки, как таковой) интерлиньяжем, англоязычный же термин "leading" ("свинцовка") вошёл в употребление потому, что металлические пластины, использовавшиеся в печатных станках для регулирования междустрочных пробелов, были свинцовыми.
Ныне же при расчёте высоты строк к размеру символов по вертикали сверху и снизу добавляется по половинке интерлиньяжа в числовом выражении. Например, размер нашего шрифта 36 пкс, высота строки 54 пкс (1.5 "эма"), значит, мы отступаем от нижней границы размещения символов на 9 пкс вниз и от верхней на 9 пкс вверх. Так достигается центровка текста внутри строки по вертикали.
Продолжая изучать тонкости внутреннего строения типографики через CSS-"призму", мы сталкиваемся с задачей равномерного заполнения текстом отведённого ему пространства; выравнивания его краёв. На нашей иллюстрации текст выровнен по левому краю, но его можно так же точно выравнивать и по правому, по центру, либо (если текстовый массив занимает более одной строки) заполнять им текстовый блок равномерно. CSS-технология предлагает для выравнивания текста приём "text-align", например, {text-align: center;}.
При заполнении блока сплошным текстовым массивом устраняется неровность его краёв...
... но может появиться нежелательный побочный эффект в виде прожилок или промывов внутри текста.
Имея дело с гибкой, "плавающей" сеткой разметки, для которой сложно бывает строго задать ширину текстового блока, сплошное выравнивание текста нужно применять с осторожностью.
Выбор начертания шрифта
Выбор гарнитуры шрифта - дело непростое. Ищете ли вы шрифт специально для заголовка, для основного его массива или для врезок-цитат и т. п., учитывать приходится множество нюансов. Давайте рассмотрим несколько значимых основополагающих аспектов внутреннего строения типографики.
Во-первых, шрифт у нас с засечками или без? Засечки - это дополнительные штрихи, служащие концевыми ограничителями линий основного контура. Шрифты, подобные Arial, обходятся без них, это шрифты без засечек - "сансерифы" (вот вам ещё один урок французского)...
Считается, что засечки делают контуры букв плавнее, обеспечивают связность текста, "ведут" взгляд читателя вдоль строк, облегчая ему чтение. Но иногда они могут и перегружать собой шрифт, утомлять читателя, тем самым снижая разборчивость текста. Споры на эту тему не теряют остроты уже десятки лет, но убедительно доказать лучшую разборчивость шрифтов того или иного вида пока не удалось никому.
В угоду обеим сторонам, шрифты иногда выпускаются в двух модификациях - с засечками и без (например, PT от ParaType) - своего рода роскошь, ведь вам предоставляется возможность выбирать их по своему вкусу.
Коснувшись разборчивости шрифта, мне, по хорошему, следует хоть вкратце сказать, в чём её отличие от удобочитаемости. Удобочитаемость - характеристика для описания более тонких нюансов типографского оформления текста; отчётливость распознавания отдельных букв и слов. Разборчивость - свойство более функциональное, принимаемое в расчёт при оценке практической пригодности текста, набранного тем или иным шрифтом, для восприятия читателем.
Разборчивость, конечно, очень важна. Поэтому, параметры шрифта лучше настраивать с учётом икс-высоты. Икс-высота шрифта - это высота строчных букв без выносных элементов, измеряемая от базовой линии (присмотритесь к букве "x" в шрифтах различных начертаний). Относительно крупные по икс-высоте гарнитуры выглядят более разборчиво, особенно, при мелких размерах шрифта.
Увеличение икс-высоты символов, по логике вещей, достигается за счёт укорачивания их подстрочных и надстрочных элементов соответственно. Вследствие этого междустрочные пробелы, о которых мы только что говорили, могут зрительно уменьшаться.
Сам не знаю, как это я до сих пор не дал вам точного определения штриха, составляющего контур символа. Если есть незаменимый для описания характера буквенных очертаний термин, то это именно он. Штрих контура любого символа может быть горизонтальным, вертикальным, диагональным, даже изогнутым – и в зависимости от того, какой он в каждом конкретном случае, он может по-разному называться.
Стержневой штрих конструкции символа (как правило, прямой и массивный) называется её несущей опорой, стволом (stem), а термином "штрих" обозначают лишь её второстепенные элементы. Горизонтальный штрих, венчающий прописную букву "T", называется плечами (arm), соединяющий вместе половинки прописных букв A или H, - перекладиной (bar), и далее по списку...
Штрихи контура одного символа, особенно, у шрифтов с засечками, могут различаться своим видом и толщиной; самый тонкий из них - волосная линия.
Бывают штрихи переменной толщины, что наиболее заметно на их изгибах. Это явление называется модуляцией. Она уравновешивает общую толщину штриха, равномерно распределяя её по всему контуру символа и исключая чрезмерное уплотнение линий на стыках.
Слабо выраженная модуляция часто проявляется в рыхлости, тяжеловесности контуров отдельных букв на фоне прочих символов данного комплекта шрифта. Дэвид Кэдэви (David Kadavy) называет равномерность распределения толщины штриха по его длине однородностью текстуры символа, которая часто служит критерием оценки качества готовой гарнитуры. Взгляните на массив текста, а затем "в расфокусе" оцените только его текстурность.
Пока всё
Для точного описания нюансов типографского оформления текстов есть тысячи специальных терминов, отражающих и суть, и свойства. Мы рассмотрели лишь азы, но надеюсь, вы, всё же, хоть чем-то пополнили ваш словарь! Попробуйте в следующий раз невзначай вставить одно из этих словечек в беседу с новым знакомым – произведёте на него неизгладимое впечатление...
Постовой: Справка 2-НДФЛ может потребоваться Вам для следующих нужд: для получения кредита в банке, при трудоустройстве на работу, для получения визы. У нас Вы сможете купить справку 2 ндфл на требуемую сумму!
