Fontkombinasjoner – test overskrifts- og brødtekstfonter

Q: Hvilke tegn er med?

Forhåndsvisningen laster latin delsettet norsk, engelsk, fransk og de fleste vesteuropeiske språk, med æ, ø, å, aksenter, « » og eurotegnet og, når fonten har dem og teksten din trenger dem, delsettene latin ext sentraleuropeiske bokstaver som č, ł, ő, ț , kyrillisk og gresk. Fonter uten et delsett viser de bokstavene i reservefonten: Lato, Work Sans og Space Grotesk har ikke kyrillisk, og bare Inter, Roboto, Open Sans, Source Serif 4 og Fira Code har gresk. Ingen av de 20 fontene har arabiske bokstaver. På norske sider viser installasjonsboksen importlinjene for latin delsettet.

Fontkombinasjoner – forhåndsvis overskrift og brødtekst

Forhåndsvis fontkombinasjoner for overskrifter og brødtekst med 20 fonter med åpen lisens, juster størrelse og linjehøyde, og kopier CSS-font-family.

Foreslåtte kombinasjoner

Overskriftsfont Brødtekstfont

Overskriftsstørrelse Tekststørrelse Linjehøyde Overskriftsvekt Mørk bakgrunn

Overskriftstekst Brødtekst

Forhåndsvisning

CSS-kode

Selvhosting med Fontsource

Installer npm-pakkene og importer bare vektene du bruker. Fontene leveres da fra ditt eget nettsted, uten en font-CDN.

Slik bruker du fontkombinasjonsverktøyet

Start med en av de Foreslåtte kombinasjonene (Redaksjonell, Moderne blogg, Landingsside, Nyheter, Elegant, Teknologimagasin, Bok, Klassisk, Dokumentasjon, Leken). Hver knapp viser overskriftsfonten og brødtekstfonten den bruker.
Eller velg din egen Overskriftsfont og Brødtekstfont. Listene er gruppert i sans-serif-, serif-, display-, monospace- og håndskriftfonter. Bytt font bytter om de to.
Juster Overskriftsstørrelse, Tekststørrelse og Linjehøyde, og velg Overskriftsvekt (Fet (700) eller Normal (400)). Huk av for Mørk bakgrunn for å sjekke kombinasjonen i mørk modus.
Bytt ut Overskriftstekst og Brødtekst med dine egne ord: en ekte tittel og et ekte avsnitt sier mye mer enn en pangram. La det stå en tom linje mellom avsnittene.
Kopier CSS-kode, og følg deretter Selvhosting med Fontsource for å legge fontene til i prosjektet ditt.

Fontene lastes første gang du velger dem (omtrent 12 til 50 KB per vekt). De leveres fra dette nettstedet, aldri fra en font-CDN.

Norske tegn som æ, ø og å ligger i latin-delsettet, som alltid lastes. Se Ofte stilte spørsmål for hvilke andre skriftsystemer fontene dekker.

Hva som gjør en god fontkombinasjon

Kontrast, ikke konflikt. Den klassiske oppskriften er en serif til den ene rollen og en sans-serif til den andre: Playfair Display over Lato, eller Montserrat over Merriweather. To fonter som er like, men ikke identiske (for eksempel to geometriske sans-serif-fonter), ser ofte ut som en feil.
En rolig brødtekstfont. Det er i brødteksten folk bruker tiden sin. Velg en font med åpne bokstavformer og god x-høyde (Inter, Lato, Open Sans, Source Serif 4, Merriweather), og spar displayfonter som Playfair Display, DM Serif Display, Oswald eller Caveat til korte overskrifter.
Samsvarende proporsjoner. Fonter med lik x-høyde passer godt sammen på samme linje og i samme kolonne.
To fonter er nok. Skap hierarki med størrelse, vekt og avstand i stedet for en tredje skrifttype.

For lesbar brødtekst er 16 til 20 px med linjehøyde mellom 1,4 og 1,7 et godt utgangspunkt, med omtrent 60 til 75 tegn per linje. Overskrifter trenger vanligvis tettere linjehøyde (1,1 til 1,3), noe CSS-koden stiller inn for deg.

CSS-koden

Koden deklarerer to egendefinerte egenskaper, --font-heading og --font-body, hver med en reserveliste: hvis webfonten ikke er lastet ennå, viser nettleseren en lignende systemfont (Georgia for serif, systemets UI-font for sans-serif). Størrelsene er skrevet i rem (16 px = 1rem), så de følger innstillingen for skriftstørrelse i leserens nettleser.

Selvhosting og lisenser

Alle 20 fontene kommer fra Fontsource, som pakker fonter med åpen kildekode for npm. Installasjonsboksen gir npm install-kommandoen og import-linjene for latin-delsettet og bare vektene du bruker. Bundleren din kopierer deretter woff2-filene inn i bygget. Å levere fonter fra ditt eget domene er raskere (ingen ekstra tilkobling), fungerer offline og unngår at IP-adressene til besøkende sendes til en tredjeparts fonttjeneste, noe som er et kjent personvernproblem (GDPR) i EU og EØS.

Alle fontene her har lisensen SIL Open Font License 1.1, ifølge pakkemetadataene: du kan bruke dem på nettsteder, i apper og på trykk, kommersielt eller ikke, og bygge dem inn. Du kan ikke selge selve fontfilene. Hvis du endrer en font, må den beholde OFL-lisensen og ikke bruke det opprinnelige reserverte navnet. Lisensfilen følger med i hver pakke.

Ofte stilte spørsmål

Bruker dette verktøyet Google Fonts?

Nei. Mange av disse familiene finnes også på Google Fonts, men her kommer filene fra npm-pakkene til Fontsource og leveres av dette nettstedet. Ingen forespørsler går til Google eller noen annen font-CDN.

Hvorfor blir noen overskrifter ikke fetere?

DM Serif Display finnes bare i normal vekt. Verktøyet viser den da i 400, sier fra om det under kontrollene, og CSS-koden bruker 400.

Kan jeg kombinere to serif- eller to sans-serif-fonter?

Ja, hvis de skiller seg tydelig i rolle og vekt, for eksempel en fet, smal overskrift med en lett, åpen brødtekstfont. Verktøyet viser et varsel når begge fontene har samme stil, fordi kontrasten mellom serif og sans-serif er lettere å få riktig.

Hvilke tegn er med?

Forhåndsvisningen laster latin-delsettet (norsk, engelsk, fransk og de fleste vesteuropeiske språk, med æ, ø, å, aksenter, « » og eurotegnet) og, når fonten har dem og teksten din trenger dem, delsettene latin-ext (sentraleuropeiske bokstaver som č, ł, ő, ț), kyrillisk og gresk. Fonter uten et delsett viser de bokstavene i reservefonten: Lato, Work Sans og Space Grotesk har ikke kyrillisk, og bare Inter, Roboto, Open Sans, Source Serif 4 og Fira Code har gresk. Ingen av de 20 fontene har arabiske bokstaver. På norske sider viser installasjonsboksen importlinjene for latin-delsettet.

Kan jeg bruke disse fontene i et kommersielt prosjekt?

Ja. SIL Open Font License tillater kommersiell bruk uten betaling eller kreditering i designet ditt. Bare videresalg av selve fontfilene er ikke tillatt.