CodeKitHub
Latviešu
Koda rīki

Google Fonts pāru meklētājs

Pēdējoreiz atjaunināts:

Izvēlēties divus fontus, kas tiešām sader kopā, ir grūtāk, nekā šķiet — ja tie ir pārāk līdzīgi, lapa izskatās plakana, ja pārāk atšķirīgi — haotiska. Šis rīks ietaupa laiku, izmēģinot un kļūdoties, piedāvājot 28 rūpīgi atlasītus virsraksta un pamatteksta fontu pārus, katrs attēlots tiešraidē, lai varētu redzēt patieso kontrastu pirms izvēles izdarīšanas. Filtrējiet pēc noskaņas, tad kopējiet Google Fonts iegulšanas saiti un CSS font-family noteikumus tieši savā projektā.

The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Montserrat + Merriweather
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Poppins + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Oswald + Lato
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Raleway + Lora
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bebas Neue + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Merriweather + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Abril Fatface + Poppins
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cormorant Garamond + Nunito Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Archivo Black + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Libre Baskerville + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Josefin Sans + PT Serif
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Fjalla One + Noto Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Work Sans + Georgia
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Space Grotesk + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
DM Serif Display + DM Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Anton + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Crimson Text + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Quicksand + Nunito
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Rubik + Rubik
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bitter + Raleway
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Yeseva One + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Barlow Condensed + Barlow
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cinzel + EB Garamond
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Righteous + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Prata + Jost
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Staatliches + Karla
Embed code / CSS code

Kas ir šis rīks?

Fontu pārošana nozīmē divu (dažreiz trīs) fontu izvēli, lai tos lietotu kopā vienā lapā — parasti vienu virsrakstiem, otru pamattekstam — lai lapai būtu vizuāla hierarhija, neizskatoties nesaskaņoti vai vienmuļi.

Katrs zemāk redzamais pāris parāda tiešraides paraugu: augšā virsraksta fonts, zem tā pamatteksta fonts, izmantojot īstos Google Fonts failus, tāpēc tas, ko redzat, ir tas, ko iegūsiet savā vietnē.

Katram pārim pievienots gatavs lietošanai Google Fonts `<link>` iegulšanas tags un atbilstošs CSS fragments ar `font-family` deklarācijām virsrakstiem un pamattekstam — nokopējiet abus, un darbs padarīts.

Kāpēc to izmantot?

  • 28 rūpīgi izvēlēti pāri, nevis automātiski ģenerēts saraksts — katrs izvēlēts tāpēc, ka abi fonti tiešām papildina viens otru.
  • Tiešraides priekšskatījums: katrs pāris tiek attēlots ar reāliem fontiem, kas ielādēti no Google Fonts, nevis statisks attēls vai fonta nosaukuma minējums.
  • Filtrējiet pēc noskaņas — Moderns, Elegants, Izteiksmīgs, Minimālistisks, Klasisks — lai sašaurinātu izvēli līdz sajūtai, kāda nepieciešama jūsu projektam.
  • Vienā klikšķī kopējiet gan `<link>` iegulšanas tagu, gan CSS `font-family` noteikumus.
  • Bezmaksas, darbojas jūsu pārlūkprogrammā, nav nepieciešams konts vai pieteikšanās.

Kā to lietot

  1. Ja vēlaties, noklikšķiniet uz noskaņas filtra (Moderns, Elegants, Izteiksmīgs, Minimālistisks, Klasisks), lai sašaurinātu sarakstu, vai atstājiet atzīmētu "Visi", lai pārlūkotu visu.
  2. Apskatiet tiešraides priekšskatījuma kartītes — augšējā rinda parāda virsraksta fontu, apakšējā — pamatteksta fontu.
  3. Atveriet pāri, kas jums patīk, un noklikšķiniet, lai izvērstu iegulšanas koda sadaļu.
  4. Kopējiet `<link>` tagu savas HTML `<head>` sadaļā, un CSS fragmentu — savā stilu lapā, lai piemērotu fontus virsrakstiem un pamattekstam.

Piemērs

Ievade

Elegants emuārs

Izvade

Playfair Display (virsraksti) + Source Sans Pro (pamatteksts)

Filtrējot pēc "Elegants", parādās augsta kontrasta antīkvas virsraksti apvienojumā ar tīru, labi salasāmu bezserifa pamattekstu — tā ir izplatīta kombinācija redakcionālos un emuāru izkārtojumos.

Labas fontu pārošanas principi

  • Kontrasts, nevis līdzība: divi fonti, kas izskatās gandrīz identiski (piemēram, divi līdzīgi ģeometriski bezserifa fonti), parasti izskatās kā kļūda, nevis apzināta izvēle. Apvienojiet antīkvu ar bezserifa fontu vai smagu displeja fontu ar vieglāku teksta fontu, lai atšķirība tiktu uztverta kā nodomāta.
  • Saskaņojiet x-augstumu un proporcijas: fonti, kuru mazie burti atrodas līdzīgā vizuālajā augstumā, mēdz radīt sajūtu, ka tie pieder vienai un tai pašai lapai, pat ja to stili atšķiras — neatbilstošs x-augstums ir viens no biežākajiem iemesliem, kāpēc pāris šķiet "nepareizs".
  • Ierobežojiet sevi ar divām saimēm (dažreiz trim): vienu virsrakstiem, vienu pamattekstam un, iespējams, trešo akcentiem, piemēram, pogām vai etiķetēm. Vairāk nekā tas, un lapa sāk izskatīties nepārdomāta.
  • Ņemiet vērā ne tikai formu, bet arī noskaņu: apaļš, draudzīgs bezserifa fonts apvienojumā ar formālu antīkvu rada pretrunīgus signālus, pat ja burtu formas tehniski sader kopā — izvēlieties fontus, kas saskan gan pēc toņa, gan pēc struktūras.
  • Testējiet reālos izmēros: pāris, kas lieliski izskatās lielā priekšskatījumā, var zaudēt kontrastu pamatteksta izmērā, vai displeja fonts var kļūt nesalasāms mazos izmēros — vienmēr pārbaudiet abas galējības.

