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

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

Паутина Слов

В 1992 году Тим Бернерс-Ли опубликовал работу под названием «HTML теги», где описал 20 тегов, многие из которых уже давно вышли из употребления или изменились до неузнаваемости. Одним из немногих тегов, дожившим до наших дней, является второй по важности после ссылки тег — абзац (<p>). Не существовавший до 1993 года, он возник как идея в ходе дискуссии о теге для изображений.

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

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

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

Что такое идеальный абзац?

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

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

Очень верная мысль. Я бы сказал еще шире: не только веб-дизайн должен служить для передачи посланий, но и дизайн вообще, вне зависимости от того, в какой среде он находится. Дизайн — это универсальный способ передачи информации. Это в первую очередь разговор между людьми, которые могут иметь разное воспитание, образование, вероисповедание, даже быть носителями другого языка! Но если дизайнер ставил перед собой задачу не продемонстрировать миру свое Я, а пытался создать с помощью дизайна универсальное послание, то его поймут.

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

(Источник: Marcin Wichary)

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

На днях мне посчастливилось общаться с классиком российского дизайна Борисом Трофимовым, про книжные работы которого как раз говорят, что дизайн в них почти незаметен. Это ли не высшая похвала?

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

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

Настраиваем абзац

Шрифт

Выбор шрифта сам по себе важен, однако выбор типа гарнитуры зависит от проекта. Мы не собираемся разбирать здесь этот вопрос; за исключением одного пункта: среди веб-дизайнеров считается разумным отдавать предпочтение шрифтам без засечек (sans-serif) для тела документа.

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

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

Хотя шрифты гротеск и антиква (serif) со своей сложной структурой смотрятся не слишком хорошо, будучи набраны малым кеглем, они имеют много преимуществ. Уменьшение высоты глифов строчных букв (x-height), к примеру, может ухудшить читаемость любого шрифта. Некоторые разновидности антиквы отличаются высокой разборчивостью и вполне подходят для набора абзаца, если используются со знанием дела. Симпатичный шрифт Georgia от Мэтью Картера служит отличным тому примером.

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

Первый фактор, который следует принять во внимание при выборе веб-шрифта (@font-face) — это комплектность начертаний. Включает ли шрифт в себя все необходимые стили – жирный, курсив (а еще лучше полужирный и жирный курсив) и прочие? Для заголовков хватит и одного стиля, но подразделы нуждаются в большем разнообразии. Не будучи достаточно разнообразно оформленным, ваш текст не просто будет пресным, но и, в результате отсутствия выразительности, тяжелым для чтения.

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

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

Имея в своем распоряжении всю гамму стилистических вариаций, вы не должны полагаться на одни лишь нефункциональные «искусственные» стили, применяемые к обычному шрифту при вызове команд font-style: italic или font-weight: bold. Шрифты  не предназначены для подобных деформаций. Использование надлежащих начертаний, предоставляемых гарнитурой, как в случае с Bitstream (см. выше), сделает вашу типографику не только более привлекательной, но и более доступной: специальные курсивные глифы имеют более четкие очертания, нежели у текста, который просто немного наклонили.

Трюк в том, чтобы при каждом декларировании вида font-style: italic обеспечить задействование дополнительного курсивного начертания, а не искусственную деформацию шрифта. Это должно происходить столь же легко, как при использовании группы системных шрифтов, таких как Georgia. Как и многие другие вещи, это проще всего объяснить на примере фрагмента кода с комментариями. Для краткости мы рассмотрим лишь переключение между обычным шрифтом и курсивом (не жирным).

@font-face { font-family: 'MyWebfont'; /* Можете назвать как угодно. */ 
src: url('mywebfont-regular.ttf') format('truetype'); /* Источник «обычного» шрифта. */ 
font-style: normal; /* Связывает значение “normal” с этим источником. */ 
font-weight: normal; /* То же, что и выше, для веса шрифта. */}

@font-face { font-family: 'MyWebfont'; /* Также, как и в блоке выше, задает имя набора шрифтов*/ 
src: url('mywebfont-italic.ttf') format('truetype'); 
font-style: italic; /* Связывает значение "italic" с источником курсивного шрифта. */ 
font-weight: normal; /* ... Это не жирный курсив. */}

body { font-family:'MyWebfont', georgia, serif; /* Обеспечивает поддержку системных шрифтов. */}

