CodeKitHubHvað er þetta verkfæri?
Leturpörun snýst um að velja tvö (stundum þrjú) letur til að nota saman á síðu — yfirleitt eitt fyrir fyrirsagnir og annað fyrir meginmál — svo síðan fái sjónræna stigskiptingu án þess að virka ósamstæð eða einhæf.
Hver samsetning hér að neðan sýnir lifandi sýnishorn: fyrirsagnaletrið efst, meginmálsletrið fyrir neðan, með raunverulegum Google Fonts skrám svo það sem þú sérð er nákvæmlega það sem þú færð á síðunni þinni.
Hverri samsetningu fylgir tilbúið Google Fonts `<link>` innfellingarmerki og samsvarandi CSS-brot með `font-family` skilgreiningum fyrir fyrirsagnir og meginmál — afritaðu bæði og þá ertu tilbúin/n.
Af hverju að nota það?
- 28 handvaldar samsetningar, ekki sjálfvirkt myndaður listi — hver þeirra var valin vegna þess að letrin tvö fara raunverulega vel saman.
- Lifandi forskoðun: hver samsetning birtist með raunverulegum leturgerðum sóttum frá Google Fonts, ekki með stöðugri mynd eða ágiskun um leturnafn.
- Síaðu eftir stemningu — Nútímalegt, Klassískt og fágað, Djarft, Naumhyggjulegt, Klassískt — til að finna réttu tilfinninguna fyrir verkefnið þitt.
- Ein smellafritun fyrir bæði `<link>` innfellingarmerkið og CSS `font-family` reglurnar.
- Ókeypis, keyrir í vafranum þínum, engan aðgang eða innskráningu þarf.
Hvernig á að nota það
- Smelltu að vild á stemningarsíu (Nútímalegt, Klassískt og fágað, Djarft, Naumhyggjulegt, Klassískt) til að þrengja listann, eða skildu „Allt“ eftir valið til að skoða allar samsetningarnar.
- Skannaðu lifandi forskoðunarspjöldin — efsta línan sýnir fyrirsagnaletrið, línan fyrir neðan sýnir meginmálsletrið.
- Opnaðu samsetningu sem þér líst á og smelltu til að opna innfellingarkóðahlutann.
- Afritaðu `<link>` merkið inn í `<head>` HTML-skjalsins þíns og afritaðu CSS-brotið inn í stílblaðið þitt til að nota letrin á fyrirsagnir og meginmál.
Dæmi
Inntak
Fágað bloggÚttak
Playfair Display (fyrirsagnir) + Source Sans Pro (meginmál)Að sía eftir „Klassískt og fágað“ dregur fram hástemmd serif-fyrirsagnaletur pöruð við hreint, mjög læsilegt sans-serif meginmálsletur — algeng samsetning fyrir ritstjórnarefni og bloggsíður.
Grundvallaratriði góðrar leturpörunar
- Andstæða fram yfir líkindi: tvö letur sem líta nánast eins út (til dæmis tvö svipuð geometrísk sans-serif letur) virka oft eins og mistök frekar en meðvitað val. Paraðu serif við sans-serif, eða þungt skrautletur við léttara meginmálsletur, svo munurinn lesist sem yfirvegaður ásetningur.
- Samræmdu x-hæð og hlutföll: letur þar sem lágstafir sitja í svipaðri sjónrænni hæð virka eins og þau eigi heima á sömu síðu, jafnvel þótt stíllinn sé ólíkur — ósamræmd x-hæð er ein algengasta ástæða þess að pörun virkar „skökk“.
- Takmarkaðu þig við tvær leturfjölskyldur (stundum þrjár): eina fyrir fyrirsagnir, eina fyrir meginmál, og í mesta lagi þriðju fyrir smáatriði eins og hnappa eða merkingar. Fleiri en það og síðan fer að virka óskipulögð.
- Hugsaðu um stemninguna, ekki bara formið: kringlótt, vinaleg sans-leturgerð pöruð við formlegt serif sendir misvísandi skilaboð, jafnvel þótt stafirnir tæknilega séð passi saman — veldu letur sem eru samstiga í tóni jafnt sem byggingu.
- Prófaðu í raunverulegri stærð: pörun sem lítur vel út í stórri forskoðun getur misst andstæðuna í meginmálsstærð, eða skrautletur getur orðið ólæsilegt í lítilli stærð — athugaðu alltaf báðar öfgarnar.
Að velja pörun eftir notkunartilviki
Lendingarsíður og markaðssíður njóta oftast góðs af „Djarft“ eða „Nútímalegt“ síunum — sterkt, hástemmd fyrirsagnaletur grípur athyglina ofarlega á síðunni, parað við hreint, hlutlaust meginmálsletur sem heldur löngum texta auðlesnum.
Blogg og ritstjórnarefni lesast oftast best með „Klassískt og fágað“ eða „Klassískt“ pörunum — fágað serif-fyrirsagnaletur gefur til kynna yfirvegaða, ritstýrða rödd, á meðan þægilegt serif- eða sans-serif meginmálsletur heldur löngum greinum læsilegum yfir lengri lestrarlotur.
Vefverslanir og vörusíður hallast oft að „Naumhyggjulegt“ pörunum — hófstillt, hlutlaus letur halda athyglinni á vörumyndum og verði frekar en á leturfræðinni sjálfri, sem skiptir máli þegar tugir vörukorta birtast á einni síðu.
Eignasöfn og skapandi síður hafa mest rými til að tilraunast — „Djarft“ eða „Klassískt og fágað“ pörun með meiri persónuleika getur virkað vel þar sem gestir eru að hluta til að meta sjónrænan smekk.
Athugasemdir um afköst og leyfismál
Innfellingarmerkið `<link>` sækir letur frá CDN-neti Google, sem er hratt og skyndiminnisvistað hjá mörgum síðum sem gestir þínir hafa líklega þegar heimsótt — en það bætir samt við ytri beiðni. Fyrir síður þar sem hver millisekúnda skiptir máli fjarlægir það að sækja leturskrárnar og hýsa þær sjálf/ur (með `font-display: swap` sett handvirkt) þessa ytri háðni, á kostnað örlítillar aukavinnu við uppsetningu.
Öll letur í Google Fonts eru opinn hugbúnaður og ókeypis fyrir viðskiptalega notkun án þess að heimildar sé krafist, þótt það sé kurteisi að geta höfundar leturgerðarinnar þar sem því verður auðveldlega við komið.
Algengar spurningar
Hvað gerir tvö letur „vel pöruð“?
Góðar pörun byggja á jafnvægi milli andstæðu og samræmis. Andstæða — að para serif við sans-serif, eða djarft skrautletur við látlaust meginmálsletur — skapar sjónræna stigskiptingu svo fyrirsagnir og meginmál skera sig greinilega í sundur. Samræmi — svipuð x-hæð, sambærileg strikaþykkt og sameiginleg formlegheit eða léttleiki — kemur í veg fyrir að letrin tvö stangist á. Samsetningarnar hér voru valdar með hvort tveggja í huga.
Ættu fyrirsagnir og meginmál alltaf að nota mismunandi letur?
Nei, að nota eina leturfjölskyldu fyrir bæði (eins og „Rubik + Rubik“ samsetningin hér) virkar líka vel, svo framarlega sem letrið hefur nógu mikinn breytileika í leturþyngd til að greina fyrirsagnir frá meginmáli. Þetta er gildur, naumhyggjulegur valkostur — ekki mistök.
Hvernig set ég samsetningu inn á síðuna mína?
Afritaðu `<link>` innfellingarmerkið inn í `<head>` síðunnar þinnar til að sækja letrin frá CDN-neti Google, og afritaðu svo CSS-brotið inn í stílblaðið þitt — það setur `font-family` fyrir fyrirsagnir (h1, h2, h3) og fyrir meginmál (body, p). Breyttu CSS-völurunum ef merkingin þín er öðruvísi uppbyggð.
Hægir það á síðunni minni að sækja Google Fonts?
Hver ný leturskrá bætir við netbeiðni og nokkurri hættu á að hindra myndun síðunnar. Haltu þig við eina fyrirsagnarþyngd og eina eða tvær meginmálsþyngdir, notaðu `display=swap` (þegar innifalið í innfellingarkóðanum) svo texti birtist í varaletri á meðan vefletrið hleðst, og íhugaðu að hýsa leturskrárnar sjálf/ur fyrir framleiðslusíður sem þurfa hraðasta mögulega hleðslutíma.
Má nota þessi letur frjálst í viðskiptalegum tilgangi?
Já. Öll letur í Google Fonts, þar með talin öll pörun sem hér er sýnd, eru gefin út undir SIL Open Font License eða Apache License — bæði leyfin heimila frjálsa notkun í viðskiptalegum tilgangi, breytingar og endurdreifingu án gjalds.