Что такое шрифтовая пара

Основные принципы сочетания шрифтов

П од­бор шриф­то­вых пар обыч­но субъ­ек­ти­вен и за­висит от ин­ди­виду­аль­но­го вку­са и же­ла­емо­го ре­зуль­та­та. Лю­бые ре­комен­да­ции, в осо­бен­ности без при­вяз­ки к конк­рет­ной за­даче, тоже субъ­ек­тивны и приб­ли­зитель­ны. Тем не ме­нее об­щим пра­вилом мо­жет стать фор­му­ла: в со­чета­емых шриф­тах долж­ны од­новре­мен­но при­сутс­тво­вать конт­раст и единс­тво. Мера конт­рас­та и мера единс­тва, так­же как и спо­собы их дос­ти­жения, оп­ре­деля­ют­ся от­дель­но для каж­до­го конк­рет­но­го слу­чая. Если тре­бу­ет­ся все­го лишь вы­делить сло­во в стро­ке книж­но­го текс­та серь­ез­но­го со­дер­жа­ния, то це­лесо­об­разно сде­лать толь­ко одно ми­нималь­ное дви­жение — по­менять пря­мое на­чер­та­ние на кур­сив без из­ме­нения на­сыщен­ности. Ис­поль­зо­вание в та­ких слу­ча­ях жир­но­го на­чер­та­ния или, того хуже, жир­но­го кур­си­ва, бу­дет выг­ля­деть чрез­мерно и не­дели­кат­но. Ту же за­дачу в дру­гом из­да­нии — детс­кой ли­тера­туре, разв­ле­катель­ной пе­ри­оди­ке или рек­ла­ме — мож­но ре­шить бо­лее ра­дикаль­но: по­менять гар­ни­туру, кегль, цвет. При этом сле­ду­ет сох­ра­нять единс­тво и пом­нить о том, что гром­че все­го долж­ны зву­чать за­голов­ки, а не вы­деле­ния в стро­ке.

Внут­ри­гар­ни­тур­ные со­чета­ния

Хо­рошая ти­пог­ра­фика, как пра­вило, об­хо­дит­ся ма­лыми средс­тва­ми. Боль­шинс­тво ти­пог­рафс­ких по­лос, осо­бен­но книж­ных, мож­но впол­не ус­пешно наб­рать од­ной единс­твен­ной гар­ни­турой шриф­та, ис­поль­зуя при не­об­хо­димос­ти кур­сив и ка­питель. Пря­мое на­чер­та­ние, кур­сив и ка­питель — это клас­си­чес­кая гар­мо­нич­ная три­ада. Не так дав­но ки­рил­ли­чес­кие шриф­ты с ка­питель­ны­ми на­чер­та­ни­ями были ред­костью, но в пос­ледние годы в биб­ли­оте­ке Па­раТайп по­яви­лось мно­жест­во та­ких гар­ни­тур: ITC Нью Бас­кервиль (ITC New Baskerville), ITC Бо­дони 72 (ITC Bodoni 72), ITC Чар­тер (ITC Charter), ITC Франк­лин Го­тик (ITC Franklin Gothic), Орид­жи­нал Га­рамон (Original Garamond), Ок­та­ва (Octava), Киш (Kis), FF Mета (FF Мeta), ITC Офи­цина (ITC Оfficina) и дру­гие. Ог­ра­ниче­ни­ем од­ной гар­ни­турой ав­то­мати­чес­ки дос­ти­га­ет­ся единс­тво, раз­но­об­ра­зи­ем на­чер­та­ний — конт­раст. Даже в слож­ност­рук­ту­риро­ван­ных из­да­ни­ях с мно­гос­ту­пен­ча­той сис­те­мой руб­ри­кации, нес­коль­ки­ми па­рал­лель­но иду­щими текс­та­ми, мно­жест­вом при­меча­ний, под­пи­сей и сно­сок мож­но ог­ра­ничить­ся од­ной рас­ши­рен­ной шриф­то­вой гар­ни­турой с боль­шим ко­личест­вом на­чер­та­ний. ITC Франк­лин Го­тик, к при­меру, вклю­ча­ет в себя двад­цать два на­чер­та­ния, FF Mета — двад­цать, ITC Офи­цина Санс и ITC Офи­цина Се­риф — по пят­надцать, Праг­ма­тика — со­рок два, ITC Чар­тер — во­семь. Од­на­ко и здесь надо соб­лю­дать меру и не ис­поль­зо­вать сра­зу все воз­можнос­ти шриф­та. Со­сед­ние по на­сыщен­ности на­чер­та­ния, как пра­вило, пло­хо ра­бота­ют вмес­те. Не хва­та­ет конт­рас­та.

