Комбинации на фонтови

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

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

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

Предложени парови

Фонт за наслов Фонт за текст

Големина на наслов Големина на текст Висина на редот Дебелина на наслов Темна позадина

Текст на насловот Основен текст

Преглед

CSS код

Самостојно хостирање со Fontsource

Инсталирајте ги npm пакетите и увезете само дебелините што ги користите. Фонтовите потоа се служат од вашата страница, без CDN за фонтови.

Како да ги користите комбинациите на фонтови

Почнете од еден од Предложени парови (Уредничка, Модерен блог, Почетна страница, Вести, Елегантна, Технолошко списание, Книга, Класична, Документација, Разиграна). Секое копче го прикажува фонтот за наслов и фонтот за текст што ги применува.
Или изберете свој Фонт за наслов и Фонт за текст. Листите се групирани во sans-serif, serif, display, monospace и фонтови со ракопис. Замени фонтови ги разменува двата.
Прилагодете Големина на наслов, Големина на текст и Висина на редот и изберете Дебелина на наслов (Задебелен (700) или Обичен (400)). Штиклирајте Темна позадина за да го проверите паровите во темен режим.
Заменете ги Текст на насловот и Основен текст со ваши зборови: вистински наслов и вистински параграф ви кажуваат многу повеќе од примерна реченица. Оставете празен ред меѓу параграфите.
Копирајте го CSS код, па следете го Самостојно хостирање со Fontsource за да ги додадете фонтовите во вашиот проект.

Фонтовите се вчитуваат првиот пат кога ќе ги изберете (околу 12 до 50 KB по дебелина). Се служат од оваа страница, никогаш од CDN за фонтови.

Што прави добра комбинација на фонтови

Контраст, не судир. Класичниот рецепт е serif за една улога и sans-serif за другата: Playfair Display врз Lato или Montserrat врз Merriweather. Два фонта што се слични, но не идентични (на пример два геометриски sans-serif), често изгледаат како грешка.
Мирен фонт за текст. Во основниот текст луѓето поминуваат најмногу време. Изберете фонт со отворени форми на буквите и великодушна x-висина (Inter, Lato, Open Sans, Source Serif 4, Merriweather), а display фонтовите како Playfair Display, DM Serif Display, Oswald или Caveat чувајте ги за кратки наслови.
Усогласени пропорции. Фонтови со слична x-висина добро стојат заедно во ист ред и иста колона.
Два фонта се доволни. Создајте хиерархија со големина, дебелина и растојание, а не со трет фонт.

За читлив основен текст, 16 до 20 px со висина на ред меѓу 1,4 и 1,7 е добар почетен опсег, со околу 60 до 75 знаци по ред. Насловите обично бараат потесна висина на ред (1,1 до 1,3), што CSS кодот ја поставува за вас.

CSS кодот

Кодот декларира две прилагодени својства, --font-heading и --font-body, секое со резервен список: ако веб-фонтот сè уште не е вчитан, прелистувачот прикажува сличен системски фонт (Georgia за serif, системскиот UI фонт за sans-serif). Големините се запишани во rem (16 px = 1rem), па ја следат поставката за големина на фонт во прелистувачот на читателот.

Самостојно хостирање и лиценци

Сите 20 фонтови доаѓаат од Fontsource, што пакува фонтови со отворен код за npm. Полето за инсталација ја дава командата npm install и редовите import за латинското подмножество и само дебелините што ги користите; вашиот bundler потоа ги копира 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-те фонта нема арапски букви. На страници на полски, чешки, грчки, бугарски, украински (и слични) јазици, полето за инсталација ги наведува и редовите за увоз на подмножеството што го бара вашиот јазик.

Можам ли да ги користам овие фонтови во комерцијален проект?

Да. SIL Open Font License дозволува комерцијална употреба без плаќање или наведување на автор во вашиот дизајн. Не е дозволена само препродажбата на самите датотеки на фонтот.