—»     —»   Веб-типографика изнутри и снаружи
  Раздел: Шрифты   Нет комментариев  

Веб-типографика изнутри и снаружи



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

Непосредственно веб-дизайнеры сталкиваются с двумя основными категориями приёмов типографского оформления:

* с теми, которые определяют ваш выбор шрифта
* и с теми, применение которых допускает вариативность (часто за счёт использования 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
. Если вы больше доверяете javascript, то можно попробовать ligature.js, хотя, это не панацея.

Отдавая предпочтение 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 ндфл на требуемую сумму!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шрифты
Опубликовал Design FactoRy   Прочитано (раз): 7921   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Тут облачные технологии по защите и хранению информации
facebook.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031