При большом желании довольно ограниченные возможности CSS позволяют добиться очень многого в типографике, их можно реализовать при использовании каскадных таблиц стилей. Можно использовать маленький или большой шрифт, различные размеры шрифта, отступы, апрош, интерлиньяж, а так же то ограниченное количество типов шрифтов, которое есть в стандартном наборе. Список вариаций можно продолжать и продолжать.
Были исследованы порядка пятидесяти популярных сайтов, для которых особенно важна типографика, это было сделано для того, что бы обобщить проблемы в оформлении текстов и найти для них возможные общие решения. Изучались достаточно популярные журналы, газеты, а так же другие ресурсы, которые тем или иным образом связаны с типографией. Были самым тщательным образом проанализированы таблицы стилей, а также типографика, что бы выделить те или иные сходства и отличия. Кроме этого была построена таблица, которая отражала все возможные параметры проанализированных вэб страниц.
В процессе проведения исследований были выделены основные проблемные вопросы, а именно тринадцать, которые имеют непосредственное отношение к типографическим проектам. Целью исследования как раз и являются ответы на вопросы, которые приведены ниже:
1) Популярны ли шрифты без засечек и с засечками как в основном тексте, так и в заголовках?
2) Какие виды шрифтов чаще всего используются?
3) Каким средним кеглем пользуются чаще всего?
4) Какое соотношение между размером шрифта заголовка и основного текста применяется чаще всего?
5) Какое среднее значение интерлиньяжа используется в основном тексте?
6) Каким чаще всего бывает усредненное соотношение между интерлиньяжем и размером шрифта в основном тексте?
7) Каким должно быть соотношение между длинной строки и интерлиньяжем?
8) Каким должны быть отступы между абзацами?
9) Назвать усредненное соотношение между интерлиньяжем и отступом между абзацами?
10) Как чаще всего выделяют стилистические ссылки?
11) Какое количество символов обычно используется в строке?
12) Часто ли используют подчеркивания в ссылках?
13) Часто ли используется замещение шрифтов?
Благодаря проведенным исследованиям было собрано очень много разнообразной информации, которая была оценена и должным образом подготовлена для статьи. Благодаря этим данным были разработаны некоторые рекомендации, которые можно использовать при наборе и редактировании текстов.
С засечками или без?
Использовать или не использовать шрифты с засечками – это личное дело каждого дизайнера. Об этом часто говорят, но общего правила так никто и не выработал. В большинстве случаев шрифты с засечками используются в заголовках, что бы сделать их более красивыми и бросающимися в глаза. Выбирая антикву для заголовка, вы можете быть уверены, что при большом размере шрифта текст будет читаем и выразителен. Так же появится ощутимый контраст между заголовком и самим основным текстом.
Но есть дизайнеры, которые считают, что засечки в основном тексте облегчают его чтение, они удерживают ваш взгляд на нужной строке.
Из результатов проведенных исследований видно, что сегодня в заголовках чаще всего используется гротеск, а антиква постепенно захватывает популярность, но до основной победы этому шрифту достаточно далеко.
Приведем факты, которые были выявлены в процессе написания данной статьи:
— порядка 60% сайтов пользуются гротесками в заголовках, чаще всего это Verdana, Arial и подобные. К этим ресурсам относятся такие, как CNN, Slate, BBC.
— лишь 34% сайтов используют антикву в основном тексте, во главе их New York Times, Newsweek.
— популярнейший шрифт в заголовках с засечками — Georgia (28%) и Baskerville (4%)
— в основном тексте чаще всего используется с засечками — Georgia (32%) и Times New Roman (4%)
— без засечек в заголовках чаще всего используют — Arial (28%), Helvetica (20%) и Verdana (8%)
— без засечек для основного текста в большинстве случаев выбирают — Arial (28%), Verdana (20%) и Lucida Grande (10%).
Практически 66% сайтов, которые были рассмотрены, используют в основном тексте гротески. Большая часть дизайнеров остается приверженцами основных шрифтов, несмотря на то, что популярность альтернативных растет с каждым днем (к примеру, Cufón). Чаще всего используются Georgia и Times New Roman, при чем Georgia предпочтительнее, так как Times New Roman имеет репутацию шрифта, который делает устаревшим любой современный дизайн. Нужно отметить, что гротески предлагают огромное количество вариантов начертаний при их использовании в вебе.
Самое популярное начертание.
Как это не странно, но даже при высокой популярности методов по замене шрифтов, а так же роста использования новых предустановленных шрифтов, таких как в Mac и Windows Vista, на тех ресурсах, которые были исследованы, по большей части использовались самые традиционные шрифты. Из новинок были встречены только Lucida Grande, Helvetica и Baskerville.
В основном тексте ожидаемо используются в основном Georgia, Arial и Verdana. Порядка 80% из всех исследованных сайтов использовали какой-либо из этих шрифтов. На остальных 20% чаще всего встречалась Helvetica – новый фаворит дизайнеров вэба.
Используя в качестве резервных Verdana и Arial, наш среднестатистический дизайнер может выбирать любые нестандартные шрифты, что бы получить максимальный эффект. Довольно много дополнительной информации по новым технологиям использования каскадных таблиц можно найти в работах Better CSS Font Stacks Натана Форда и BuildBetter CSS Font Stacks от CodeStyle.
Йон Тэн использует в заголовках антикву Baskerville, а в основном тексте стандартный Georgia.
Реже всего в заголовки попадает Verdana, в процессе исследований лишь на 10 сайтах этот шрифт был в основном тексте, а в заголовке вообще только 4 раза. В этом шрифте слишком много места между символами, что при увеличении кегля делает надписи очень некрасивыми и не аккуратными. Если вам так уж хочется использовать Verdana, то придется поработать со свойствами шрифта, что бы несколько поджать надпись. Из стандартного набора в заголовках чаще всего встречаются Georgia и Arial.
Можно с большой уверенностью сказать, что при оформлении той или иной статьи дизайнеры готовы экспериментировать со шрифтом заголовка, а основной текст делают по-старинке, с помощью стандартных шрифтов. Этот подход стоит принять на вооружение.
На светлом или на темном?
Еще один вопрос, на который хотелось бы получить ответ: будут ли дизайнеры работать с темным фоном? На глаза так и не попалось сайта с типографической ориентацией, где использовался бы темный фон.
Издание The New Yorker использует светлые тона, в заголовках и тексте – стандартный патриархальный Times New Roman.
Самым популярным был и остается чисто белый фон. Правда, большое количество проектов избегает использования чисто черного по белому, цвет текста немного светлее традиционно черного цвета. Любой дизайнер стремится добиться максимальной четкости изображения, иначе существует риск, что пользователи не будут использовать не читаемую информацию. Черный по белому был и остается самым удобным для чтения вариантом.
Размер шрифта в заголовке
Шрифт заголовка и его размер зависят непосредственно от того шрифта, который используется в большей части проекта. Самые популярные размеры по нашим данным находятся в диапазоне от 18 до 29 пикселей. При этом особо популярны размеры от 18 до 20 и от 24 до 26.
Явных лидеров не существует. Средний размер в числовом выражении – 25,6 пикселей, но это просто среднее значение, не больше, не меньше. Можно с полной уверенностью утверждать, что любой размер шрифта из указанных выше диапазонов, может быть эффективным, если он соотносится с размером основного текста проекта.
Но есть и свои исключения, для коротких заголовков, например таких, как у Вильсона Майнера, можно использовать очень массивные шрифты с размером 48 пикселей. При всего нескольких словах в заголовке это смотрится крайне органично.
Размер шрифта в основном тексте.
Не так давно, всего лишь каких-нибудь семь-восемь лет назад, дизайнеры сайтов очень часто использовали очень маленькие и практически не читаемые элементы, а основной текст набирался в Tahoma, предпочтительно восьмым кеглем. Сегодня маленькие шрифты утратили свою популярность, все чаще взор создателей сайтов притягивают большие шрифты. Проведенные исследования показали, что чаще всего основной текст имеет размер от 12 до 14 пикселей. Самым популярным размером можно назвать тринадцатый кегль, на нем представлено порядка 38% информации, четырнадцатый кегль немного популярнее двенадцатого. То есть, совершенно точно можно сказать, что средний размер и явный лидер для основного текста – тринадцатый.
В процессе исследований так же была отмечена тенденция, что в настоящее время огромное внимание уделяется различным небольшим, но крайне важным типографским деталям, таким как тире, кавычки, сноски, вводные тексты, имена авторов и так далее.
На Typographica, например, используется больший шрифт во вводной части текста и маленький в основной части.
Соотношение размеров шрифта заголовка и основного текста.
При решении этой задачи все было сделано эмпирическим путем, то есть попросту брались для каждого исследуемого сайта отношения размера шрифта заголовков к кеглю основного текста, в финальной стадии все полученные отношения были усреднены. В итоге было получено своеобразное «золотое сечение», а именно отношение размера шрифта в заголовке к размеру шрифта в основном тексте заметки составляет 1,96.
Вы просто можете увеличить кегль основного текста вдвое, благодаря этому у вас получится просто идеальный и прекрасно читаемый заголовок. Нужно, конечно, учитывать стиль написания и то, как вы привыкли оформлять статьи. Вы можете вообще не прислушиваться к каким-либо советам и просто выбрать подходящий на глаз размер из стандартного списка или любым другим удобным способом, лишь бы конечный типографический результат был привлекательным и читаемым.
Интерлиньяж в основном тексте.
Высота строки – интерлиньяж – напрямую зависит от выбранного размера шрифта, а так же формата набора. Чем длиннее строка, тем больше должен быть интерлиньяж. Нет абсолютно никакого смысла говорить о наиболее популярных размерах интерлиньяжа в пикселях. Лучше всего определить относительную величину (в % или em), которая будет определять соотношение интерлиньяжа к размеру шрифта или длине строки.
По результатам исследований можно сделать следующие выводы:
— отношение интерлиньяжа к размеру шрифта в основном тексте составляет 1,48. Классические книги по типографике предлагают вам использовать 1,5. Значение меньше полутора почти не используется или используется крайне редко. Так же оказалось, что и больше полутора почти не используется, хотя такие ресурсы все-таки существуют.
— длина строки к интерлиньяжу имеет отношение, которое равно 27,8
Средняя длина строки составляет около 538 пикселей без учета внутренних и внешних отступов. Это достаточно много, ведь большая часть сайтов, как мы уже выяснили, использует тринадцатый кегль.
— расстояние между абзацами к интерлиньяжу имеет отношение — 0,754
Этот результат вызвал некоторое удивление. Получается, что расстояние между соседними абзацами меньше, чем высота строки. Это скорее всего происходит потому, что в строке текста существует место для подстрочных символов, которые чаще всего отсутствуют. Конечно, для идеального вертикального ритма лучше всего иметь расстояние, равное высоте строки, к чему обычно и стремятся все дизайнеры.
Примером оптимального интерлиньяжа является AIGA. Здесь при раз мере шрифта 13,21 пикселя интерлиньяж равен 19,833 (оба значения переведены из em). Таким образом соотношение получается близьким к идеальному, а именно 1,5011.
Таким образом, как только выбран и утвержден размер шрифта, который будет использоваться в основном тексте, вы умножаете его на 1,5 и получаете оптимальный интерлиньяж. Далее, умножаем полученное значение на 27,8 и получаем оптимальную длину строки для этих условий. Нужно обязательно помнить и об отступах, что бы ваш текст смог «дышать».
The New Scientist использует между абзацами 20 пикселей.
Какое количество символов используется в строке?
В типографике, как и в любой другой отрасли знаний, есть различные классические принципы и правила. Так одно из них гласит, что идеальной является строка, которая включает от 55 до 75 символов. Большая часть сайтов, которые были рассмотрены в процессе написания статьи, пользуются именно такими значениями. Если взять стандартный шрифт, которым чаще всего пользуются дизайнеры, а так же средний размер кегля, то получится, что среднее количество символов в строке может быть 88,74, но это очень много. В реальности среднее значение находится в диапазоне от 75 до 85, что так же достаточно далеко от оптимального числа.
В среде дизайнеров очень популярны от 73 до 90 символов в строке, но есть и крайности. На глаза иногда попадаются ресурсы, где в строке насчитывается 45 символов (Monocle), а иногда даже 125 (Boxes and Arrows). Посчитать среднее значение для каждого конкретного сайта очень сложно, ведь нужно просчитать все строки, иначе данные будут неточными.
В своей работе вы можете пользоваться как классическим значением, так и тем, которое принято в широких дизайнерских кругах.
Дополнительная информация.
— порядка 46% сайтов используют подчеркнутые ссылки в основном тексте, остальные просто выделяют их с помощью цвета или стиля шрифта (bold)
— 6% часто или не очень используют в заголовках картинки, а так же в основном тексте (к примеру, Newsweek)
— большая часть сайтов, порядка 96%, не выравнивают тексты по ширине
— левый отступ чаще всего составляет 11,7 пикселей, считая от левой границы используемой области.
Итоги и выводы.
Все полученные данные дают возможность выделить некоторые принципы, которые могут быть полезны при наборе в веб-дизайне. Эти данные не являются обоснованными научно и могут служить лишь общими рекомендациями.
1) Как в основном тексте, так и в заголовках можно использовать текст как без засечек, так и с засечками, но гротески все же более популярны как для основного текста, так и для заголовков.
2) В заголовках чаще всего используют шрифты Arial, Helvetica или Georgia.
3) В основном тесте чаще всего используют шрифты Arial, Georgia, Lucida Grande и Verdana.
4) Размеры шрифтов, которые считаются самыми популярными для заголовков, находятся в диапазоне от 18 до 29 пикселей.
5) В основном тексте чаще всего используются кегли от двенадцатого до четырнадцатого.
6) Интерлиньяж относится к размеру текста в соотношении равному 1,48.
7) Длина строки к интерлиньяжу имеет соотношение равное 27,8.
8) Интерлиньяж к отступу имеет соотношение равное 0,754.
9) Оптимальным количеством символов в строке считается диапазон от 55 до 75 символов, но чаще всего используется диапазон от 75 до 85 символов.
10) Чаще всего основной текст выравнивают по левому краю, он крайне редко заменяется различными изображениями. Если в тексте присутствует ссылка, то она может быть выделена как подчеркиванием, так и цветом либо жирным написанием.
Нужно понимать, что все перечисленные правила скорее просто констатация фактов, чем закон. Но для начинающего и малоопытного дизайнера они могут служить фундаментом, на котором будет строиться ваш профессионализм. Но не стоит забывать, что каждый сайт является уникальным, это только ваше творение и ваш выбор. Используя полученную сравнительную таблицу, вы можете самостоятельно менять те или иные параметры для достижения максимального результата.
