Артём Горбунов

Типографика и вёрстка

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
 
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между важными местами
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая кни­га Издатель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фи­ке и вёрст­ке с акцен­том на маке­ти­ро­ва­нии для экра­на. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типогра­фи­ка и вёрст­ка» после­до­ва­тель­но отве­ча­ет на вопрос как. Автор вво­дит прин­ци­пы модуль­но­сти и якор­ных объ­ек­тов, пра­ви­ло внут­рен­не­го и внеш­не­го. Затем шаг за шагом нагляд­но объ­яс­ня­ет, как добить­ся акку­рат­ной и плот­ной вёрст­ки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
г67
г67
Гор­бу­нов А. С.
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая кни­га Издатель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фи­ке и вёрст­ке с акцен­том на маке­ти­ро­ва­нии для экра­на. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типогра­фи­ка и вёрст­ка» после­до­ва­тель­но отве­ча­ет на вопрос как. Автор вво­дит прин­ци­пы модуль­но­сти и якор­ных объ­ек­тов, пра­ви­ло внут­рен­не­го и внеш­не­го. Затем шаг за шагом нагляд­но объ­яс­ня­ет, как добить­ся акку­рат­ной и плот­ной вёрст­ки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

Скрыто 30 разворотов

2
Базовые
элементы

2
Базовые
элементы

Базовые элементы

Базо­вые эле­менты по функции:

  • заго­ло­вок — круп­ная над­пись, на­зы­ва­ю­щая стра­ни­цу или её блок;

  • текст — ос­нов­ное сообщение;

  • иллю­стра­ция — кар­тин­ка, со­про­вож­да­ю­щая сообщение;

  • эле­мент управ­ле­ния — функ­цио­наль­ная часть поль­зо­ва­тель­ско­го ин­тер­фей­са, на­при­мер по­ле вво­да или кнопка;

  • под­пись — по­яс­не­ние к ил­лю­стра­ции или эле­мен­ту управления;

  • гиперс­сылка — цвет­ная под­чёрк­ну­тая над­пись, ссы­ла­ю­ща­я­ся на дру­гую стра­ни­цу или элемент.

Задачи вёрст­ки сво­дят­ся к раз­ме­ще­нию этих эле­мен­тов на странице.

Важно научить­ся видеть и раз­ли­чать их в вёрст­ке. Поэто­му под иллю­стра­цией бло­ка пока­за­на его схе­ма: базо­вые эле­мен­ты акку­рат­но отде­ле­ны друг от дру­га и име­ют свои места.

Базовые элементы

Базо­вые эле­менты по функции:

  • заго­ло­вок — круп­ная над­пись, на­зы­ва­ю­щая стра­ни­цу или её блок;

  • текст — ос­нов­ное сообщение;

  • иллю­стра­ция — кар­тин­ка, со­про­вож­да­ю­щая сообщение;

  • эле­мент управ­ле­ния — функ­цио­наль­ная часть поль­зо­ва­тель­ско­го ин­тер­фей­са, на­при­мер по­ле вво­да или кнопка;

  • под­пись — по­яс­не­ние к ил­лю­стра­ции или эле­мен­ту управления;

  • гиперс­сылка — цвет­ная под­чёрк­ну­тая над­пись, ссы­ла­ю­ща­я­ся на дру­гую стра­ни­цу или элемент.

Задачи вёрст­ки сво­дят­ся к раз­ме­ще­нию этих эле­мен­тов на странице.

Важно научить­ся видеть и раз­ли­чать их в вёрст­ке. Поэто­му под иллю­стра­цией бло­ка пока­за­на его схе­ма: базо­вые эле­мен­ты акку­рат­но отде­ле­ны друг от дру­га и име­ют свои места.

плохо

И это пер­вое зна­ние о базо­вых эле­мен­тах: они не долж­ны быть хао­тич­но пере­ме­ша­ны на стра­ни­це. В бюро назы­ва­ют это вёрст­кой «с ком­ка­ми» — как в неудач­ной ман­ной каше.

Хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

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

плохо

хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

И это пер­вое зна­ние о базо­вых эле­мен­тах: они не долж­ны быть хао­тич­но пере­ме­ша­ны на стра­ни­це. В бюро назы­ва­ют это вёрст­кой «с ком­ка­ми» — как в неудач­ной ман­ной каше.

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

Заголовок

Заго­ло­вок — базо­вый эле­мент вёрстки.

Мы неслу­чай­но рас­смат­ри­ва­ем заго­лов­ки сра­зу в трёх дис­ци­пли­нах Школы ста­жё­ров: в «Типогра­фи­ке и вёрст­ке», «Интер­фей­се и инфор­ма­ции» и, конеч­но, «Тек­сте и редак­ту­ре». Заголо­вок зада­ёт кон­струк­цию стра­ни­цы, помо­га­ет вос­при­нять смысл и реша­ет инфор­ма­ци­он­ные зада­чи автора.

Заголо­вок — не про­сто фор­маль­ное резю­ме тек­ста, ина­че от него сто­и­ло бы изба­вить­ся как от лиш­не­го повтора.

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

По заго­лов­кам он при­мет реше­ние о даль­ней­шем чте­нии или даже выбе­рет меж­ду несколь­ки­ми текстами.

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

Заголо­вок слу­жит якор­ным объ­ек­том, орга­ни­зу­ет стра­ни­цу и её отдель­ные части. Обо­зна­ча­ет и даёт фор­му бло­кам тек­ста, направ­ля­ет чте­ние. Разме­ры заго­лов­ков пока­зы­ва­ют срав­ни­тель­ную важ­ность или логи­че­скую вло­жен­ность текстов.

Заголовок

Заго­ло­вок — базо­вый эле­мент вёрстки.

Мы неслу­чай­но рас­смат­ри­ва­ем заго­лов­ки сра­зу в трёх дис­ци­пли­нах Школы ста­жё­ров: в «Типогра­фи­ке и вёрст­ке», «Интер­фей­се и инфор­ма­ции» и, конеч­но, «Тек­сте и редак­ту­ре». Заголо­вок зада­ёт кон­струк­цию стра­ни­цы, помо­га­ет вос­при­нять смысл и реша­ет инфор­ма­ци­он­ные зада­чи автора.

Заголо­вок — не про­сто фор­маль­ное резю­ме тек­ста, ина­че от него сто­и­ло бы изба­вить­ся как от лиш­не­го повтора.

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

По заго­лов­кам он при­мет реше­ние о даль­ней­шем чте­нии или даже выбе­рет меж­ду несколь­ки­ми текстами.

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

Заголо­вок слу­жит якор­ным объ­ек­том, орга­ни­зу­ет стра­ни­цу и её отдель­ные части. Обо­зна­ча­ет и даёт фор­му бло­кам тек­ста, направ­ля­ет чте­ние. Разме­ры заго­лов­ков пока­зы­ва­ют срав­ни­тель­ную важ­ность или логи­че­скую вло­жен­ность текстов.

Простей­ший заго­ло­вок — это круп­ная одно­род­ная над­пись строч­ны­ми бук­ва­ми с про­пис­ной в нача­ле и без точ­ки в конце.

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

плохо

хорошо

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

Жизнь и приключения Робинзона Крузо

Простей­ший заго­ло­вок — это круп­ная одно­род­ная над­пись строч­ны­ми бук­ва­ми с про­пис­ной в нача­ле и без точ­ки в конце.

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

плохо

Жизнь и удивительные приключения Робинзона
Крузо

хорошо

Жизнь и удивительные приключения Робинзона Крузо

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

Скрыто 136 разворотов

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015