По­это­му луч­ше «брать че­рез од­но­го» — к при­меру, со­четать на­чер­та­ния Light и Medium, Normal и Bold. Кур­сивные и нак­лонные на­чер­та­ния долж­ны быть той же на­сыщен­ности, что и пря­мые.

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

Ком­па­ния Па­раТайп го­товит к вы­пус­ку ки­рил­ли­зован­ную су­пер­гарни­туру ITC Stone, вклю­ча­ющую в себя ан­тикву и гро­теск (им наб­ра­на эта кни­га). ITC Офи­цину Санс и ITC Офи­цину Се­риф нель­зя наз­вать су­пер­гарни­турой в пол­ном смыс­ле, пос­коль­ку ITC Офи­цина Се­риф — это брус­ко­вый шрифт, а не ан­тиква в клас­си­чес­ком по­нима­нии. Ус­ловно мож­но наз­вать су­пер­гарни­турой ITC Бен­гет (ITC Benguiat) и ITC Бен­гет Го­тик (ITC BenguiatGothic), а так­же Ма­сон Санс (Mason Sans) и Ма­сон Се­риф (Mason Serif), но это ско­рее де­кора­тив­ные шриф­ты, не­жели текс­то­вые. Кро­ме того, у ITCБен­гет и ITC Бен­гет Го­тик раз­ные сте­пени на­сыщен­ности, по­это­му их труд­но при­менять сов­мест­но.

Ан­тиква плюс гро­теск

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

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

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

По мере уве­личе­ния зак­ры­тос­ти зна­ков уве­личи­ва­ют­ся ста­тич­ность и стрем­ле­ние к од­но­ширин­ности.

Для боль­шинс­тва ан­тиквен­ных шриф­тов мож­но най­ти мес­то в ряду меж­ду отк­ры­той ди­намич­ной раз­но­ширин­ной ве­неци­анс­кой ан­тиквой ста­рого сти­ля и зак­ры­той ста­тич­ной од­но­ширин­ной ан­тиквой но­вого сти­ля. Гро­тес­ки так или ина­че пов­то­ря­ют струк­ту­ру ан­тикв. Они тоже бы­ва­ют отк­ры­тыми и зак­ры­тыми, ди­намич­ны­ми и ста­тич­ны­ми. (Под­робнее о клас­си­фика­ции шриф­тов см. пос­ледний ка­талог Па­раТайп «Циф­ро­вые шриф­ты».) Гар­мо­нич­ные пары по­луча­ют­ся при со­чета­нии ан­тиквы и гро­тес­ка со схо­жими ха­рак­те­рис­ти­ками.

Единс­тво мож­но най­ти не толь­ко в струк­ту­ре, но и в ха­рак­те­ре шриф­та, его иде­оло­гии, ко­торой ру­ководс­тво­вал­ся соз­да­тель. Нап­ри­мер, кому-то мо­жет пон­ра­вить­ся со­чета­ние отк­ры­того ге­омет­ри­чес­ко­го гро­тес­ка Фу­тура с зак­ры­той ан­тиквой но­вого сти­ля: их объ­еди­ня­ет стрем­ле­ние к ге­омет­ри­чес­кой чис­то­те, а не к кал­лигра­фичес­ко­му дви­жению.

