Отправляет email-рассылки с помощью сервиса Sendsay

WebDesign.Doc

Подписаться Бесплатная новостная рассылка Подписчиков 1.564 RSS
←   Апрель 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
13.04.2009
15:25:06
18:05:20
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
28.04.2009
10:26:47
13:56:29
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://internetsoft.16mb.com/
Открыта: 15-02-2005

Автор
Andrew

Статистика

1.564 подписчиков
0 за неделю
←   Все выпуски   →

WebDesign.Doc - электронная библиотека веб-мастера: 162


WEbDESiGN.doc   //   №162
PHP от A до Я: всё для создания динамичного веб-сайтаSEO от A до Я: всё для продвижения вашего сайтаКлипарт: Web 2.0

МАСТЕРСКАЯ

8 простых способов улучшить типографику в вашем дизайне

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

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

1. Размеры

Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длинна строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

Сравнение длинн строк текста

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
p {
font-size: 10px;
max-width: 300px;
}
Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

2. Интерлиньяж

Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длинна строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

Правильный интерлиньяж

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}

3. Обработка кавычек.

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

Кавычки надо обрабатывать на полях

Это легко достигается с помощью CSS, используя элемент blockquote:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм.

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

Вертикальный ритм, использование сетки

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}

p {
margin-bottom: 15px;
}

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

5. Окна и абзацевая строка.

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

Окна и абзацевая строка

К несчастью, нет простого способа предотвратить типографические окна или абзацевые строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение.

Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.
Выделение не должно `разрывать` текст
Вот несколько способов выделения с помощью CSS:
span {
font-style: italic;
}

h1 {
font-weight: bold;
}

h2 {
text-transform: uppercase;
}

b {
font-variant: small-caps;
}
Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб.

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

Типографический масштаб

Пример типографического масштаба определенного в CSS:
h1 {
font-size: 48px;
}

h2 {
font-size: 36px;
}

h3 {
font-size: 24px;
}

h4 {
font-size: 21px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}

p {
font-size: 14px;
}

8. Подчищаем хвосты.

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить хвосты (нечетные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм. Скверная грань может отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких граней. Нет способа контролировать это с помощью CSS, так что для получения хороших краев надо вносить ручные правки в текст.
Мягкий и рваный край текста
Так же можно получить чистые края с помощью переносов, но к сожалению CSS не может тут помочь. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые будут осуществлять автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.

Что то страшное

Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

Ресурсы для дальнейшего изучения.

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

О авторе

Антонио Карусон (Antonio Carusone) это графический дизайнер из Нью-Йорка и автор AisleOne, блога посвященного графическому дизайну и типографике, The Grid System, неуклонно расширяющегося ресурса о сеточной системе и части Thinking for a Living Network.

ОТПРАВИТЬ ВОПРОС В РАССЫЛКУ:
HELP@WM-ZONE.INFO →

Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail: admin@wm-zone.info

ведущий рассылки - Путченков Дмитрий
WebMasterZone - http://wm-zone.info
В избранное