em { font-style: italic; /* При задействовании @font-face, используется курсивный веб-шрифт. 
     Если нет – используется курсивный вариант Georgia из системы пользователя. 
     В любом случае, это не позволит искусственно калечить гарнитуру. */}

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

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

Сглаживание - это тонкий процесс, требующий достаточного количества времени; не все шрифты одинаково хорошо сглаживаются. Обратите внимание на застывшую верхнюю часть волосного элемента строчной “b” в шрифте Crimson, весьма впечатляющем во всех остальных отношениях. Этот крошечный дефект немного раздражает и отвлекает от комфортного чтения. Вы можете видеть эффект на картинке ниже, а также в контекстном примере.

Но есть хорошая новость - внедрение шрифтов становится в последнее время все более распространенным явлением и дизайнеры уделяют все больше внимания рендерингу и поддержке более качественного сглаживания. На Typekit в настоящее время даже решили заняться ручной переделкой инструкций сглаживания некоторых популярных шрифтов, таких как Museo.  Перед тем как принимать решение об использовании шрифта, всегда лучше самому взглянуть, как он выглядит на демонстрационной странице. Вы сэкономите время, если будете пропускать взглядом шрифты, чьи названия начинаются с “thin” и “narrow”.

Размер шрифта и ширина столбца

Согласно недавней статье в SmashingMagazine, вы оказываете серьезное негативное влияние на читабельность, устанавливая размер шрифта меньше 16 пикселей. Все популярные браузеры по умолчанию рендерят текст именно такой высоты. Это яркое свидетельство того, что 16 пикселей является своего рода стандартом – особенно принимая во внимание то, как разработчики браузеров любят перечить друг другу. Более того, в статье сказано, что того же стандарта придерживается большинство типографий.

В таблицах стилей CSS мы часто обозначаем 16px как 100%, декларируя это в блоке, относящемся к телу документа. В этом есть смысл, ведь это то же самое, что сказать «100% - это тот же размер, что выбрал бы браузер». Если вы хотите, чтобы размер текста в браузере был больше 16 пикселей, просто отредактируйте значение в блоке body, используя размер в процентах, эквивалентный «целому пикселю». Почему целому? На это есть две причины. Во-первых, целые числа не такие громоздкие и их легко можно использовать в качестве множителей в таблицах стилей. Во-вторых, браузеры склонны округлять дробные пиксельные величины по-разному, приводя к весьма противоречивым результатам. Размер в 18 пикселей выражается в процентах как 112.5% (1,125 Х 16).

Упорядочивать размер текста по умолчанию (или «текста абзаца», если быть семантически точным) в подобных случаях крайне важно по причине того, что это позволяет использовать значение em в качестве множителя для размеров заголовков и прочих текстовых элементов. К примеру, для визуализации h3 заголовка размером в 1,5 раза превышающего кегль абзаца, мы должны задать ему значение в 1.5em. Так как em (произносится как имя «Эмма», а не как И.М. Фостер) — единицы относительные, их значение меняется в зависимости от размера кегля по умолчанию. Это делает работу с таблицами стилей гораздо более простой и, что куда более важно - гарантирует, что воспринимаемый размер заголовков не меняется в большую или меньшую сторону при изменении размера текста абзаца.

Выбор комфортной ширины очень важен для пользователей, потому что если строки слишком длинные, искать взглядом начало каждой новой будет неудобно. Не прилагая сознательных усилий, читатель будет пропускать строки или перечитывать их по нескольку раз. Роберт Бринхерст в своей книге «Основы стиля в типографике» называет идеальной ширину столбца в пределах от 45 до 75 знаков. Это является главной причиной того, почему мы указываем в свойствах значение max-width, создавая «резиновый» шаблон.

Какой бы ни была идеальная максимальная ширина вашей страницы, она, скорее всего, гораздо меньше той, что вы привыкли видеть. Согласно тщательному исследованию шаблонов типографического дизайна, предпринятому Smashing Magazine, средняя ширина веб-сайта составляет 88,74 знака, что значительно превышает оптимальный диапазон.

Интерлиньяж и вертикальный ритм

(Источник: andrechinn)

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

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

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

Неверный способ работы с line-height – это задавать значение в пикселях. Использовав абсолютную величину, мы пустим насмарку всю работу сделанную нами до этого.