Шриф­ты ITC Чар­тер и ITC Франк­лин Го­тик объ­еди­ня­ет со­лид­ный и уве­сис­тый ха­рак­тер.

Еди­ное ав­торс­тво шриф­тов тоже мо­жет дать не­об­хо­димую бли­зость сти­ля. Од­на­ко со­четать гар­ни­туры по это­му приз­на­ку надо очень ос­то­рож­но, пос­коль­ку не всег­да шриф­ты од­но­го ди­зай­не­ра бы­ва­ют близ­ки по струк­ту­ре и кон­цепции. Но иног­да по­луча­ют­ся неп­ло­хие со­чета­ния. Нап­ри­мер, шрифт Бал­ти­ка (Baltica), раз­ра­ботан­ный на ос­но­ве шриф­та Candida Яко­ба Эр­ба­ра, мож­но со­четать с Жур­наль­ной Руб­ле­ной (Journal Sans), ос­но­ван­ной на шриф­те Erbar Grotesk того же ав­то­ра.

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

Ан­тиква плюс скрипт

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

Ан­тиква плюс ан­тиква

Со­чета­ние двух текс­то­вых ан­тикв ред­ко дает хо­рошие ре­зуль­та­ты. Но за­голо­воч­ные ан­тиквы очень хо­рошо со­чета­ют­ся с близ­ки­ми по духу текс­то­выми. Иног­да текс­то­вый и за­голо­воч­ный шриф­ты про­ек­ти­ру­ют­ся спе­ци­аль­но друг для дру­га. Нап­ри­мер, шрифт Свет­ла­на (Svetlana) был раз­ра­ботан как текс­то­вая вер­сия шриф­та Ба­жановс­кая Ти­туль­ная (Bazhanov Display).

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

Шриф­ты из пар типа Ба­жановс­кая Ти­туль­ная — Свет­ла­на или Ели­заве­тинс­кая (Еlizabeth) — Бо­дони нель­зя ис­поль­зо­вать в од­ном кег­ле. Они очень по­хожи друг на дру­га и конт­рас­та меж­ду ними мож­но до­бить­ся толь­ко че­рез раз­ни­цу раз­ме­ров. Ан­тиквы, струк­турно раз­личные, луч­ше не ис­поль­зо­вать вмес­те вов­се. Иск­лю­чение сос­тавля­ют гар­ни­туры с вы­ражен­ной де­кора­тив­ностью.

Гро­теск плюс гро­теск

В паре «гро­теск — гро­теск» один (за­голо­воч­ный) дол­жен иг­рать соло, дру­гой (текс­то­вый) быть ор­кест­ром. Ска­жем, один гро­теск мо­жет быть нем­но­го де­кора­тив­ным, дру­гой стро­гим, один жир­ным, дру­гой свет­лым. Со­чета­ние гро­тес­ков по­хожей эс­те­тики или близ­ко­го вре­мени раз­ра­бот­ки дает бо­лее га­ран­ти­рован­ный ре­зуль­тат.

На при­веден­ных при­мерах это — Квад­рат Гро­теск (QuadratGrotesk) и ITC Франк­лин Го­тик, Ре­фор­ма Гро­теск (Reforma Grotesk) и Белл Го­тик (Bell Gothic), все они от­но­сят­ся к груп­пе ста­рых гро­тес­ков. Но и раз­ные по духу гро­тес­ки (Оли­вер и Праг­ма­тика) при уме­лом ис­поль­зо­вании мо­гут хо­рошо ра­ботать вмес­те.

Ни при ка­ких обс­то­ятель­ствах не сле­ду­ет ис­поль­зо­вать пары типа Фри­Сет (Freeset) — Праг­ма­тика или Праг­ма­тика — ITC Франк­лин Го­тик. В пер­вом слу­чае два сис­те­мати­зиро­ван­ных шриф­та со­вер­шенно раз­но­го сти­ля (один отк­ры­тый, дру­гой за­кры­тый) име­ют оди­нако­вую силу вы­рази­тель­нос­ти

