Ръководство за комбиниране на шрифтове

Комбинирането на шрифтове е една от най-трудните части на типографията. Ето ръководство, комбинирано с пример, който ще ви помогне да направите правилните комбинации от шрифтове.

Това ръководство се основава на глава 5 от книгата „По-добра уеб типография за по-добра мрежа“ от Матей Латин. Книгата се състои от 13 глави, през които читателят проектира и изгражда примерна уеб страница.

Това ръководство се предлага и на традиционен китайски.

Наистина ли имате нужда от повече от един шрифт?

Лошата типография в интернет през първите години на интернет често се обвиняваше в лошия набор от налични шрифтове. Но вече научихме, че типографията не се свежда само до избора на шрифтове. Една от неговите цели (вероятно основната) е представянето на информация по начин, който е четим и лесен за консумация. Преди да започнем да търсим шрифт, който да добавим към нашия дизайн и да го комбинираме с шрифта на тялото ни, трябва да се запитаме: наистина ли имаме нужда от повече от един шрифт? Не го добавяйте само заради него. В типографията няма правило, което да казва, че колкото повече шрифтове се използват по-добре (обратното вероятно е по-вярно). Няма гаранция, че добавянето на друг шрифт към уебсайта Ви ще подобри неговата типография. Обичам да поддържам типографията си проста и солидна. Като машина - колкото по-малко подвижни части, толкова по-малка е вероятността да се счупят.

Лошата типография в интернет през първите години на интернет често е обвинявана в лошия набор от налични шрифтове. Но вече научихме, че типографията не се свежда само до избора на шрифтове. Една от неговите цели (вероятно основната) е представянето на информация по начин, който е четим и лесен за консумация. Преди да започнем да търсим шрифт, който да добавим към нашия дизайн и да го комбинираме с шрифта на тялото ни, трябва да се запитаме: наистина ли ни трябват повече от един шрифт? Не го добавяйте само заради него. В типографията няма правило, което да казва, че колкото повече шрифтове се използват по-добре (обратното вероятно е по-вярно). Няма гаранция, че добавянето на друг шрифт към уебсайта Ви ще подобри неговата типография. Обичам да поддържам типографията си проста и солидна. Като машина - колкото по-малко подвижни части, толкова по-малка е вероятността да се счупят.

Типографска работа от 18 век с един шрифт - Baskerville - от самия Джон Baskerville.
Безопасно правило е да не се смесват различни стилове на букви на една и съща страница или различни видове лица в една и съща книга.
- Ерик Гил

Ерик Гил, доста противоречив човек, но страхотен типограф (освен много други неща), имаше подобно мнение. Не можете да направите по-добре с повече шрифтове, отколкото с един. Опитайте се да предизвикате себе си и да създадете уебсайт само с един шрифт. Ако само за експеримент и забавление, мисля, че всеки трябва да опита това, тъй като има много неща за научаване от него.

Наскоро преработен matejlatin.co.uk. Типография, фокусирана, но само с един шрифт.

Наскоро преработих личния си уебсайт. Едно от нещата, които исках да изтъкна, беше минимализмът, който е толкова голяма част от живота ми. За да направя това най-добре, реших да използвам един шрифт. Освен това исках уебсайтът да е фокусиран върху типографията (буквално 95% от тях е типография) на всичко отгоре, което направи предизвикателството още по-трудно. Търсех чист, свеж и прост шрифт sans-serif, който би подчертал това още повече. В крайна сметка избрах Gibson от Canada Type. Има модерно, но леко приятелско чувство към него. И работи чудесно, когато е настроен на огромни размери. Беше малко предизвикателство да оправя типографията точно за този уебсайт, но успях да го направя само с различни размери, тегло и само два цвята - тъмно и средно сиво.

Включих този пример в книгата, защото е чудесно да се покаже колко може да се направи с един шрифт. Не само от майстори по типография като Джон Баскервил, но и от самоуки дизайнери като мен. Мислите ли, че все още се нуждаете от друг шрифт за вашия проект? Без притеснения, четете нататък.

Процес в четири стъпки за комбиниране на шрифтове

Ако все още смятате, че се нуждаете от повече от един шрифт за вашия уебсайт, ще ви е необходим систематичен процес, който да ви ръководи. Тази, която описвам тук, е адаптирана версия на тази, описана в книгата на Тим Браун Combining Typefaces. Ето четирите стъпки:

  1. Намерете шрифт за котва за основния си текст
  2. Намерете няколко вторични шрифта за възможни комбинации
  3. Оценете комбинацията
  4. Елиминирайте / изберете комбинацията от шрифтове.