Pāra izvēle atbilstoši lietojuma gadījumam

Piesaistes lapas un mārketinga vietnes parasti gūst labumu no "Izteiksmīgs" vai "Moderns" filtriem — spēcīgs, augsta kontrasta virsraksta fonts piesaista uzmanību redzamajā daļā, apvienots ar tīru, neitrālu pamatteksta fontu, kas atvieglo garāka teksta lasīšanu.

Emuāri un redakcionāls saturs bieži vislabāk izskatās ar "Elegants" vai "Klasisks" pāriem — izsmalcināts antīkvas virsraksts liecina par pārdomātu, rediģētu balsi, savukārt ērts antīkvas vai bezserifa pamatteksts saglabā rakstu salasāmību ilgstošas lasīšanas laikā.

E-komercijas un produktu vietnes mēdz izvēlēties "Minimālistisks" pārus — atturīgi, neitrāli fonti saglabā fokusu uz produktu fotogrāfiju un cenām, nevis uz pašu tipogrāfiju, kas ir svarīgi, ja vienā lapā parādās desmitiem produktu kartīšu.

Portfolio un radošām vietnēm ir visvairāk vietas eksperimentiem — "Izteiksmīgs" vai "Elegants" pāri ar vairāk personības var darboties labi, jo auditorija tur ir daļēji tāpēc, lai novērtētu vizuālo gaumi.

Piezīmes par veiktspēju un licencēšanu

Iegulšanas `<link>` tags ielādē fontus no Google CDN, kas ir ātrs un kešatmiņā saglabāts daudzās vietnēs, kuras jūsu apmeklētāji, iespējams, jau ir apmeklējuši — bet tas tomēr pievieno ārēju pieprasījumu. Vietnēm, kur svarīga katra milisekunde, fontu failu lejupielāde un pašuzņemšana (manuāli iestatot `font-display: swap`) novērš šo ārējo atkarību, taču prasa zināmu iestatīšanas piepūli.

Visi Google Fonts fonti ir atvērtā koda un bez maksas komerciālai lietošanai, un autortiesību norādīšana nav nepieciešama, lai gan fonta dizainera pieminēšana ir jauka pieklājība, ja to var vienkārši izdarīt.

Biežāk uzdotie jautājumi

Kas padara divus fontus "labi savienojamus"?

Labi pāri līdzsvaro kontrastu un harmoniju. Kontrasts — antīkvas apvienošana ar bezserifa fontu vai izteiksmīga displeja fonta apvienošana ar vienkāršu pamatteksta fontu — rada vizuālu hierarhiju, lai virsraksti un pamatteksts justos atšķirīgi. Harmonija — līdzīgs x-augstums, salīdzināms svītru biezums un kopīga formalitātes vai spēlīguma sajūta — neļauj abiem fontiem konfliktēt. Šeit redzamie pāri atlasīti, ņemot vērā abus aspektus.

Vai virsrakstiem un pamattekstam vienmēr jāizmanto dažādi fonti?

Nē, viena fontu saimes izmantošana abiem gadījumiem (kā šī rīka "Rubik + Rubik" pāris) arī darbojas labi, ja vien fontam ir pietiekami daudz svara variāciju, lai atšķirtu virsrakstus no pamatteksta. Tā ir derīga, minimālistiska izvēle — nevis kļūda.

Kā man faktiski piemērot pāri savai vietnei?

Kopējiet `<link>` iegulšanas tagu savas lapas `<head>` sadaļā, lai ielādētu fontus no Google CDN, tad kopējiet CSS fragmentu savā stilu lapā — tas iestata `font-family` virsrakstiem (h1, h2, h3) un pamattekstam (body, p). Pielāgojiet CSS selektorus, ja jūsu marķējums atšķiras.

Vai Google Fonts ielāde palēninās manu vietni?

Katrs papildu fonta fails pievieno tīkla pieprasījumu un zināmu attēlošanas bloķēšanas risku. Ierobežojiet to līdz vienam virsraksta svaram un vienam vai diviem pamatteksta svariem, izmantojiet `display=swap` (jau iekļauts iegulšanas kodā), lai teksts būtu redzams rezerves fontā, kamēr ielādējas tīmekļa fonts, un apsveriet fontu failu pašuzņemšanu produkcijas vietnēm, kurām nepieciešama pēc iespējas ātrāka ielāde.

Vai šos fontus var bez maksas izmantot komerciāliem mērķiem?

Jā. Katrs Google Fonts fonts, ieskaitot visus šeit redzamos pārus, ir licencēts saskaņā ar SIL Open Font License vai Apache License — abas atļauj bezmaksas komerciālu lietošanu, modificēšanu un izplatīšanu bez autoratlīdzības.

Saistītie rīki

Open Graph meta tagu ģenerators

Izveidojiet Open Graph un Twitter Card meta tagus ar tiešraides kopīgošanas priekšskatījumu.

Krāsu izvēlne

Izvēlies jebkuru krāsu vizuāli vai paņem paraugu no augšupielādēta attēla, ar HEX, RGB un HSL izvadu un kopēšanas pogām.

CSS minifikators

Samazini CSS produkcijai vai formatē to lasāmībai — bez augšupielādes, redzams ietaupītais izmērs.