и ни один из них не мо­жет ус­ту­пить мес­то дру­гому. Во вто­ром слу­чае конф­ликт воз­ни­ка­ет из-за оп­ре­делен­ной бли­зос­ти, опять же в ус­ло­ви­ях рав­ных прав. Праг­ма­тика от­но­сит­ся к груп­пе но­вых гро­тес­ков, ITC Франк­лин Го­тик — к груп­пе ста­рых гро­тес­ков. Но­вые гро­тес­ки раз­ви­ва­ют прин­ци­пы пост­ро­ения ста­рых гро­тес­ков. Они по­хожи друг на дру­га, и со­четать их — все рав­но что по­давать от­варной кар­то­фель на гар­нир к кар­то­фель­ным оладь­ям.

В зак­лю­чение хо­чет­ся на­пом­нить о субъ­ек­тивнос­ти лю­бых ти­пог­ра­фичес­ких ре­комен­да­ций. Нап­ри­мер, из­вест­ный ка­надс­кий ти­пог­раф Ро­берт Бринг­херст (Robert Bringhurst) в кни­ге «Ос­но­вы сти­ля в ти­пог­ра­фике» («The Elements of Typographic Style») пи­шет: «Baskerville, Helvetica, Palatino и Times Roman, … — это шриф­ты, встре­ча ко­торых обе­ща­ет лишь пуб­личный скан­дал. Ни один из этих шриф­тов не со­чета­ет­ся с ка­ким-либо дру­гим, так как у каж­до­го из них раз­личная кон­цепция шриф­то­вой фор­мы». Од­на­ко же со­чета­ние Helvetica (Праг­ма­тика) и Times Roman (Нь­ютон) ста­ло ти­пог­ра­фичес­кой тра­дици­ей. Кро­ме того, нуж­но пом­нить, что из­ме­нение па­рамет­ров шриф­тов при­водит к по­яв­ле­нию ог­ромно­го ко­личест­ва ва­ри­аций. По­это­му работа ди­зай­нера предполагает возможность са­мос­то­ятель­но най­ти пра­виль­ное со­чета­ние шриф­тов, опи­ра­ясь на собс­твен­ный вкус, чувс­тво меры и сти­ля.

Источник

Что такое шрифтовые пары и как их подбирать

Один шрифт — хорошо, а два — лучше! Именно пары шрифтов часто используют в дизайне. Разберёмся, почему именно.

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

Вот так это выглядит — в следующем примере анонса заголовок набран жирными узкими и длинными буквами, а шрифт основного текста — более широкий и тонкий:

Давайте разберёмся, какие задачи решают шрифтовые пары и как их составляют.

Пишет о дизайне в Skillbox, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

Зачем это нужно

Разница шрифтов позволяет создать визуальную иерархию — показать, что одни надписи главные, а другие второстепенные. Например, бросив взгляд на какое-нибудь объявление в лифте, вы быстро заметите информацию о 50-процентной скидке в магазине — потому что такие сообщения пишут крупно, жирно и выразительно. И только если заинтересуетесь, прочтёте менее заметный текст — скажем, с условиями этой самой скидки.

Для большинства информационных сообщений пары шрифтов вполне достаточно. Конечно, встречаются и исключения. Когда информации действительно много и она различается по значимости, может появиться потребность в 3–5 шрифтах. Скажем, в дизайне сайтов и приложений часто добавляют более двух шрифтов.

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

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

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

Как это делают

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

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

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

Источник

Дизайн для недизайнеров: 10 идеальных шрифтовых пар

В VistaCreate этот параметр настроить легко: Еще в оформительной типографике часто используются рукописные и акцидентные шрифты, но антиква, гротеск и брусковый шрифт самые распространенные. Шрифты рукописный Lemon Tuesday и акцидентный Ruslan Display

Принцип объединения №2. Контраст

Избегайте конфликта