Процесът по-горе предполага, че започвате с вече избрания шрифт за текста на тялото. Процесът може лесно да се обърне, ако искате първо да започнете с шрифт на заглавието.

Има два подхода за комбиниране на шрифтове и пет насоки, които могат да ви помогнат в стъпка 3 от горната диаграма. Нека да разгледаме

Два подхода за оценка на комбинации от шрифтове

Контрастът и хармонията са двата най-основни принципа, когато става въпрос за дизайн, архитектура и изкуство. И двете са от решаващо значение, когато става дума и за типография. Някои оценки, описани в този процес, ще работят само като контрастираща комбинация, някои само като хармонична, а други като и двете. Нека да разгледаме пример от реалния живот.

Контрастни комбинации

Разгледайте снимката на офиса по-горе. Как бихте го описали? Чувства се модерно, нали? Но има нещо друго. Усеща се и топло. Необичайно за офиси с модерни, почти футуристични мебели. И все пак, този го прави. Тухлената стена носи това усещане за топлина и уют в стая, която би изглеждала студена без нея. Същото може да се приложи и за комбиниране на шрифтове.

Как можем да приложим това за типография? Нека вземем шрифта Baskerville за основния ни текст. Baskerville е проектиран от Джон Baskerville през 1754 г. По онова време той е бил модерен шрифт, тъй като натискаше границите на възможното в типографията. И днес се възприема като класика. Тя предизвиква чувство на доверие и топлина. Въз основа на експеримент, проведен от Ерол Морис, това е най-довереният шрифт наоколо. Сега нека го допълним с Futura само за главни букви за заглавия. Futura е създаден от Пол Ренър през 1927 г. Това е геометричен шрифт sans-serif. Това беше модерен геометричен шрифт sans-serif, когато беше създаден за първи път и все още се чувства модерно и до днес.

Дизайнът ни изглежда богат. Луксозна. Има история за разказване. Но най-важното - работи. Той използва две класики на шрифта от различни времеви периоди. Всяка идва от противоположната на скалата между модерно / студено и класическо / топло. Заедно те са като огън и лед, които се превръщат в течаща вода.

Хармонични комбинации

Хармонията е точно обратната на контраста. Така че, ако погледнете снимката на офиса по-горе, ще забележите колко модерно изглежда в целия. Минималистично пространство без декорации, съчетано с модерно изглеждащи мебели. Как бихме могли да повторим нещо подобно в типографията?

Използвахме Din Alternate за заглавието и Helvetica за шрифт на тялото в комбинацията по-горе. И двете имат леко индустриално и модерно усещане към тях. Има много функции, които правят двата шрифта подобни, но въпреки това те са достатъчно различни, за да работят добре като комбинация.

Пет насоки за комбиниране на шрифтове

Комбиниране на шрифтове с подобна x-височина

Спомняте ли си, когато ви казах да помните x-height в главата за анатомията на шрифтовете? Това е мястото, където е полезно. Друг начин за оценка на комбинацията от шрифтове е да разгледате внимателно техните х-височини, за да видите дали съвпадат. В най-лошия случай те трябва да са много близки. Шрифтовете с подобна x-височина работят по-добре заедно, тъй като имат подобно визуално тегло. Особено когато става въпрос за вертикален ритъм (нещо, което ще разгледаме в следващата глава).

По-горе: Futura и Baskerville имат подобна x-височина, което ги подсилва като добра комбинация от шрифтове.

Тази комбинация работи или с контраст, или с хармония. Или изберете шрифтове, които имат съвпадаща x-височина, или шрифтове с много различни x-височини. Не вървете с нещо между тях

Комбиниране на шрифтове от една и съща леярна

Забелязах нещо през цялата работа по типография, която правех досега. Избирайки шрифтове, аз съм склонна да се връщам към някои няколко леярски типа, които са ги произвели. Базираният в Германия FontFont е един от тях - почитател съм на работата на Ерик Шпикерман. Друг е базираният в Лондон Далтън Мейг. Имаше случаи, когато отделих време просто да проуча всички шрифтове, идващи от тези две леярни и почти нямаше такива, които не ми харесаха. Изглежда стиловете им съвпадат с това, което най-често търся. И това не е съвпадение

