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

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

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

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

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

Оглавление

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

Таблицы

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

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

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

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

На при­мере оформ­ле­ние таб­ли­цы с заго­лов­ком и пояс­ня­ю­щим текстом.

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Пока­зано коли­че­ство выпи­тых чашек без учёта кофе‑брей­ков на кур­сах бюро. Дан­ных за ноябрь пока нет.

Эсп.рессо Капуч.ино Лате Америк.ано Всего
2013
Сентябрь 61 20 70 61 212142
Октябрь 68 29 56 60 213157
Ноябрь 70 21 13 17 121108
2014
Сентябрь 54 65 28 35 182154
Октябрь 59 77 51 53 240189

Таблицы

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

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

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

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

На при­мере оформ­ле­ние таб­ли­цы с заго­лов­ком и пояс­ня­ю­щим текстом.

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Пока­зано коли­че­ство выпи­тых чашек без учёта кофе‑брей­ков на кур­сах бюро. Дан­ных за ноябрь пока нет.

Эсп.рессо Капуч.ино Лате Америк.ано Всего
2013
Сентябрь 61 20 70 61 212142
Октябрь 68 29 56 60 213157
Ноябрь 70 21 13 17 121108
2014
Сентябрь 54 65 28 35 182154
Октябрь 59 77 51 53 240189

Особые эле­мен­ты текста

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

Ссылки на фай­лы оформ­ля­ют­ся как обыч­ные ссыл­ки. Текст внут­ри ссыл­ки и рядом с ней дол­жен сооб­щать, что имен­но содер­жит­ся в фай­ле, како­го он типа и раз­ме­ра. Раз­мер дол­жен ука­зы­вать­ся по‑рус­ски (МБ, КБ). Назва­ние фай­ла допу­сти­мо, но необязательно.

Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru

Особые эле­мен­ты текста

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

Ссылки на фай­лы оформ­ля­ют­ся как обыч­ные ссыл­ки. Текст внут­ри ссыл­ки и рядом с ней дол­жен сооб­щать, что имен­но содер­жит­ся в фай­ле, како­го он типа и раз­ме­ра. Раз­мер дол­жен ука­зы­вать­ся по‑рус­ски (МБ, КБ). Назва­ние фай­ла допу­сти­мо, но необязательно.

Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru

Иллюстрации

Отдель­ные внут­ри­тек­сто­вые иллю­стра­ции завёр­сты­ва­ют­ся по лево­му краю или цен­тру поло­сы набора.

После иллю­стра­ции (с под­пи­сью или без) остав­ля­ют уве­ли­чен­ное вер­ти­каль­ное расстояние.

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

Подписи выводятся шрифтом уменьшенного кегля. Точка в конце подписи не ставится

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

Иллюстрации

Отдель­ные внут­ри­тек­сто­вые иллю­стра­ции завёр­сты­ва­ют­ся по лево­му краю или цен­тру поло­сы набора.

После иллю­стра­ции (с под­пи­сью или без) остав­ля­ют уве­ли­чен­ное вер­ти­каль­ное расстояние.

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

Подписи выводятся шрифтом уменьшенного кегля.
Точка в конце подписи не ставится

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

Главная страница

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

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

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

Главная страница

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

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

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

Лента

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

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

Лента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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