10 шрифтовых сочетаний в дизайнах VistaCreate

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bd2dbf078e1194aa6ff06c3/» background=»red»/]

2. Oswald + Playfair Display

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bf7ec838caf671e1c9f2da7/» background=»red»/]

3. Cookie + Josefin Sans

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5a96bfa1f07aee6977cd50bf/» background=»red»/]

4. Montserrat + Playlist Script

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bc09ae978e1194aa64837af/» background=»red»/]

5. Arapey + Josefin Sans

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5aa69a03f07aee69774a652a/» background=»red»/]

6. Grand Hotel + Podkova

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b6c55011cc8aa54292895f7/» background=»red»/]

7. Abril Fatface + Raleway

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b891c9418654940f7ca946c/» background=»red»/]

8. Graduate + Montserrat

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b891a5c18654940f7beb452/» background=»red»/]

9. Abril Fatface + Raleway

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b6d9d2f1cc8aa54291cd948/» background=»red»/]

10. Bangers + Contrail One

Источник

Как использовать шрифтовые пары: простые советы для медиа

Краткий гид и советы от графического дизайнера Юрия Остроменцкого о том, зачем нужны шрифтовые пары и как правильно их применять

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

Специально для Setka Blog типограф Юрий Остроменцкий рассказал о том, зачем нужны шрифтовые пары, как их применять и почему можно обойтись без них или, наоборот, расширить наборный парк до десятков шрифтов.

Графический и шрифтовой дизайнер

Бывший арт-директор «Большого города», со-основатель студии CSTM Fonts и шрифтового магазина type.today

Зачем нужны шрифтовые пары

Шрифтовые пары нужны для того, чтобы разделять большое и маленькое, главное и второстепенное, литературное и фактологическое. Но я бы не сказал, что существует объективная необходимость строить типографику любого проекта именно на паре шрифтов. Можно обойтись одним шрифтом, а можно использовать десять. Мне не кажется, что организовывать типографику издания (не принципиально, цифрового или бумажного) нужно именно на паре шрифтов. Можно построить все на одном шрифте, можно на пяти, а можно менять весь парк шрифтов от номера к номеру.

Важно понимать, зачем нужен тот или другой шрифт, какую роль он играет. Чаще всего выбираются шрифт для крупных высказываний и шрифт для основного набора и дополнительной информации. Шрифт для крупного набора может быть более декоративным, более эмоциональным, более «громким». А от шрифта для основного текста требуются универсальность и хорошая читабельность. Но, если нужно, можно все перевернуть с ног на голову.

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

Конкретный шрифт и шрифтовую пару можно подобрать только в строго определенный проект с ясными задачами, идеологией, структурой и содержанием. А Graphik и Kazimir Text достаточно универсальны и отлично работают вместе.

Источник

Шрифтовые пары

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

Шрифтовые пары для сайта

Поехали! Во-первых, стоит сказать. Что сайт – это текст. Когда мы заходим на страницу, большая часть того содержимого, за которым мы приходим, это текст. И поэтому умение подбирать и использовать шрифты – это важнейший навык для дизайнера.

Что же происходит на странице (рис.1) с точки зрения шрифтовой пары? Когда мы заходим на сайт, мы видим огромное количество сочетаний текста. Мы видим заголовки, видим какой-то основной текст, видим какие-то подписи, рядом какие-то примечания. Мы видим дату, допустим, видим «сегодня» написано совершенно другим шрифтом. Вот этот шрифт тоже отличается от заголовочного, например, и вот от этого. И как это все правильно сочетать – вопрос.

Рис.1 Сочетание разных шрифтов на сайте

Если мы перейдем на сайт The New Yorker – здесь контраста гораздо больше (рис.2).

Рис.2 Сайт newyorker.com

Видим крупные заголовки, видим маленькие подписи, имя автора, написанное вообще жирным начертанием и очень черным. Видим основной текст, большую огромную красную строку и так далее. Здесь использован красный цвет (акциденция). Если мы перейдем в интерфейсы, то здесь контраст менее выражен (рис.3).