Виждате ли, когато дизайнер на тип започне да работи върху нов шрифт, те рядко започват от нулата. По-често е те да започнат да проектират нов шрифт върху съществуващ. Те използват същата структура, но все пак измислят оригинален дизайн. Но поради тази споделена основна структура, шрифтовете обикновено могат да работят добре заедно. Следователно комбинирането на шрифтове, получени от една и съща леярна, е добър залог.

Комбиниране на шрифтове от същия автор

Подобно на комбинирането на шрифтове въз основа на леярна, която ги е проектирала, е комбинирането им въз основа на техния автор. Както споменахме, леярските типове обикновено използват базисна структура, за да произвеждат различни шрифтове. Може би дори по-често авторите на шрифтове правят това. Комбинирането например на шрифтове, които Adrian Frutiger е проектирал, е почти сигурен залог.

Горе: Университет на заден план и Аполон, очертан на преден план (И двата са проектирани от Адриан Фрутигер). Забележете колко са различни по стил, но много ключови точки се пресичат почти перфектно.

Все още препоръчвам да поставите двата шрифта един до друг и да ги сравните, точно както направихме с Аполон и Университет по-горе. Опитайте се да установите дали дадена комбинация работи или не, по подобен начин на това как сравнихме шрифтове въз основа на x-височина, но се съсредоточете повече върху общите пропорции. На този етап трябва наистина да изучите двата шрифта. Казах ти, че това отнема време, помниш ли? Тази комбинация трябва да се използва като хармонична, а не контрастираща.

Комбиниране на шрифтове въз основа на историческа епоха

Оценяването на шрифтове въз основа на времевия период работи добре с контраст или хармония. Можете да изберете два шрифта, които са много отдалечени или от един и същ период. И двете трябва да работят.

Има почти 200 години, които разделят създаването на Баскервил и Футура.

Намирам, че този подход работи най-добре с шрифтове, които са проектирани преди дигиталната революция. В момента има твърде много шрифтове, които се проектират. Сдвояването им единствено на факта, че са от един и същи период, може да не е достатъчно.

Използване на супер шрифтове

Има така наречените супер шрифтове. Шрифтове, които се предлагат в стилове sans-serif и serif. Merriweather и Merriweather Sans са чудесни примери. Така са и Roboto и Roboto Slab. Просто не можете да сбъркате, като използвате стиловете на едно супер семейство. Това може да бъде чудесен начин да започнете да развивате уменията си за комбиниране на шрифтове.

Някои шрифтове се предлагат както в сериф, така и в серифи (или дори в повече стилове). Не можете да сбъркате, ако ги комбинирате.

Пример за комбиниране на шрифтове

Това ръководство представлява адаптация на глава 5 от „По-добра уеб типография за по-добра уеб книга“, така че на този етап читателите са 4 глави и вече са преминали през процеса на избор на основния (котва) шрифт.

Шрифт на котва

Добре, научихме много в последната глава. Нека да използваме новопридобитите знания. Следвайки описания по-горе процес, трябва да започнем с шрифта на котва. Имаме това, тъй като вече решихме какво искаме да използваме в глава 3, когато избрахме FF Meta. Нека преминем направо към стъпка 2.

Примерът на съдържание за уебсайта, зададен във FF Meta - шрифта, който избрахме по-рано в книгата.

Намиране на кандидати за възможни комбинации

Търсим шрифт, който можем да използваме за заглавия. Нека разгледаме основните точки, които записахме от кратката информация, когато търсехме шрифта на основния текст:

  • уебсайтът трябва да се чувства модерен и актуален; съдържанието му трябва да бъде лесно за четене, за да се погрижи за заетия, но любопитен ентусиаст на технологиите
  • уебсайтът трябва да е съсредоточен върху съдържанието, с много малко, но висококачествени и добре насочени реклами
  • като всеки уебсайт с такъв тип трафик и аудитория, той трябва да работи на различни устройства.

Нека запишем няколко основни точки, които ще ни помогнат да намерим шрифта на заглавието, точно както направихме за текста на тялото:

  • определено sans-serif (имаме нужда от нещо, което ще бъде с висок контраст в сравнение с шрифта на тялото ни)
  • трябва да се чувства модерно, което се превежда на по-голяма x-височина
  • трябва да работи добре с по-големи размери на шрифта
  • колкото повече тежести и стилове, толкова по-добре
  • Функциите на OpenType не се изискват (освен лигатури, рядко използвам други функции на OpenType с заглавия)
  • се нуждае само от подмножеството на английски език
  • трябва да се представи добре на общите екрани (както мобилни, така и на работния плот).

