Betűtípus-párosító

Q: Mely karakterek szerepelnek benne?

Az előnézet a latin részhalmazt tölti be angol, francia és a legtöbb nyugat európai nyelv ékezetekkel, œ, « » és az euró jellel , és ha a betűtípus rendelkezik velük, a szövegednek pedig szüksége van rájuk, a latin ext közép európai betűk, például č, ł, ő, ț , a cirill és a görög részhalmazt is. A részhalmaz nélküli betűtípusok ezeket a betűket a tartalék betűtípussal jelenítik meg: a Lato, a Work Sans és a Space Grotesk nem tartalmaz cirill betűket, és csak az Inter, a Roboto, az Open Sans, a Source Serif 4 és a Fira Code tartalmaz görögöt. A 20 betűtípus egyike sem tartalmaz arab betűket. A magyar ő és ű betűket a latin ext részhalmaz adja, a magyar oldalakon a telepítési doboz felsorolja a nyelvedhez szükséges részhalmaz import sorait is.

Betűtípus-párosító

Próbáld ki a címsor és a törzsszöveg betűtípus-párosítását 20 nyílt licencű betűtípussal, állítsd a méretet és a sormagasságot, és másold a CSS-kódot.

Javasolt párok

Címsor betűtípusa Törzsszöveg betűtípusa

Címsor mérete Törzsszöveg mérete Sormagasság Címsor vastagsága Sötét háttér

Címsor szövege Törzsszöveg szövege

Előnézet

CSS-kód

Saját szerveren tárolás a Fontsource-szal

Telepítsd az npm-csomagokat, és csak a használt vastagságokat importáld. A betűtípusokat így a saját webhelyed szolgálja ki, betűtípus-CDN nélkül.

A betűtípus-párosító használata

Indulj a Javasolt párok egyikéből (Szerkesztőségi, Modern blog, Nyitóoldal, Hírek, Elegáns, Techmagazin, Könyv, Klasszikus, Dokumentáció, Játékos). Minden gomb megmutatja, melyik címsor- és törzsszöveg-betűtípust alkalmazza.
Vagy válaszd ki a saját Címsor betűtípusa és Törzsszöveg betűtípusa értékét. A listák talp nélküli, talpas, díszbetűs, fix szélességű és kézírásos betűtípusok szerint vannak csoportosítva. A Betűtípusok felcserélése a kettőt felcseréli.
Állítsd be a Címsor mérete, a Törzsszöveg mérete és a Sormagasság értékét, és válaszd ki a Címsor vastagsága értékét (Félkövér (700) vagy Normál (400)). Jelöld be a Sötét háttér opciót, hogy sötét módban is megnézd a párost.
Cseréld le a Címsor szövege és a Törzsszöveg szövege mezőt a saját szavaidra: egy valódi cím és egy valódi bekezdés sokkal többet elárul, mint egy pangramma. A bekezdések között hagyj egy üres sort.
Másold ki a CSS-kódot, majd kövesd a Saját szerveren tárolás a Fontsource-szal részt, hogy hozzáadd a betűtípusokat a projektedhez.

A betűtípusok az első kiválasztáskor töltődnek be (vastagságonként körülbelül 12–50 KB). Erről az oldalról szolgáljuk ki őket, soha nem betűtípus-CDN-ről.

Mitől jó egy betűtípus-párosítás?

Kontraszt, nem ütközés. A klasszikus recept: az egyik szerepre talpas, a másikra talp nélküli betűtípus, például Playfair Display a Lato fölött, vagy Montserrat a Merriweather fölött. Két hasonló, de nem azonos betűtípus (mondjuk két geometrikus talp nélküli) gyakran hibának tűnik.
Nyugodt törzsszöveg-betűtípus. A törzsszöveggel töltik az emberek az idejüket. Válassz nyitott betűformájú, bőséges x-magasságú betűtípust (Inter, Lato, Open Sans, Source Serif 4, Merriweather), a díszbetűket, mint a Playfair Display, a DM Serif Display, az Oswald vagy a Caveat, pedig tartogasd rövid címsorokhoz.
Összhangban lévő arányok. A hasonló x-magasságú betűtípusok jól mutatnak egy sorban és egy oszlopban.
Két betűtípus elég. A hierarchiát mérettel, vastagsággal és térközzel hozd létre, ne harmadik betűtípussal.