Значит, мы должны использовать множитель em, который мы видели в прошлом разделе? Этот способ будет нерациональным. Хотя он и сработает, включение элемента em здесь не требуется. Лучше выставить для параметра line-height значение 1.5, означающее интерлиньяж, в 1,5 раза превышающий размер шрифта. Line-height принадлежит к «закрытому клубу» CSS свойств, работающих с условными числовыми величинами.

p {
  font-size:; /* Молчание – золото. Значение по умолчанию 1 em */
  line-height: 1.5;
}

Самые внимательные уже заметили, что, выбирая размеры шрифтов, мы использовали лишь четные числа. Дело в том, что я предпочитаю высоту строки в 1.5. Таким образом, кегль в 18 пикселей означает высоту строки 27 пикселей или, если желаете, межстрочные интервалы в 9 пикселей шириной. Использование четных чисел - еще один из методов гарантированного получения целых значений в пикселях - я знаю, что любое целое число, помноженное на 1,5, равняется целому числу. Результирующее значение line-height,выражаемое в целых пикселях, крайне важно, так как оно гарантирует достижение «вертикального ритма».

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

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

Следует отметить, что, хотя линейная высота в 1,5 достаточно надежна, не все шрифты одинаковы. Гарнитуры с большой высотой глифов строчных букв или длинными десцендерами, могут выиграть от больших междустрочных интервалов. Когда на весах читабельность, вполне допустимо использование более сложного вертикального ритма.

Расстояние между словами и выравнивание

По умолчанию, текст абзацев веб-страниц установлен на «выключку влево» (text-align: left in CSS) – каждая новая строка начинается сразу от левого поля, однако длина строк варьируется, придавая тексту «рваный» вид по правому краю. Если вы такие же, как я, вы предпочитаете выключку по ширине (представленную ниже).

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

Не верьте — это самое ужасное форматирование из всех возможных :-)

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

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

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

Проблемой с выключкой текста в HTML (text-align: justify) является расстояние между словами.  В печатных медиа-изданиях (таких как газеты), для разрыва длинных слов используется перенос по слогам. Это приводит к большей концентрации компонентов (слов или их частей) в строке, а следовательно - и лучшему распределению и пресечению агрессивных пробелов между словами. Браузеры не могут переносить слова автоматически, для этого предназначен мягкий перенос (­). Однако представьте себе, что было бы, если б вам пришлось вручную расставлять ­ по всему тексту. Функция выравнивания в CSS3, предназначенная дать нам больший контроль над  text-align: justify, могла бы решить проблему, обеспечив межзнаковое распределение. Как ни странно, в настоящее время она поддерживается лишь Internet Explorer.

К счастью, Firefox и Safari теперь поддерживают CSS3 селектор атрибутов hyphens, позволяющий автоматически расставлять дефисы и избавляющий от необходимости возиться с ­. В любое время вы можете переключиться обратно на ручные переносы, поменяв пункт hyphens: auto на hyphens: manual. Вам понадобятся еще префиксы свойств для браузеров, но LeaVerou уже знает, как помочь вам в этом.

Пока не подтянулись остальные браузеры, последовательные кроссбраузерные решения возможно осуществлять лишь с помощью JavaScript. Hyphenator.is – это мощный инструмент, который собирает библиотеки слоговых моделей, специфичные для каждого языка, и использует их для динамической расстановки переносов в нужных местах. Обойдется он довольно дорого (два скрипта общим объемом 72 KB в несжатом виде для текстов на английском языке), однако стоит того. Действие его продемонстрировано на первом скриншоте к этому разделу.

Завершающие штрихи (контекстная стилизация)

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

Давайте воспользуемся красной строкой как вводным примером. Хотя в веб-типографике она распространена не так широко, как в печати, красная строка является обычным методом разбивки абзацев на информационные блоки. С точки зрения ритма, это также является разновидностью пунктуации: читателю предлагается сделать короткую паузу перед чтением каждого абзаца. Так как в первом абзаце отступ не требуется – зачем делать паузу, если мы еще не начали читать? – мы должны исключить этот абзац из нашего правила CSS. Используя соседний родственный комбинатор, мы можем выбрать лишь абзацы, которым предшествует другой абзац. Таким образом, мы сможем ловко воспроизвести правило, существующее в книгопечатании на протяжении веков.

p + p {
  text-indent: 1.5em  /* Я люблю делать отступы равными высоте строки. */
}

