Font Pairing Previewer

Q: Anong mga karakter ang kasama?

Nilo load ng preview ang latin subset Ingles, Pranses, at karamihan ng wikang Kanlurang Europeo, kasama ang mga accent, œ, « » at euro sign at, kapag mayroon ang font at kailangan ng text mo, ang latin ext mga letrang Gitnang Europeo gaya ng č, ł, ő, ț , Cyrillic at Greek na subset. Ang mga font na walang subset ay nagpapakita ng mga letrang iyon sa fallback font: walang Cyrillic ang Lato, Work Sans o Space Grotesk, at tanging Inter, Roboto, Open Sans, Source Serif 4 at Fira Code ang may Greek. Wala sa 20 font ang may letrang Arabic. Sakop ng latin subset ang alpabetong Filipino, kasama ang ñ.

I-preview ang mga pares ng font para sa heading at body gamit ang 20 open-license na font, ayusin ang laki at line height, at kopyahin ang CSS font-family.

Mga iminungkahing pares

Font ng heading Font ng body

Laki ng heading Laki ng body Line height Bigat ng heading Madilim na background

Text ng heading Text ng body

Preview

CSS code

Self-hosting gamit ang Fontsource

I-install ang mga npm package at i-import lang ang mga weight na gagamitin mo. Ihahain na ang mga font mula sa sarili mong site, nang walang font CDN.

Paano gamitin ang font pairing previewer

Magsimula sa isa sa Mga iminungkahing pares (Editorial, Makabagong blog, Landing page, Balita, Elegante, Tech magazine, Aklat, Klasiko, Dokumentasyon, Mapaglaro). Ipinapakita ng bawat button ang heading font at body font na inilalapat nito.
O piliin ang sarili mong Font ng heading at Font ng body. Pinagpapangkat ang mga listahan sa sans-serif, serif, display, monospace at sulat-kamay na font. Pinagpapalit ng Ipagpalit ang mga font ang dalawa.
Ayusin ang Laki ng heading, Laki ng body at Line height, at piliin ang Bigat ng heading (Bold (700) o Regular (400)). Lagyan ng tsek ang Madilim na background para subukan ang pares sa dark mode.
Palitan ang Text ng heading at Text ng body ng sarili mong mga salita: mas marami kang malalaman sa totoong pamagat at totoong talata kaysa sa pangram. Mag-iwan ng blangkong linya sa pagitan ng mga talata.
Kopyahin ang CSS code, saka sundin ang Self-hosting gamit ang Fontsource para idagdag ang mga font sa iyong proyekto.

Nilo-load ang mga font sa unang beses na piliin mo ang mga ito (mga 12 hanggang 50 KB bawat weight). Ihinahain ang mga ito mula sa site na ito, hindi kailanman mula sa font CDN.

Ano ang gumagawa ng magandang pares ng font

Contrast, hindi banggaan. Ang klasikong resipe ay serif para sa isang papel at sans-serif para sa isa: Playfair Display sa ibabaw ng Lato, o Montserrat sa ibabaw ng Merriweather. Ang dalawang font na magkahawig pero hindi magkapareho (halimbawa dalawang geometric sans-serif) ay madalas mukhang pagkakamali.
Kalmadong body font. Sa body text gumugugol ng oras ang mga tao. Pumili ng font na bukas ang hugis ng mga letra at malaki ang x-height (Inter, Lato, Open Sans, Source Serif 4, Merriweather) at itabi ang mga display font gaya ng Playfair Display, DM Serif Display, Oswald o Caveat para sa maiikling heading.
Magkatugmang proporsyon. Ang mga font na magkatulad ang x-height ay bagay na magkatabi sa iisang linya at column.
Sapat na ang dalawang font. Lumikha ng hierarchy gamit ang laki, bigat at espasyo sa halip na ikatlong typeface.

