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

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

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

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

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

Оглавление

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

Если текст раз­бит на колон­ки, то дочи­тав одну колон­ку, чело­век ищет навер­ху нача­ло сле­ду­ю­щей. При этом сохра­ня­ет­ся дви­же­ние сле­ва напра­во, свер­ху вниз.

Направ­ле­ние чте­ния по колон­кам изо­бра­зим гори­зон­таль­ной стрелкой.

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

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

Если текст раз­бит на колон­ки, то дочи­тав одну колон­ку, чело­век ищет навер­ху нача­ло сле­ду­ю­щей. При этом сохра­ня­ет­ся дви­же­ние сле­ва напра­во, свер­ху вниз.

Направ­ле­ние чте­ния по колон­кам изо­бра­зим гори­зон­таль­ной стрелкой.

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

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

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

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

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

Если «сло­мать» вырав­ни­ва­ние, текст сно­ва объ­еди­нит­ся в колонки.

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

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

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

Если «сло­мать» вырав­ни­ва­ние, текст сно­ва объ­еди­нит­ся в колонки.

так себе

лучше

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

Такие спис­ки луч­ше раз­бить на колон­ки и поста­вить друг под дру­га. Кстати, колон­ки будет гораз­до лег­че выров­нять по высоте.

так себе

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

лучше

Такие спис­ки луч­ше раз­бить на колон­ки и поста­вить друг под дру­га. Кстати, колон­ки будет гораз­до лег­че выров­нять по высоте.

Положе­ние иллю­стра­ции отно­си­тель­но тек­ста тоже зада­ёт направление.

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

Так себе

«Тра­ек­то­рия» взгляда должна опи­сы­вать про­стую линию без непред­ска­зу­е­мых поворотов.

Лучше

Положе­ние иллю­стра­ции отно­си­тель­но тек­ста тоже зада­ёт направление.

Так себе

Так себе

Лучше

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

«Тра­ек­то­рия» взгляда должна опи­сы­вать про­стую линию без непред­ска­зу­е­мых поворотов.

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние созда­ёт новый псевдомодуль.

Новост­ной блок име­ет вид шах­мат­ной дос­ки: ста­тьи спра­ва подо­зри­тель­но свя­за­лись с круп­ной фото­гра­фи­ей Кудри­на, а заго­ло­вок замет­ки о нём — с автор­ской колон­кой Дениса Самсонова.

На маке­те пла­ка­та под­пись к верх­ней иллю­стра­ции с про­цен­та­ми — «В Рос­сии совер­ша­ет­ся 49% абор­тов» — выров­не­на по вер­ху изо­бра­же­ния рекла­ми­ру­е­мо­го пре­зер­ва­ти­ва, а сло­ган — по низу. Эти две над­пи­си и изо­бра­же­ние упа­ков­ки обра­зу­ют модуль, и фра­за об абор­тах увя­зы­ва­ет­ся с това­ром. Как буд­то это пре­зер­ва­ти­вы во всём виноваты.

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

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние созда­ёт новый псевдомодуль.

Новост­ной блок име­ет вид шах­мат­ной дос­ки: ста­тьи спра­ва подо­зри­тель­но свя­за­лись с круп­ной фото­гра­фи­ей Кудри­на, а заго­ло­вок замет­ки о нём — с автор­ской колон­кой Дениса Самсонова.

На маке­те пла­ка­та под­пись к верх­ней иллю­стра­ции с про­цен­та­ми — «В Рос­сии совер­ша­ет­ся 49% абор­тов» — выров­не­на по вер­ху изо­бра­же­ния рекла­ми­ру­е­мо­го пре­зер­ва­ти­ва, а сло­ган — по низу. Эти две над­пи­си и изо­бра­же­ние упа­ков­ки обра­зу­ют модуль, и фра­за об абор­тах увя­зы­ва­ет­ся с това­ром. Как буд­то это пре­зер­ва­ти­вы во всём виноваты.

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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