С написаното, ние сме готови да започнем да търсим. Да запалим TypeKit и да намерим няколко кандидати. Да настроим филтрите, така че да виждаме само sans-serif, препоръчително за заглавия, голямо тегло и голяма x-височина. Голямата x-височина ще съответства на това, което търсим, но и на x-височината на FF Meta, която избрахме за текста на тялото.

Преминавам през 40-те резултата, които попаднаха в списъка със следните списъци: Королев, ФФ Енцо, Куатро, Камингодос и JAF Facit. Само пет; Предполагам, че имам добра представа за това, което търся.

Оценка на комбинации от шрифтове

Тъй като има само пет, можем да се гмурнем направо и да започнем да експериментираме с тях. Нека ги добавим към нашия проект в TypeKit и да ги заредим в нашия примерен уебсайт. След това копираме някои от заглавията от нашата примерна статия за съдържанието и ги добавяме.

Примерът с код от тази глава може да бъде разгледан в CodePen.

В началото нека да оценим кандидатите по техния размер и цвят по подразбиране. Може би можем да премахнем някои от тях, без да копаем твърде дълбоко. Всъщност има нещо, което не се чувства добре в JAF Facit, за да можем да го премахнем. Някои символи, като „w“ и „y“, в Quatro са доста уникално проектирани и те се открояват. По лош начин. Нека го зачеркнем от списъка. Понякога наистина е толкова просто. Ако разгледаме по-отблизо FF Enzo разкрива, че той е ясно хуманистичен стил (забележим контраст и леко наклонен), което не е нещо, което търсим. Това е третият от нашия списък.

Елиминиране на комбинациите от шрифтове

Успяхме да премахнем три комбинации в етапа на оценяване, така че да ни оставим два възможни кандидата: Королев и Камингодос. Нека разгледаме по-подробно тези две и да експериментираме по-нататък.

Camingodos също има леко хуманистично усещане към него, но не е толкова ясно, както беше с FF Enzo. Героите са малко по-тесни и х-височината е голяма. Има определено квадратно усещане към него, в което не съм сигурен. Усеща се, че се опитва да бъде технологичен, но да не върви докрай (заради тази хуманистична страна). Нека разгледаме по-отблизо Королев.

Королев се чувства уникално. Много тесни знаци, голяма х-височина и изглежда, че е леко сгъстена. Той също има квадратно усещане, но не толкова очевидно като Camingodos. Нека опитаме двете в цвета, който най-вероятно ще бъдат използвани - червен.

Нека опитаме и малко по-леко тегло - средно, вместо смело.

Това е интересно. Королев буквално оживява, когато е леко по-лек. Сега той е в пълен контраст с шрифта на основния текст. Camingodos, от друга страна, изглежда странно. Липсва идентичност и с това не се изправя добре срещу шрифта на основния текст. Основният проблем при него е, че е на оградата - той е твърде подобен на шрифта на основния текст, за да бъде наистина контрастен и в известна степен контрастен. Нещото с контраста в типографията е, че тя трябва да бъде или ясна, или несъществуваща. Това прави Королев ясен победител. Нашият краен резултат изглежда така:

Вижте примера на живо на bestwebtype.com/book/c5.

Повече за по-добрата типография в мрежата в книгата

От тук нататък книгата изследва ритъма в уеб типографията, модулните скали и какво означава „смислена типография“, съставяне на страници, отзивчива типография в мрежата и също така се потапя в 4 допълнителни глави за микро типографията. Това е уебсайтът на живо на пример, който се изгражда с напредъка ви през главите.

Комбиниране на шрифтове мамят лист

Създадох 2-страничен мамян лист за печат за комбиниране на шрифтове въз основа на това ръководство. Вземете го, отпечатайте го и започнете да създавате страхотни комбинации от шрифтове.

Вземете своя мамят лист за комбиниране на шрифтове →

Други готини неща от Better Web Type

На уеб сайта Better Web Type има по-готини неща: безплатен курс за уеб типография, игра с памет на шрифтове, игра за учене за оформяне на перфектни абзаци, тест и т.н.

Посетете betterwebtype.com →