Основные понятия типографики для веб–дизайнера...

11
Основные понятия типографики для веб–дизайнера Часть 2-я: композиция skillupdesign.ru | Herman K. Tishkin

Upload: herman-kapnin

Post on 13-Apr-2017

3.421 views

Category:

Design


4 download

TRANSCRIPT

Page 1: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Основные понятия типографикидля веб–дизайнера

Часть 2-я: композиция

skillupdesign.ru | Herman K. Tishkin

Page 2: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Восприятие (часть 1-я) Кегль Строчные, прописные, капитель,

моноширинный шрифт; Апрош, трекинг, интерлиньяж, кернинг; Курсив (italic), толщина (weight); Гарнитура; Антиква (serif), рубленный (sans-serif),

гротеск; Контраст; Дефис, минус, короткое и длинное тире; Кавычки.

Композиция (часть 2-я) Сетка; Ритмическая структура; Внешние и внутренние поля; Длина строки; Правила переноса; Висячие строки и предлоги.

Основные направления

skillupdesign.ru | Herman K. Tishkin

Page 3: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Сетка

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

Варианты сеток: Сетка-блок — поля, окружают одну колонку текста. Ширина колонки —

это длина строки. Многоколонная сетка — сплошной текст завёрстывают в несколько

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

Модульная сетка — вёрстка с ориентировкой на модуль. Модульная сетка делит плоскость не только на колонки, но и на равные промежутки по вертикали.Модуль — наименьший элемент изобразительной поверхности.

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

skillupdesign.ru | Herman K. Tishkin

Page 4: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Ритмическая структура

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

Если текст необходимо сделать заметным, то ритм стоит разрушить или сделать необычным.

Ритмическая структура текста состоит из: Межбуквенных пробелов — согласованием внутрибуквенных просветов и апрошей; Межсловных пробелов — большие пробелы и физиологически не нужны и делают

весь рисунок набора решетчатым, портят композицию страницы в эстетическом отношении;

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

Длины строки — для сплошного чтения от 55 до 75 знаков; Интерлиньяжа — спутать стоящие рядом строки тем сложнее, чем больше между

ними расстояние.skillupdesign.ru | Herman K. Tishkin

Page 5: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Внешние и внутренние поля

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

skillupdesign.ru | Herman K. Tishkin

Page 6: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Длина строки

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

В среднем количество слов в строке, которое человек может без труда воспринимать колеблется между 10–12.

skillupdesign.ru | Herman K. Tishkin

Page 7: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Правила переноса

1. Слова нужно переносить по слогам;2. Запрещено переносить и оставлять в концу строки одну гласную,

образующую слог (о-сень, мо-я).3. Слова с приставками. Если односложная приставка кончается на

согласный, а дальше идёт гласный, кроме ы, то возможен двоякий перенос: без-умный, бе-зумный, без-аварийный, бе-заварийный.

4. Если после приставки следует буква ы, то нельзя перенести так: раз-ыскать, а можно ра-зыскать или разыс-кать, разы-скать.

5. Переносим начальную часть корня при переносе слов с приставками: при-слать (а не прис-лать), от-странять (а не отс-транять).

6. Нельзя разбивать переносом сложносокращённые слова, которые пишутся или одними прописными (СССР, МИД) или частью прописными, частью строчными (КЗоТ).

7. И многое другое в «Орфографическом словаре» Ушаковаskillupdesign.ru | Herman K. Tishkin

Page 8: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Висячие строки и предлоги

Висячие и короткие концевые строки (widows and orphans) — висячей называют первую строку абзаца в конце колонки текста или последнюю строку абзаца в начале колонки текста.

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

Короткая концевая строка — это последняя строкаабзаца короче полутора абзацных отступов(а в наборе без отступов — 3–4 знака).

Она создаёт впечатление отбивки, разрываяполосу набора на части. От коротких концевыхстрок (в отличие от висячих) приходитсяизбавляться вручную skillupdesign.ru | Herman K. Tishkin

Page 9: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Композиция > Висячие строки и предлоги

Висячие предлоги — т.е. однобуквенные предлоги и союзы в конце строки.

Их в русском языке 7:

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

Лучше всего бороться с «висячими предлогами» с помощью расставленных после них неразрывных пробелов. В HTML это спецсимвол — –

skillupdesign.ru | Herman K. Tishkin

Page 10: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Используемые источники: Википедия; «Живая типографика» Александры Корольковой.

skillupdesign.ru | Herman K. Tishkin

Page 11: Основные понятия типографики для веб–дизайнера (Часть 2-я)

Спасибо за внимание!

Herman K. Tishkin+7 (916) 160–45–[email protected]://skillupdesign.ru