Рис.3 Интерфейс

Если на сайте New Yorker у нас был большой контраст, очень большая разница между размерами, между начертаниями, и шрифты разные, то в интерфейсах все гораздо, может быть, спокойней. Нам не всегда даже нужно вводить какой-то новый шрифт – иногда достаточно просто выделить заголовочек, и этого уже будет нам хватать. Либо выделить его жирным, либо вообще его сделать сереньким.

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

При подборе шрифтовой пары для сайта шрифт может выступать в роли такого самостоятельного изображения, самостоятельного плаката. Допустим, как здесь (рис.4). Тоже мы заметим, что есть разница в начертаниях – этот шрифт с засечками, этот шрифт без засечек; цвет и так далее.

Рис.4 Шрифт как самостоятельное изображение

Главное правило, как я уже сказал – это достаточный контраст. Не слишком большой, не слишком маленький – тот, который нам нужен здесь и сейчас.

И 4 инструмента для создания шрифтовой пары – так называемые 4 способа, 4 инструмента, которыми мы можем влиять на контраст (рис.5).

Рис.5 4 инструмента создания шрифтовой пары

Во-первых, это, разумеется, шрифт. Это Антиква и Гротеск, например. Потому что между ними максимальный контраст. Антиква – это шрифт с засечками, Гротеск – это шрифт без засечек.

Так же мы можем использовать начертания как в рамках одного шрифта, так в рамках и разных шрифтов. К примеру, это обычное начертание (Regular), жирное и Italic.

Также важно сказать про размер. Желательно, чтобы у вас разница между вашими строками, вашим шрифтом была больше, чем 1,6. 1,6 – это цифра из пропорции золотого сечения. Используйте ее как просто коэффициент. То есть, если у вас есть какой-то текст, и вы хотите сделать какой-то заголовок к нему – умножьте размер этого текста на 1,6 и у вас получится размер заголовка. Если его будет достаточно, может быть, еще раз придется увеличить.

Давайте посмотрим, как это выглядит на примерах (рис.6).

Рис.6 Пример сочетания Baskerville и Gill Sans

Устоявшиеся шрифтовые пары

Есть, в принципе, устоявшиеся пары, которые можно брать и использовать. Например, Baskerville и Gill Sans. Видим жирное начертание в заголовке, шрифт с засечками, текст написан шрифтом без засечек. Также достаточный контраст – мы видим разницу между этими двумя шрифтами.

Также Garamond и Verdana (рис.7).

Рис. 7 Пример сочетания Garamond и Verdana

При подборе шрифтовой пары можно воспользоваться такими устоявшимися парами, например, Garamond для заголовков, Verdana очень хороший шрифт для набора основного текста – его комфортно читать. В то же время Garamond – он достаточно выразителен для заголовков.

Proxima Nova и Palatino – тут наоборот, мы используем Proxima Nova заголовки – это шрифт без засечек (рис.8). И Palatino, может быть, можно использовать для каких-то книжных наборов, для наборов, возможно, статей. Palatino + Proxima Nova (рис.9).

Рис.8 Пример сочетания Proxima Nova и Palatino

Рис.9 Пример сочетания Palatino и Proxima Nova

Еще один пример – PT Sans и PT Serif. Это шрифты, которые находятся в составе одной гарнитуры, то есть, так называемые шрифты одной природы. То есть, Sans в заголовке, Serif в основном тексте (рис.10).

Рис.10 Пример сочетания PT Sans и PT Serif

В чем прелесть использования гарнитуры в составе шрифтовой пары? В том, что шрифты – они похожи по своей природе: их делал один автор, у них одна единая концепция. У них есть, разумеется, отличия в начертании – здесь есть засечки, здесь нет, но они очень гармонично друг с другом сочетаются.

Helvetica + Times (рис.11).

Рис.10 Пример сочетания Helvetica и Times

