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

Q: Кои знаци са включени?

Прегледът зарежда латинското подмножество английски, френски и повечето западноевропейски езици, с ударения, œ, « » и знака за евро и, когато шрифтът ги има и текстът ви ги изисква, подмножествата latin ext централноевропейски букви като č, ł, ő, ț , кирилица и гръцки. Шрифтовете без подмножество показват тези букви в резервния шрифт: Lato, Work Sans и Space Grotesk нямат кирилица, а гръцки имат само Inter, Roboto, Open Sans, Source Serif 4 и Fira Code. Нито един от 20 те шрифта няма арабски букви. На страници на полски, чешки, гръцки, български, украински и подобни полето за инсталиране изброява и редовете за импортиране на подмножеството, от което се нуждае вашият език. За български текст изберете шрифт с поддръжка на кирилица, например Inter, Roboto, Open Sans или Source Serif 4.

Прегледайте комбинации от шрифтове за заглавия и текст с 20 шрифта с отворен лиценз, настройте размера и междуредието и копирайте CSS стековете font-family.

Предложени двойки

Шрифт за заглавия Шрифт за текст

Размер на заглавието Размер на текста Междуредие Дебелина на заглавието Тъмен фон

Текст на заглавието Основен текст

Преглед

CSS код

Хостване при вас с Fontsource

Инсталирайте npm пакетите и импортирайте само дебелините, които използвате. Шрифтовете се сервират от вашия сайт, без CDN за шрифтове.

Как да използвате инструмента за комбиниране на шрифтове

Започнете с някоя от Предложени двойки (Редакционен, Модерен блог, Начална страница, Новини, Елегантен, Технологично списание, Книга, Класически, Документация, Закачлив). Всеки бутон показва шрифта за заглавия и шрифта за текст, които прилага.
Или изберете собствен Шрифт за заглавия и Шрифт за текст. Списъците са групирани на шрифтове без засечки, със засечки, заглавни, моноширинни и ръкописни. Размени шрифтовете разменя двата.
Настройте Размер на заглавието, Размер на текста и Междуредие и изберете Дебелина на заглавието (Получер (700) или Нормален (400)). Отметнете Тъмен фон, за да проверите двойката в тъмен режим.
Заменете Текст на заглавието и Основен текст със собствени думи: истинско заглавие и истински абзац ви казват много повече от панграма. Оставете празен ред между абзаците.
Копирайте CSS код, после следвайте Хостване при вас с Fontsource, за да добавите шрифтовете към проекта си.

Шрифтовете се зареждат при първия избор (около 12 до 50 KB за дебелина). Сервират се от този сайт, никога от CDN за шрифтове.

Какво прави една комбинация от шрифтове добра

Контраст, а не конфликт. Класическата рецепта е serif за едната роля и sans-serif за другата: Playfair Display над Lato или Montserrat над Merriweather. Два шрифта, които си приличат, но не са еднакви (например два геометрични шрифта без засечки), често изглеждат като грешка.
Спокоен шрифт за текст. В основния текст хората прекарват времето си. Изберете шрифт с отворени форми на буквите и щедра височина на малките букви (Inter, Lato, Open Sans, Source Serif 4, Merriweather) и запазете заглавните шрифтове като Playfair Display, DM Serif Display, Oswald или Caveat за кратки заглавия.
Съвпадащи пропорции. Шрифтове с близка височина на малките букви стоят добре заедно на един ред и в една колона.
Два шрифта са достатъчни. Създавайте йерархия с размер, дебелина и разстояния вместо с трети шрифт.

За четлив основен текст добра отправна точка е от 16 до 20 px с междуредие между 1,4 и 1,7, при около 60 до 75 знака на ред. Заглавията обикновено се нуждаят от по-тясно междуредие (от 1,1 до 1,3), което CSS кодът задава вместо вас.

CSS кодът

Кодът декларира две персонализирани свойства, --font-heading и --font-body, всяко с резервен стек: ако уеб шрифтът още не е зареден, браузърът показва подобен системен шрифт (Georgia за serif, системния шрифт на интерфейса за sans-serif). Размерите са записани в rem (16 px = 1rem), така че следват настройката за размер на шрифта в браузъра на читателя.

Хостване при вас и лицензи

И 20-те шрифта идват от Fontsource, който пакетира шрифтове с отворен код за npm. Полето за инсталиране дава командата npm install и редовете import за латинското подмножество и само дебелините, които използвате; после вашият пакетиращ инструмент копира woff2 файловете във вашата компилация. Сервирането на шрифтове от собствения ви домейн е по-бързо (без допълнителна връзка), работи офлайн и избягва изпращането на IP адресите на посетителите ви към външна услуга за шрифтове, известен проблем с GDPR в ЕС.

Всеки шрифт тук е под SIL Open Font License 1.1 според метаданните на пакета си: можете да го използвате в уебсайтове, приложения и печат, търговски или не, и да го вграждате. Не можете да продавате самите файлове на шрифта. Ако промените шрифт, той трябва да запази OFL и не бива да използва оригиналното запазено име. Лицензният файл е включен във всеки пакет.

Често задавани въпроси

Този инструмент използва ли Google Fonts?

Не. Много от тези семейства са налични и в Google Fonts, но тук файловете идват от npm пакетите на Fontsource и се сервират от този сайт. Никаква заявка не отива към Google или към друг CDN за шрифтове.

Защо някои заглавия не стават по-удебелени?

DM Serif Display съществува само в нормална дебелина. Тогава инструментът го показва в 400, казва го под контролите, а CSS кодът използва 400.

Мога ли да комбинирам два serif или два sans-serif шрифта?

Да, ако се различават ясно по роля и дебелина, например получер кондензиран шрифт за заглавия с лек, отворен шрифт за текст. Инструментът показва бележка, когато двата шрифта са в един стил, защото контраст между serif и sans-serif се постига по-лесно.

Кои знаци са включени?

Прегледът зарежда латинското подмножество (английски, френски и повечето западноевропейски езици, с ударения, œ, « » и знака за евро) и, когато шрифтът ги има и текстът ви ги изисква, подмножествата latin-ext (централноевропейски букви като č, ł, ő, ț), кирилица и гръцки. Шрифтовете без подмножество показват тези букви в резервния шрифт: Lato, Work Sans и Space Grotesk нямат кирилица, а гръцки имат само Inter, Roboto, Open Sans, Source Serif 4 и Fira Code. Нито един от 20-те шрифта няма арабски букви. На страници на полски, чешки, гръцки, български, украински (и подобни) полето за инсталиране изброява и редовете за импортиране на подмножеството, от което се нуждае вашият език. За български текст изберете шрифт с поддръжка на кирилица, например Inter, Roboto, Open Sans или Source Serif 4.

Мога ли да използвам тези шрифтове в търговски проект?

Да. SIL Open Font License позволява търговска употреба без плащане или посочване на автор във вашия дизайн. Забранена е само препродажбата на самите файлове на шрифта.