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

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

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

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

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

Оглавление

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

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

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

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

С пер­вой про­бле­мой изоб­ре­та­тель­но спра­ви­лись дизай­не­ры «Вконтак­те». Опубли­ко­ван­ная в лен­те ссыл­ка акку­рат­нее и в два раза ком­пакт­нее ана­ло­гич­ной ссыл­ки в «Фейсбуке».

Хит­рость в том, что мини­а­тюр­ная фото­гра­фия иде­аль­но под­ре­за­ет­ся по высо­те тек­сто­вой части. Вопрос о том, пра­виль­но ли под­ре­зать автор­ские фото­гра­фии, не сто­ит — Фейс­бук тоже под­ре­за­ет, но по фор­ме слу­чай­но­го квадрата.

Фейсбук

Вконтакте

Фейсбук

Вконтакте

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

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

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

С пер­вой про­бле­мой изоб­ре­та­тель­но спра­ви­лись дизай­не­ры «Вконтак­те». Опубли­ко­ван­ная в лен­те ссыл­ка акку­рат­нее и в два раза ком­пакт­нее ана­ло­гич­ной ссыл­ки в «Фейсбуке».

Хит­рость в том, что мини­а­тюр­ная фото­гра­фия иде­аль­но под­ре­за­ет­ся по высо­те тек­сто­вой части. Вопрос о том, пра­виль­но ли под­ре­зать автор­ские фото­гра­фии, не сто­ит — Фейс­бук тоже под­ре­за­ет, но по фор­ме слу­чай­но­го квадрата.

Про­блем­ная иллю­стра­ция «в под­мышке» не отде­ля­ет заго­ло­вок от нача­ла тек­ста, если сто­ит справа:

Плохо

Левая подмышка

Иллюстра­ция отделяет заголовок от текста

Хорошо

Правая подмышка

Про­блем­ная иллю­стра­ция «в под­мышке» не отде­ля­ет заго­ло­вок от нача­ла тек­ста, если сто­ит справа:

Плохо

Левая подмышка

Хорошо

Правая подмышка

Иллюстра­ция отделяет заголовок от текста

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

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

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

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

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

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

Плохо

Лучше

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

Текст неожи­дан­но меня­ет левый край в слу­чай­ном месте. С пер­во­го взгля­да глаз выхва­ты­ва­ет и вос­при­ни­ма­ет это место как нача­ло тек­ста. А при после­до­ва­тель­ном чте­нии свер­ху вниз — спо­ты­ка­ет­ся в попыт­ке най­ти нача­ло съе­хав­шей строки.

Как и в слу­чае с «под­мыш­кой», доста­точ­но пере­ста­вить кар­тин­ку вправо.

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

Текст неожи­дан­но меня­ет левый край в слу­чай­ном месте. С пер­во­го взгля­да глаз выхва­ты­ва­ет и вос­при­ни­ма­ет это место как нача­ло тек­ста. А при после­до­ва­тель­ном чте­нии свер­ху вниз — спо­ты­ка­ет­ся в попыт­ке най­ти нача­ло съе­хав­шей строки.

Как и в слу­чае с «под­мыш­кой», доста­точ­но пере­ста­вить кар­тин­ку вправо.

Плохо

Лучше

хорошо

Сайт «Зе Вилладж»

плохо

Сайт «Зе Вилладж»

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

Это пре­крас­но выгля­дит, если иллю­стра­ция согла­со­ва­на с текстом.

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

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

Это пре­крас­но выгля­дит, если иллю­стра­ция согла­со­ва­на с текстом.

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

хорошо

Сайт «Зе Вилладж»

плохо

Сайт «Зе Вилладж»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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