CodeKitHubКакво представлява този инструмент?
Съчетаване на шрифтове означава избор на два (понякога три) шрифта, които се използват заедно на дадена страница — обикновено един за заглавия и един за основен текст — така че страницата да има визуална йерархия, без да изглежда несъвместима или монотонна.
Всяко съчетание по-долу показва пример, изобразен на живо: шрифтът за заглавия отгоре, шрифтът за текст отдолу, като се използват реалните файлове от Google Fonts, така че видяното е точно това, което ще получите на сайта си.
Всяко съчетание идва с готов за употреба `<link>` таг за вграждане от Google Fonts и съответстващ CSS фрагмент с декларации на `font-family` за заглавия и основен текст — копирайте и двете и сте готови.
Защо да го използвате?
- 28 внимателно подбрани съчетания, а не автоматично генериран списък — всяко от тях е избрано, защото двата шрифта наистина се допълват.
- Преглед на живо: всяко съчетание се изобразява с реалните шрифтове, заредени от Google Fonts, а не със статично изображение или предполагаемо име на шрифт.
- Филтрирайте по настроение — Модерно, Елегантно, Смело, Минималистично, Класическо — за да стесните избора до усещането, което е нужно на проекта ви.
- Копиране с едно кликване както на `<link>` тага за вграждане, така и на CSS правилата за `font-family`.
- Безплатно, работи във вашия браузър, не изисква акаунт или вход.
Как да го използвате
- По желание кликнете филтър по настроение (Модерно, Елегантно, Смело, Минималистично, Класическо), за да стесните списъка, или оставете избрано „Всички“, за да разгледате всичко.
- Прегледайте картите с преглед на живо — горният ред показва шрифта за заглавия, редът под него показва шрифта за основен текст.
- Отворете съчетание, което ви харесва, и кликнете, за да разгънете секцията с код за вграждане.
- Копирайте `<link>` тага в `<head>` на вашия HTML, а CSS фрагмента — в стиловия ви лист, за да приложите шрифтовете към заглавията и основния текст.
Пример
Вход
Елегантен блогРезултат
Playfair Display (заглавия) + Source Sans Pro (текст)Филтрирането по „Елегантно“ извежда заглавия с контрастен serif шрифт, съчетани с чист и лесен за четене sans-serif текст — често срещана комбинация за редакционни и блог оформления.
Принципи на доброто съчетаване на шрифтове
- Контраст пред сходство: два шрифта, които изглеждат почти еднакви (например два сходни геометрични sans-serif шрифта), обикновено изглеждат по-скоро като грешка, отколкото като съзнателен избор. Съчетайте serif с sans-serif или удебелен дисплеен шрифт с по-лек текстов шрифт, така че разликата да се възприема като преднамерена.
- Съгласувайте височината на x и пропорциите: шрифтове, чиито малки букви имат сходна визуална височина, обикновено изглеждат сякаш принадлежат на една и съща страница, дори когато стиловете им се различават — несъответстващата височина на x е една от най-честите причини едно съчетание да изглежда „неправилно“.
- Ограничете се до две семейства (понякога три): едно за заглавия, едно за основен текст и максимум трето за акценти като бутони или етикети. Повече от това и страницата започва да изглежда непремислена.
- Мислете за настроението, не само за формата: закръглен, приятелски sans шрифт, съчетан с официален serif, изпраща противоречиви сигнали, дори ако формите на буквите технически работят заедно — избирайте шрифтове, които съвпадат по тон, колкото и по структура.
- Тествайте при реални размери: съчетание, което изглежда чудесно в голям преглед, може да загуби контраст при размера на основния текст, а дисплеен шрифт може да стане нечетлив при малки размери — винаги проверявайте и двете крайности.
Избор на съчетание според конкретния случай на употреба
Лендинг страниците и маркетинговите сайтове обикновено се възползват от филтрите „Смело“ или „Модерно“ — силен, контрастен шрифт за заглавие привлича вниманието над свивката на страницата, съчетан с чист, неутрален шрифт за текст, който поддържа дългия текст лесен за преглед.
Блоговете и редакционното съдържание често се четат най-добре с „Елегантни“ или „Класически“ съчетания — изтънчено serif заглавие подсказва обмислен, редактиран стил, докато удобен serif или sans-serif текст поддържа дългите статии четими за по-дълги периоди на четене.
Сайтовете за електронна търговия и продукти обикновено предпочитат „Минималистични“ съчетания — сдържани, неутрални шрифтове поддържат фокуса върху продуктовите снимки и цените, а не върху самата типография, което е важно, когато на една страница се показват десетки продуктови карти.
Портфолио и творчески сайтове имат най-голямо пространство за експерименти — „Смели“ или „Елегантни“ съчетания с повече характер могат да работят добре, тъй като аудиторията отчасти е там, за да оцени визуалния вкус.
Бележки относно производителността и лицензирането
Тагът за вграждане `<link>` зарежда шрифтове от CDN мрежата на Google, която е бърза и кеширана на множество сайтове, които посетителите ви вероятно вече са посещавали — но добавя външна заявка. За сайтове, при които всяка милисекунда има значение, изтеглянето на файловете с шрифтове и самостоятелното им хостване (с ръчно зададено `font-display: swap`) премахва тази външна зависимост за сметка на известни усилия по настройката.
Всички шрифтове в Google Fonts са с отворен код и безплатни за търговска употреба, без да се изисква посочване на авторството, макар че отбелязването на дизайнера на шрифта е приятен жест, когато е лесно осъществимо.
Често задавани въпроси
Какво прави два шрифта „добре съчетани“?
Добрите съчетания балансират контраст и хармония. Контрастът — например serif с sans-serif, или удебелен дисплеен шрифт с обикновен шрифт за текст — създава визуална йерархия, при която заглавията и текстът се усещат различни. Хармонията — сходна височина на x, сравнима дебелина на щрихите и общо усещане за формалност или игривост — не позволява на двата шрифта да си противоречат. Съчетанията тук са подбрани, като са взети предвид и двете.
Трябва ли заглавията и текстът винаги да са с различни шрифтове?
Не, използването на едно семейство шрифтове и за двете (както при съчетанието „Rubik + Rubik“ в този инструмент) също работи добре, стига шрифтът да има достатъчно вариации в дебелината, за да отличава заглавията от основния текст. Това е валиден, минималистичен избор — не грешка.
Как всъщност прилагам съчетание към сайта си?
Копирайте `<link>` тага за вграждане в `<head>` на страницата си, за да заредите шрифтовете от CDN мрежата на Google, след което копирайте CSS фрагмента в стиловия си лист — той задава `font-family` за заглавия (h1, h2, h3) и за основен текст (body, p). Коригирайте CSS селекторите, ако маркирането ви е различно.
Ще забави ли зареждането на Google Fonts моя сайт?
Всеки допълнителен файл с шрифт добавя мрежова заявка и известен риск от блокиране на изобразяването. Ограничете се до едно тегло за заглавия и едно или две за текст, използвайте `display=swap` (вече включен в кода за вграждане), за да се показва текстът с резервен шрифт, докато уеб шрифтът се зарежда, и обмислете самостоятелно хостване на файловете с шрифтове за продукционни сайтове, на които е нужно възможно най-бързо зареждане.
Тези шрифтове безплатни ли са за търговска употреба?
Да. Всеки шрифт в Google Fonts, включително всички съчетания, показани тук, е лицензиран по SIL Open Font License или Apache License — и двата разрешават безплатна търговска употреба, промяна и разпространение без авторски възнаграждения.