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

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

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

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

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

Оглавление

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

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

Правило работает и в крупных блоках, и в малых формах

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

Правило работает и в крупных блоках, и в малых формах

Обычная лента из ссылок с подписями. Архив «Советов»

Журнал «Главбух»

Лента

Лента — раз­но­вид­ность тек­сто­во­го бло­ка. Это спи­сок заго­лов­ков ново­стей, ссы­лок, руб­рик или ком­мен­та­ри­ев. Рассмот­рим лен­ты без иллюстраций.

Вме­сто под­пи­сей над ссыл­ка­ми могут сто­ять бирки. Или сра­зу и бир­ки, и подписи.

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

Лента

Лента — раз­но­вид­ность тек­сто­во­го бло­ка. Это спи­сок заго­лов­ков ново­стей, ссы­лок, руб­рик или ком­мен­та­ри­ев. Рассмот­рим лен­ты без иллюстраций.

Вме­сто под­пи­сей над ссыл­ка­ми могут сто­ять бирки. Или сра­зу и бир­ки, и подписи.

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

Обычная лента из ссылок с подписями. Архив «Советов»

Журнал «Главбух»

хорошо

плохо

хорошо

приемлемо

безопаснее

Лента на сайте «Би‑би‑си»

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

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

Ино­гда даже — допол­ни­тель­ны­ми линейками.

Бирки могут «све­ши­вать­ся» в отдель­ную колон­ку ленты.

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

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

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

Ино­гда даже — допол­ни­тель­ны­ми линейками.

Бирки могут «све­ши­вать­ся» в отдель­ную колон­ку ленты.

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

хорошо

плохо

хорошо

приемлемо

безопаснее

Лента на сайте «Би‑би‑си»

Узкие вер­ти­каль­ные лен­ты нахо­дят­ся в окру­же­нии дру­гих моду­лей на стра­ни­це, кото­рые чита­тель рас­смат­ри­ва­ет парал­лель­но. Чтобы кон­текст не поте­рял­ся при про­крут­ке, лен­та долж­на по воз­мож­но­сти уме­щать­ся по высо­те в экран.

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

На сай­те «Ю‑Эс‑Эй Тудей» такой дизайн оправ­дан тем, что ссыл­ки сбо­ку игра­ют роль гене­ра­то­ров спон­тан­но­го инте­ре­са при чте­нии основ­ной колон­ки — дотош­но­го изу­че­ния пра­вой части окна не пред­по­ла­га­ет­ся. А для «Систе­мы Глав­бух» в бюро пред­ло­жи­ли более ком­пакт­ный дизайн, чем пока­зан здесь.

Узкие вер­ти­каль­ные лен­ты нахо­дят­ся в окру­же­нии дру­гих моду­лей на стра­ни­це, кото­рые чита­тель рас­смат­ри­ва­ет парал­лель­но. Чтобы кон­текст не поте­рял­ся при про­крут­ке, лен­та долж­на по воз­мож­но­сти уме­щать­ся по высо­те в экран.

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

На сай­те «Ю‑Эс‑Эй Тудей» такой дизайн оправ­дан тем, что ссыл­ки сбо­ку игра­ют роль гене­ра­то­ров спон­тан­но­го инте­ре­са при чте­нии основ­ной колон­ки — дотош­но­го изу­че­ния пра­вой части окна не пред­по­ла­га­ет­ся. А для «Систе­мы Глав­бух» в бюро пред­ло­жи­ли более ком­пакт­ный дизайн, чем пока­зан здесь.

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Ленте необя­за­тель­но иметь вер­ти­каль­ную фор­му. Корот­кая лен­та может вытя­нуть­ся в несколь­ко колонок.

Или даже занять колон­ка­ми гори­зон­таль­ный «этаж» на странице.

Чтобы сохра­нять пря­мо­уголь­ную фор­му мно­го­ко­ло­ноч­но­го моду­ля, его колон­ки долж­ны иметь оди­на­ко­вую высо­ту. Точ­ное равен­ство коло­нок в вебе крайне слож­но соблю­сти, но необ­хо­ди­мо поза­бо­тить­ся, чтобы каж­дая сле­ду­ю­щая колон­ка была не длин­нее преды­ду­щей. Для это­го фик­си­ру­ют коли­че­ство эле­мен­тов, вво­дят редак­тор­ские огра­ни­че­ния на дли­ну заго­лов­ков и даже про­грамм­но вычис­ля­ют физи­че­скую высо­ту тек­ста по его объёму.

В бумаж­ных газе­тах с супер­плот­ной модуль­ной вёрст­кой высо­та коло­нок иде­аль­но равна

Ленте необя­за­тель­но иметь вер­ти­каль­ную фор­му. Корот­кая лен­та может вытя­нуть­ся в несколь­ко колонок.

Или даже занять колон­ка­ми гори­зон­таль­ный «этаж» на странице.

В бумаж­ных газе­тах с супер­плот­ной модуль­ной вёрст­кой высо­та коло­нок иде­аль­но равна

Чтобы сохра­нять пря­мо­уголь­ную фор­му мно­го­ко­ло­ноч­но­го моду­ля, его колон­ки долж­ны иметь оди­на­ко­вую высо­ту. Точ­ное равен­ство коло­нок в вебе крайне слож­но соблю­сти, но необ­хо­ди­мо поза­бо­тить­ся, чтобы каж­дая сле­ду­ю­щая колон­ка была не длин­нее преды­ду­щей. Для это­го фик­си­ру­ют коли­че­ство эле­мен­тов, вво­дят редак­тор­ские огра­ни­че­ния на дли­ну заго­лов­ков и даже про­грамм­но вычис­ля­ют физи­че­скую высо­ту тек­ста по его объёму.

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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