Para sa nababasang body text, magandang panimulang saklaw ang 16 hanggang 20 px na may line height na 1.4 hanggang 1.7, at mga 60 hanggang 75 karakter bawat linya. Karaniwang nangangailangan ang mga heading ng mas masikip na line height (1.1 hanggang 1.3), na itinatakda para sa iyo ng CSS code.

Ang CSS code

Idinedeklara ng code ang dalawang custom property, --font-heading at --font-body, bawat isa ay may fallback stack: kung hindi pa na-load ang web font, nagpapakita ang browser ng katulad na system font (Georgia para sa serif, ang system UI font para sa sans-serif). Isinusulat sa rem ang mga laki (16 px = 1rem), kaya sinusunod nila ang setting ng font size ng browser ng mambabasa.

Self-hosting at mga lisensya

Lahat ng 20 font ay galing sa Fontsource, na nagpa-package ng mga open-source na font para sa npm. Ibinibigay ng install box ang utos na npm install at ang mga linyang import para sa latin subset at sa mga weight na gagamitin mo lang; kokopyahin ng iyong bundler ang mga woff2 file sa iyong build. Mas mabilis ang paghahain ng mga font mula sa sarili mong domain (walang dagdag na koneksyon), gumagana ito offline at iniiwasan nitong ipadala ang IP address ng iyong mga bisita sa third-party na font service, isang kilalang isyu sa GDPR sa EU.

Lahat ng font dito ay nasa ilalim ng SIL Open Font License 1.1, ayon sa metadata ng package nila: puwede mo itong gamitin sa mga website, app at print, pang-negosyo man o hindi, at i-embed. Hindi mo puwedeng ibenta nang mag-isa ang mga font file. Kung babaguhin mo ang isang font, dapat panatilihin nito ang OFL at hindi dapat gamitin ang orihinal na reserved name. Kasama sa bawat package ang license file.

Mga madalas itanong

Gumagamit ba ng Google Fonts ang tool na ito?

Hindi. Marami sa mga pamilyang ito ay available din sa Google Fonts, pero dito ay galing ang mga file sa mga npm package ng Fontsource at inihahain ng site na ito. Walang request na pumupunta sa Google o sa anumang font CDN.

Bakit hindi lumalapot ang ilang heading?

Regular na weight lang ang meron sa DM Serif Display. Ipapakita ito ng tool sa 400, sasabihin ito sa ilalim ng mga control, at 400 ang gagamitin ng CSS code.

Puwede ba akong magpares ng dalawang serif o dalawang sans-serif na font?

Oo, kung malinaw ang pagkakaiba nila sa papel at bigat, halimbawa bold at makitid na heading na may magaan at bukas na body font. Nagpapakita ang tool ng paalala kapag pareho ang istilo ng dalawang font, dahil mas madaling pagtagumpayan ang contrast ng serif at sans-serif.

Anong mga karakter ang kasama?

Nilo-load ng preview ang latin subset (Ingles, Pranses, at karamihan ng wikang Kanlurang Europeo, kasama ang mga accent, œ, « » at euro sign) at, kapag mayroon ang font at kailangan ng text mo, ang latin-ext (mga letrang Gitnang Europeo gaya ng č, ł, ő, ț), Cyrillic at Greek na subset. Ang mga font na walang subset ay nagpapakita ng mga letrang iyon sa fallback font: walang Cyrillic ang Lato, Work Sans o Space Grotesk, at tanging Inter, Roboto, Open Sans, Source Serif 4 at Fira Code ang may Greek. Wala sa 20 font ang may letrang Arabic. Sakop ng latin subset ang alpabetong Filipino, kasama ang ñ.

Puwede ko bang gamitin ang mga font na ito sa komersyal na proyekto?

Oo. Pinapayagan ng SIL Open Font License ang komersyal na paggamit nang walang bayad o attribution sa iyong disenyo. Ang pagbebenta lang ng mga font file nang mag-isa ang hindi pinapayagan.