И не забываем про то, что у нас может быть как наш основной блок написан, допустим, здесь гельветикой полностью, заголовки гельветикой, текст гельветикой, но Times я вот здесь использую для какой-то подписи. Использую, во-первых, шрифт с засечками, во-вторых, он начертанием italic и в третьих он другого цвета – он красного цвета (рис.11).

Рис.11 Пример сочетания Times italic и Helvetica Neue

Шрифтовая пара для сайта: где подобрать?

И напоследок – где брать шрифты. Сделайте просто скриншот – посмотрите потом по ссылкам (рис.12):

Рис.12 Где брать шрифты

Главное правило здесь такое: до того, как вы начали дизайн, подберите шрифтовую пару. Это позволит вам не путаться в размерах в последующем, не думать каждый раз о том, какой шрифт здесь использовать, как здесь использовать. Лучше один раз это все определить (какой вы используете заголовок, подзаголовок, какие у них размеры) и дальше просто применять уже в своем макете.

Поэтому ставьте палец вверх, если вы нашли для себя что-то полезное в этом видео. И напишите в комментариях, какие шрифты вы предпочитаете использовать в своих работах. Я, например, в последнее время использую Proxima Nova – интересно узнать, какие у вас любимые шрифты.

На этом все. Если тема типографики и вообще веб дизайна вам интересна — то советую посмотреть мой бесплатный мастер-класс по профессии веб дизайнера.

Для отправки комментария вам необходимо авторизоваться.

Шрифтовые пары для сайта

Поехали! Во-первых, стоит сказать. Что сайт – это текст. Когда мы заходим на страницу, большая часть того содержимого, за которым мы приходим, это текст. И поэтому умение подбирать и использовать шрифты – это важнейший навык для дизайнера.

Что же происходит на странице (рис.1) с точки зрения шрифтовой пары? Когда мы заходим на сайт, мы видим огромное количество сочетаний текста. Мы видим заголовки, видим какой-то основной текст, видим какие-то подписи, рядом какие-то примечания. Мы видим дату, допустим, видим «сегодня» написано совершенно другим шрифтом. Вот этот шрифт тоже отличается от заголовочного, например, и вот от этого. И как это все правильно сочетать – вопрос.

Рис.1 Сочетание разных шрифтов на сайте

Если мы перейдем на сайт The New Yorker – здесь контраста гораздо больше (рис.2).

Рис.2 Сайт newyorker.com

Видим крупные заголовки, видим маленькие подписи, имя автора, написанное вообще жирным начертанием и очень черным. Видим основной текст, большую огромную красную строку и так далее. Здесь использован красный цвет (акциденция). Если мы перейдем в интерфейсы, то здесь контраст менее выражен (рис.3).

Рис.3 Интерфейс

Если на сайте New Yorker у нас был большой контраст, очень большая разница между размерами, между начертаниями, и шрифты разные, то в интерфейсах все гораздо, может быть, спокойней. Нам не всегда даже нужно вводить какой-то новый шрифт – иногда достаточно просто выделить заголовочек, и этого уже будет нам хватать. Либо выделить его жирным, либо вообще его сделать сереньким.

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

При подборе шрифтовой пары для сайта шрифт может выступать в роли такого самостоятельного изображения, самостоятельного плаката. Допустим, как здесь (рис.4). Тоже мы заметим, что есть разница в начертаниях – этот шрифт с засечками, этот шрифт без засечек; цвет и так далее.

Рис.4 Шрифт как самостоятельное изображение

Главное правило, как я уже сказал – это достаточный контраст. Не слишком большой, не слишком маленький – тот, который нам нужен здесь и сейчас.

И 4 инструмента для создания шрифтовой пары – так называемые 4 способа, 4 инструмента, которыми мы можем влиять на контраст (рис.5).

Рис.5 4 инструмента создания шрифтовой пары

Во-первых, это, разумеется, шрифт. Это Антиква и Гротеск, например. Потому что между ними максимальный контраст. Антиква – это шрифт с засечками, Гротеск – это шрифт без засечек.

