Искусство выравнивания текста

Рассмотрим более подробно при­мер с различными формами букв. Допустим, стоит задача визуально вы­ровнять правый край строки текста по некоей вертикали — например, по габаритной вертикали прямоугольника, под или над которым расположен текст. Если используется шрифт без засечек и текст кончается, напри­мер, буквой «н», никаких проблем не возникает: мы просто выравниваем правый край последней буквы по требуемой вертикали. Если же послед­ней буквой является, скажем, «т», буква с закруглением типа «ь» или же «н» из шрифта с засечками, то выступающие горизонтальные штрихи или закругления обязательно должны немного свешиваться за вертикаль вы­равнивания. Если же в конце стоит точка или запятая, ее нередко выносят

(а)

(б)

Рис. 4

Засечки у заглавных «Н» в гарнитурах Бодони (а) и Тайме (б); засечки типа (а), хотя они и чуть короче, долж­ны сильнее свешиваться за вер­тикаль при выравнивании

за линию выравнивания целиком (так называемая «висячая пунктуация», пример которой показан на рис. 39 на стр. 145).

Засечки, впрочем, бывают разные. У шрифтов типа новой антиквы (рис. 4, а; о классификации шрифтов см. стр. 126) тонкие засечки соединяются с прямолинейным и вертикальным основным штрихом под прямым углом. Напротив, в большинстве шрифтов классической и переходной антиквы (рис. 4, (?) более толстые засечки соединяются с основным штрихом с по­мощью широких плавных закруглений, а основной штрих имеет иногда сложную, вогнутую в центре форму. Очевидно, что засечки второго типа гораздо больше добавляют к видимой ширине буквы и выносить их за линию выравнивания нужно в меньшей степени. Кроме того, как я уже упоминал, величина этой поправки зависит от размера букв; сильнее всего видимая ширина букв отличается от фактической для надписей мелким кеглем (это одна из причин, по которым для них следует отдавать пред­почтение шрифтам без засечек), а при достаточно большом кегле шрифта, когда засечки хорошо различимы, такая коррекция размера может оказать­ся ненужной и даже вредной.

Цвет и размер

Поскольку понятие «воспринимаемого размера» тесно граничит с понятием «заметности» элемента, вполне естественно, что цвет может существенно влиять на эту характеристику. Чем контрастнее цвет элемента на фоне его окружения, тем он заметнее и тем кажется больше. У этого правила, однако, есть и обратная сторона: если контраст между объектом и фоном слишком мал, границы его становятся трудноразличимыми и субъективно он может восприниматься большим, чем на самом деле (особенно если общий спектр композиции достаточно темен — «у страха глаза велики» отчасти и потому, что страх может вызываться темнотой).

Кроме того, в одних и тех же условиях по-разному действуют теплые и холодные цвета (стр. 105). Теплый цвет привлекает внимание к элементу, делает его более активным, более близким и, следовательно, большим по субъективному размеру; холодные цвета, наоборот, отдаляют и уменьшают объект.

Текстура и размер

Текстура поверхности (в том ее, достаточно общем, определении, которое дается на стр. 116) также не может не влиять на воспринимаемый размер объекта. Поскольку ярко выраженная текстура обыч­но применяется лишь к нескольким центральным элементам композиции, служа для их акцентирования, очевидно, что такая текстура, как и контрастный цвет, должна вызывать увеличение субъективного размера. Кроме того, любая тек­стура усложняет облик предмета, делает его неоднородным, что также подталкивает наше подсознание к «растягиванию»

(а)

(б)

Рис. 5

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

воспринимаемого образа объекта, чтобы «дать место» всем его прожилкам, морщинам и пупырышкам.

Простые, геометрические текстуры (стр. 118) обычно в бо­лее сильной степени обладают эффектом «раздувания» форм, что объясняется их большей регулярностью, предска­зуемостью и оттого более высокой визуальной плотностью. Максимума этот эффект достигает у геометрических узо­ров с элементом некоторой средней величины, тогда как у слишком мелких или слишком крупных узоров он не­велик.

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

Пропорции

Рис. 6

Золотое сечение (sectio aurea): b так относится к а, как а к сумме а + b (при этом b = 0,618а).
С древних времен золотое сечение счита­ется самой совершенной, гар­моничной, уравновешенной про­порцией

Пропорцией в дизайне называют соотношение размеров либо разных объектов, либо составных частей или разных измерений (например, ширины и высоты) одного объекта. Здесь мы делаем первый шаг от размеров отдельного, «подвешенного в воздухе» объекта к пространственным отношениям внутри композиции — пока что абстрагируясь от взаимного расположения элементов и рассматривая только соотношения их размеров.

Золото и пластмасса

Архитекторы и художники древности придавали огромное значение выбору пропорций. Некоторые из их открытий, такие как «золотое сечение» (рис. 6), вполне могут пригодиться и сегодняшнему ди­зайнеру, но в целом классический подход к определению пропорций, обычно заключающийся в вычислении разме­ров по формулам, в современном дизайне применяется редко. Субъективность размеров, о которой мы говорили в предыдущем разделе, делает субъективными и пропорции, и нет никакого смысла вычислять габариты прямоуголь­ников с точностью до третьего знака после запятой, если их воспринимаемый размер все равно будет отличаться

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

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

Пропорций простота

Можно лишь указать на отно­сительную популярность простейших пропорций — в пер­вую очередь равновеликости объектов, а также кратных соотношений их размеров (1:2, 1:3), что является следстви­ем общего принципа единства и экономии средств («не следует усложнять без необходимости», стр. 149). Но точно так же не следует и увлекаться простотой — композиция, где все выровнено со всем, может показаться скучной. Удобно представить себе что-то вроде наложенной на вашу страни­цу координатной сетки, ячейки которой имеют размер того или иного выдающегося элемента, и учитывать стремление других элементов «прилипать» (наподобие функции «snap» в векторных графических редакторах) к линиям этой сет­ки — лишь учитывать, впрочем, а отнюдь не безоговорочно подчиняться этому их стремлению.

Достаточно общим является также принцип ограничения пропорций «сверху». Несмотря на способность человеческо­го восприятия без труда приспосабливаться к любой шкале размеров, этой способностью не следует злоупотреблять — нельзя требовать от зрителя слишком частых «перенастроек» такого рода и безусловно следует избегать их в пределах одной композиции (страницы). Однажды привыкнув к не­которому среднему размеру элементов, человеческий глаз может комфортно воспринимать только то, что не слишком

Рис. 7

Природа подсказы­вает пропорции для больших и для маленьких

сильно отличается от него в сторону увеличения или уменьшения (иными словами, отношение размеров значи­мых элементов не должно превышать некоторой разумной величины; см. также стр. 160).

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

Микропропорции

После того как пропорции вчерне выбраны, наступает не менее важный этап — тщательная подгонка размеров, координация, нюансировка (стр. 171) и нейтрализация всевозможных «паразитных связей», по­бочных эффектов и оптических иллюзий, влияющих на восприятие пропорций. Изменение кажущегося размера в зависимости от формы, цвета и текстуры мы рассмотрели выше (стр. 79); здесь следует особо остановиться на том, как пропорции зависят от размеров элементов. (Хотя сама пропорция есть не что иное как соотношение размеров, она требует определенной коррекции, если оба сравниваемых элемента увеличить или уменьшить в равное количество раз.)

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

Размещение

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

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

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

Ключевое понятие в этом разделе — расстояние между элементами, к которому применимо все то, что мы говорили о размерах самих элементов: воспринимаемое расстояние точно так же может зависеть от формы элементов, их цвета и цвета фона между ними, фактуры поверхности и т. п. Кроме того, важно также умело пользоваться выравниванием элементов, к которому в особенности применимы замечания на стр. 79.

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

Одноуровневые элементы

Начнем со случая, ко­гда мы имеем ряд близких по размеру элементов, занима­ющих одинаковое положение в информационной иерархии страницы. Типичным примером такого ряда является ряд кнопок на навигационной панели веб-страницы (стр. 205). Самый очевидный и часто употребляемый способ разме­щения таких элементов — линейный, когда все элементы выравниваются по некоторой общей прямой, чаще всего го­ризонтальной или вертикальной. Для такого выравнивания необходимо выбрать какую-либо общую для всех элемен­тов точку (лучше отрезок) их контура, которая и будет совмещаться с прямой выравнивания; так, при выравни­вании по вертикали чаще всего эта точка лежит на левой или правой стороне обнимающего прямоугольника каждого элемента.

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

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

Вообще, выравнивание — одно из ключевых понятий композиции на плоскости, применимое далеко не только к одноуровневым элементам. Его можно сравнить с пере­кличками цветов или текстур, подобием форм; выравнива­ние способно установить прочные отношения между эле­ментами, расположенными достаточно далеко друг от друга, придав тем самым устойчивость всей композиции (см. также стр. 173). Пожалуй, можно сказать, что выравнивание (как и кратные пропорции, стр. 83) — естественная тенденция расположения элементов, которую имеет смысл преодоле­вать только с целью оживить композицию, внести в нее некоторый элемент разбросанности и непреднамеренности. Часто, кстати, такое нарушение «всеобщей выравненности» производится не столько перемещениями элементов, сколько приданием им аморфной, не стремящейся к вырав­ниванию формы (стр. 100).

Если однородные элементы достаточно велики по размеру или сложны по конфигурации (например, абзацы текста), может оказаться необходимым снабдить их однотипны­ми, достаточно заметными и даже выступающими по форме точками привяжи, по которым эти элементы будут выравни­ваться и которые сделают более заметной и выразительной их линейную последовательность. В случае абзацев роль таких точек часто выполняют маркеры списка (то, что по-английски называется bullets — адекватного русского термина, видимо, еще не найдено), а в случае кнопок на навигационной панели — одинаковые по размеру и стилю пиктограммы, символизирующие функцию каждой кнопки, или же просто отрезки линий, кружки, треугольники и тому подобные маркеры, объединяющие кнопки в единое целое и одновременно как бы говорящие: «это кнопка, а не просто надпись».

(а)

(б)

(в)

Рис. 8

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

Если элементов столько, что все они не умещаются в один горизонтальный или вертикальный ряд, неизбежен выход в новое измерение — построение двумерной «таблицы» элементов. Здесь можно порекомендовать выделить одно из направлений (горизонтальное или вертикальное), сблизив элементы по этому направлению заметно сильнее, чем по перпендикулярному. Это позволяет достичь группирования на двух уровнях и, как результат, более оживленных и раз­нообразных пространственных отношений в композиции (особенно если такое группирование оправдано содержи­мым элементов). При этом следует учитывать и пропорции самих элементов, как показано на рис. 8. Преимущества од­ного из направлений перед другим можно достичь и другими способами — например, только вертикальной или только горизонтальной разлиновкой, чередованием фонового цвета в строках или столбцах таблицы (стр. 226). Из других типов размещения одноуровневых элементов следует особо вы­делить намеренно случайное, хаотическое расположение — весьма силь­нодействующий композиционный прием, почти всегда выступающий на первый план (а потому применимый только к элементам, которые са­ми по себе достаточно активны в композиции) и обязательно требую­щий поддержки со стороны других элементов. Хотя прием этот популярен в современном дизайне, пользоваться им нужно с большой осторожно­стью; у профессиональных дизайнеров «псевдослучайное» расположение, как правило, прочно зафиксировано множеством малозаметных нюансных координации (стр. 173). Любители же, чувствуя носящуюся в воздухе моду на разбросанность, обычно вытесняют этот прием на задворки компози­ции, применяя хаотическое расположение для элементов заднего плана — так возникают бессчетные фоны со «звездным небом» или «мятой бума­гой», беспорядочность которых только раздражает (еще и потому, что она нередко сочетается с назойливой повторяемостью изразца фонового изо­бражения, стр. 259).

Другие варианты двумерного размещения — более слож­ные, чем простое линейное, но при этом остающиеся закономерными, нехаотическими — включают в себя шах­матный порядок, размещение по окружности и т. д. Эти геометрические мотивы не слишком часто используются в современном дизайне; в большинстве случаев они (как и табличное размещение с равными расстояниями между столбцами и строками) смотрятся старомодно, привносят слишком много нарочитой упорядоченности, симметрии, порождают новые линии и направления выравнивания — не горизонтальные и не вертикальные и потому требующие поддержки со стороны остальных элементов. Одним сло­вом, такие варианты размещения весьма требовательны — вам придется потратить немало усилий, чтобы гармонично

вписать их в композицию, и далеко не всегда эти усилия вознаграждаются по заслугам.

Разноуровневые элементы

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

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

Первый шаг на этом пути — изменение горизонтального вы­равнивания. Подобно тому как в компьютерных программах и многоуровневых книжных оглавлениях (стр. 1) сдвиг стро­ки вправо означает более низкий уровень иерархии вложен­ности, внутритекстовые заголовки в современных бумажных и сетевых изданиях нередко выдвинуты влево относительно вертикали выравнивания текста (этот вариант размещения теперь едва ли не более популярен, чем бывшие некогда стандартными центрированные заголовки). При высокой частоте заголовков такое размещение позволяет быстро просматривать текст по вертикали, останавливаясь взглядом только на выступающих заголовках (ср. маркеры списков при одноуровневых абзацах, стр. 86). Это — один из лучших примеров построения эффективной композиции на основе выравнивания: мы без труда переключаемся с пронизанного линиями выравнивания вертикального направления (бег­лое чтение) на насыщенное информацией горизонтальное (внимательное чтение).

Еще более неординарные варианты размещения заголов­ков не подчеркивают их главенство в паре «заголовок—

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

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

Плотность

Нам осталось рассмотреть, чем определяется соотноше­ние заполненного и пустого пространства при различных видах размещения. Вспомним понятие компактности фор­мы, введенное на стр. 79; плотность размещения является аналогом этого понятия для случая двух и более элементов, как-либо скомпонованных на плоскости страницы. Очевид­но, что прежде всего плотность композиции должна быть увязана с компактностью составляющих его элементов — как правило, компактные формы требуют более плотного размещения, чем «дырявые».

Пол И характер

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

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

пространством от соседних элементов. Такой рваный, син­копический ритм плотности бывает совершенно необходим для свободного и выразительного звучания материала (при­мер 6, см. раздел «Галерея» на стр. 323).

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

Плотность текста

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

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

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