В примере ниже я объединил следующие друг за другом селекторы с псевдоклассом :first-letter, чтобы выделить буквицу.

h1 + p:first-letter {
  font-size: 2em;
  line-height: 0;  
  /* Высота строки должна быть переназначена, 
  чтобы компенсировать увеличившийся размер шрифта, 
  в противном случае интервал целой строки будет нарушен. 
  Я выяснил, что подойдет любое значение меньше 0,4. */
}

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

До тех пор, пока мы строго придерживаемся семантики HTML, мы можем использовать множество нюансов как для приведения в порядок самой страницы, так и для презентации динамического контента.

Заключение

(источник: primatage)

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

Разумеется, большая часть читателей «проскочит» через ваш контент – но если вам действительно есть, что сказать, не отталкивайте от себя людей, которые хотят дать шанс написанному вами. Качественная типографика придает веса вашим словам, а хорошие слова возвышают ваши идеи. Если людям комфортно читать ваши тексты, то, вполне вероятно, что и то, о чем вы пишете, придется им по вкусу.

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

Ну уж если мы заговорили о качественной типографике, то от модульных сеток никуда не деться. В качестве затравки порекомендую небольшую книжечку «Grids are good»: http://www.subtraction.com/pics/0703/grids_are_good.pdf. А также русский сайт, где собрана куча ссылок на интересные материалы по модульному проектированию: http://thegrids.ru/.

Оригинал: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/

Ольга Алексашенко
Веб-технолог в «Далее»

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

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

Что же касается частностей, мне бы хотелось добавить к сказанному в статье следующее.

Во-первых, мне кажется сомнительным брать за кегль по умолчанию размер в 16 пикселов. Для современных высокоточных экранов это очень много; 13-го кегля будет вполне достаточно (особенно, если не забывать, что в семействах с засечками, serif, этот кегль обычно крупнее, чем в гротесках).

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

И в-третьих. Проблема элементарная, но до сих пор очень важная. Не пренебрегайте типографскими символами. Оформление текста должно начинаться в первую очередь с самого текста. Нет ничего выглядящего более дилетантским, чем дефис вместо тире или «компьютерные» кавычки вместо елочек. Существует масса инструментария, позволяющего набирать правильно, если не на ходу, то хотя бы в постпроцессинге. Для постпроцессинга могу порекомендовать «Типограф» от студии Лебедева, прекрасный и удобный инструмент; для правильного набора в Windows — типографскую раскладку Бирмана. На маке же все необходимые символы есть прямо на клавиатуре. Правильный набор не только сделает текст красивым, но и повысит его визуальную значимость.

Ну и напоследок, хотелось бы повторить прописную истину: чтобы хорошо писать, нужно читать хорошую литературу. Чтобы делать красивые сайты — нужно иметь перед глазами пример. Обращайте внимание, как обращаются с текстом в Студии Лебедева или в Бюро Горбунова; читайте Брингхерста — и применяйте, экспериментируйте, пока ваши тексты не начнут выглядеть так, как будто с ними ничего не делали. И при этом так, как будто перед вами дорогостоящее академическое издание на мелованной бумаге с самой что ни на есть доверенной информацией на свете.

Ключ к успеху спрятан в том числе и здесь.

Григорий Коченов
Креативный директор в AGIMA

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

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

Артур Кротов
Технический директор в Nimax

Хорошая статья! Веб-браузерам предстоит еще длинный путь к тому, чтобы реализовать все функции, востребованные современными дизайнерами, в таком, казалось бы, базовом функционале как отображение текста. К сожалению, сейчас просматривается тренд развития браузеров в другом направлении — эффекты, графика, — но мы очень ждем того момента, когда можно будет простыми CSS-правилами задать точное отображение текста, сведя к минимуму потери между макетом и свёрстанным шаблоном.

Хочется также обратить внимание на новые единицы определения размера элементов на странице для шрифтов, которое вводятся в данный момент в CSS3. Это ch и rem. На последний возлагаем большие надежды, так как он должен заметно снизить количество изменений в вёрстке в ситуациях, когда нужно поменять размер шрифта определенного блока, не изменяя размер шрифта дочерних ему блоков.

Также для верстки — в том числе текстов — под мобильные устройства могут пригодиться новые единицы: vw, vh, vmin. Осталось лишь дождаться их повсеместного введения, а до тех пор экспериментировать.