Так же мы можем использовать начертания как в рамках одного шрифта, так в рамках и разных шрифтов. К примеру, это обычное начертание (Regular), жирное и Italic.

Также важно сказать про размер. Желательно, чтобы у вас разница между вашими строками, вашим шрифтом была больше, чем 1,6. 1,6 – это цифра из пропорции золотого сечения. Используйте ее как просто коэффициент. То есть, если у вас есть какой-то текст, и вы хотите сделать какой-то заголовок к нему – умножьте размер этого текста на 1,6 и у вас получится размер заголовка. Если его будет достаточно, может быть, еще раз придется увеличить.

Давайте посмотрим, как это выглядит на примерах (рис.6).

Рис.6 Пример сочетания Baskerville и Gill Sans

Устоявшиеся шрифтовые пары

Есть, в принципе, устоявшиеся пары, которые можно брать и использовать. Например, Baskerville и Gill Sans. Видим жирное начертание в заголовке, шрифт с засечками, текст написан шрифтом без засечек. Также достаточный контраст – мы видим разницу между этими двумя шрифтами.

Также Garamond и Verdana (рис.7).

Рис. 7 Пример сочетания Garamond и Verdana

При подборе шрифтовой пары можно воспользоваться такими устоявшимися парами, например, Garamond для заголовков, Verdana очень хороший шрифт для набора основного текста – его комфортно читать. В то же время Garamond – он достаточно выразителен для заголовков.

Proxima Nova и Palatino – тут наоборот, мы используем Proxima Nova заголовки – это шрифт без засечек (рис.8). И Palatino, может быть, можно использовать для каких-то книжных наборов, для наборов, возможно, статей. Palatino + Proxima Nova (рис.9).

Рис.8 Пример сочетания Proxima Nova и Palatino

Рис.9 Пример сочетания Palatino и Proxima Nova

Еще один пример – PT Sans и PT Serif. Это шрифты, которые находятся в составе одной гарнитуры, то есть, так называемые шрифты одной природы. То есть, Sans в заголовке, Serif в основном тексте (рис.10).

Рис.10 Пример сочетания PT Sans и PT Serif

В чем прелесть использования гарнитуры в составе шрифтовой пары? В том, что шрифты – они похожи по своей природе: их делал один автор, у них одна единая концепция. У них есть, разумеется, отличия в начертании – здесь есть засечки, здесь нет, но они очень гармонично друг с другом сочетаются.

Helvetica + Times (рис.11).

Рис.10 Пример сочетания Helvetica и Times

И не забываем про то, что у нас может быть как наш основной блок написан, допустим, здесь гельветикой полностью, заголовки гельветикой, текст гельветикой, но Times я вот здесь использую для какой-то подписи. Использую, во-первых, шрифт с засечками, во-вторых, он начертанием italic и в третьих он другого цвета – он красного цвета (рис.11).

Рис.11 Пример сочетания Times italic и Helvetica Neue

Шрифтовая пара для сайта: где подобрать?

И напоследок – где брать шрифты. Сделайте просто скриншот – посмотрите потом по ссылкам (рис.12):

Рис.12 Где брать шрифты

Главное правило здесь такое: до того, как вы начали дизайн, подберите шрифтовую пару. Это позволит вам не путаться в размерах в последующем, не думать каждый раз о том, какой шрифт здесь использовать, как здесь использовать. Лучше один раз это все определить (какой вы используете заголовок, подзаголовок, какие у них размеры) и дальше просто применять уже в своем макете.

Поэтому ставьте палец вверх, если вы нашли для себя что-то полезное в этом видео. И напишите в комментариях, какие шрифты вы предпочитаете использовать в своих работах. Я, например, в последнее время использую Proxima Nova – интересно узнать, какие у вас любимые шрифты.

На этом все. Если тема типографики и вообще веб дизайна вам интересна — то советую посмотреть мой бесплатный мастер-класс по профессии веб дизайнера.

Источник