Olvasható törzsszöveghez a 16–20 px és az 1,4–1,7 közötti sormagasság jó kiindulási tartomány, soronként körülbelül 60–75 karakterrel. A címsoroknak általában szorosabb sormagasság kell (1,1–1,3), amit a CSS-kód beállít neked.

A CSS-kód

A kód két egyéni tulajdonságot deklarál, a --font-heading és a --font-body változót, mindegyiket tartalék betűtípus-listával: ha a webes betűtípus még nem töltődött be, a böngésző hasonló rendszerbetűtípust mutat (Georgia a talpasokhoz, a rendszer felületi betűtípusa a talp nélküliekhez). A méretek rem-ben vannak megadva (16 px = 1 rem), így követik az olvasó böngészőjének betűméret-beállítását.

Saját szerveren tárolás és licencek

Mind a 20 betűtípus a Fontsource-ból származik, amely a nyílt forráskódú betűtípusokat csomagolja npm-hez. A telepítési doboz megadja az npm install parancsot és az import sorokat a latin részhalmazhoz és csak a használt vastagságokhoz; a csomagolóeszközöd ezután átmásolja a woff2 fájlokat a buildedbe. A betűtípusok saját domainről való kiszolgálása gyorsabb (nincs extra kapcsolat), offline is működik, és elkerüli, hogy a látogatóid IP-címe egy harmadik fél betűtípus-szolgáltatásához kerüljön, ami ismert GDPR-probléma az EU-ban.

Itt minden betűtípus a SIL Open Font License 1.1 alatt áll a csomag metaadatai szerint: használhatod weboldalakon, alkalmazásokban és nyomtatásban, kereskedelmi célra is, és beágyazhatod. A betűtípusfájlokat önmagukban nem adhatod el. Ha módosítasz egy betűtípust, meg kell tartania az OFL-t, és nem használhatja az eredeti fenntartott nevet. A licencfájl minden csomagban benne van.

Gyakori kérdések

Használ ez az eszköz Google Fontsot?

Nem. E családok közül sok a Google Fontsban is elérhető, de itt a fájlok a Fontsource npm-csomagokból származnak, és ez az oldal szolgálja ki őket. Sem a Google, sem más betűtípus-CDN felé nem megy kérés.

Miért nem lesz vastagabb néhány címsor?

A DM Serif Display csak normál vastagságban létezik. Az eszköz ilyenkor 400-ban mutatja, ezt jelzi a vezérlők alatt, és a CSS-kód is 400-at használ.

Párosíthatok két talpas vagy két talp nélküli betűtípust?

Igen, ha szerepben és vastagságban egyértelműen különböznek, például egy félkövér, keskeny címsor egy vékony, nyitott törzsszöveg-betűtípussal. Az eszköz megjegyzést jelenít meg, ha mindkét betűtípus azonos stílusú, mert a talpas és talp nélküli kontraszt könnyebben eltalálható.

Mely karakterek szerepelnek benne?

Az előnézet a latin részhalmazt tölti be (angol, francia és a legtöbb nyugat-európai nyelv ékezetekkel, œ, « » és az euró jellel), és ha a betűtípus rendelkezik velük, a szövegednek pedig szüksége van rájuk, a latin-ext (közép-európai betűk, például č, ł, ő, ț), a cirill és a görög részhalmazt is. A részhalmaz nélküli betűtípusok ezeket a betűket a tartalék betűtípussal jelenítik meg: a Lato, a Work Sans és a Space Grotesk nem tartalmaz cirill betűket, és csak az Inter, a Roboto, az Open Sans, a Source Serif 4 és a Fira Code tartalmaz görögöt. A 20 betűtípus egyike sem tartalmaz arab betűket. A magyar ő és ű betűket a latin-ext részhalmaz adja, a magyar oldalakon a telepítési doboz felsorolja a nyelvedhez szükséges részhalmaz import sorait is.

Használhatom ezeket a betűtípusokat kereskedelmi projektben?

Igen. A SIL Open Font License fizetés és a tervedben való feltüntetés nélkül engedélyezi a kereskedelmi használatot. Csak a betűtípusfájlok önálló továbbértékesítése tilos.