Skrifttypekombinationer

Q: Hvilke tegn er med?

Eksemplet indlæser latin delsættet engelsk, fransk, dansk og de fleste vesteuropæiske sprog, med accenter, æ, ø, å, œ, » « og eurotegnet og, når skrifttypen har dem, og din tekst har brug for dem, latin ext centraleuropæiske bogstaver som č, ł, ő, ț samt kyrillisk og græsk. Skrifttyper uden et delsæt viser disse bogstaver i reserveskrifttypen: Lato, Work Sans og Space Grotesk har ikke kyrillisk, og kun Inter, Roboto, Open Sans, Source Serif 4 og Fira Code har græsk. Ingen af de 20 skrifttyper har arabiske bogstaver. Til dansk behøver du kun latin delsættet.

Se skrifttyper til overskrifter og brødtekst sammen med 20 skrifttyper med åben licens, justér størrelse og linjehøjde, og kopiér CSS-koden til font-family.

Foreslåede par

Skrifttype til overskrift Skrifttype til brødtekst

Størrelse på overskrift Størrelse på brødtekst Linjehøjde Vægt på overskrift Mørk baggrund

Overskriftstekst Brødtekst

Eksempel

CSS-kode

Selvhosting med Fontsource

Installer npm-pakkerne, og importer kun de vægte, du bruger. Skrifttyperne leveres så fra dit eget website uden et skrifttype-CDN.

Sådan bruger du værktøjet til skrifttypekombinationer

Start med et af de Foreslåede par (Redaktionel, Moderne blog, Landingsside, Nyheder, Elegant, Teknologimagasin, Bog, Klassisk, Dokumentation, Legende). Hver knap viser den overskriftsskrifttype og brødtekstskrifttype, den anvender.
Eller vælg selv Skrifttype til overskrift og Skrifttype til brødtekst. Listerne er grupperet i sans-serif, serif, display, monospace og håndskrift. Byt om på skrifttyperne bytter de to.
Justér Størrelse på overskrift, Størrelse på brødtekst og Linjehøjde, og vælg Vægt på overskrift (Fed (700) eller Normal (400)). Sæt kryds i Mørk baggrund for at se kombinationen i mørk tilstand.
Erstat Overskriftstekst og Brødtekst med dine egne ord: en rigtig titel og et rigtigt afsnit fortæller dig meget mere end en pangram. Lad en tom linje stå mellem afsnittene.
Kopiér CSS-kode, og følg derefter Selvhosting med Fontsource for at føje skrifttyperne til dit projekt.

Skrifttyperne indlæses første gang, du vælger dem (cirka 12 til 50 KB pr. vægt). De leveres fra dette website, aldrig fra et skrifttype-CDN. Intet, du indtaster, sendes til en server.

Hvad kendetegner en god skrifttypekombination

Kontrast, ikke konflikt. Den klassiske opskrift er en serif til den ene rolle og en sans-serif til den anden: Playfair Display over Lato eller Montserrat over Merriweather. To skrifttyper, der ligner hinanden uden at være ens (for eksempel to geometriske sans-serif), ligner ofte en fejl.
En rolig brødtekstskrifttype. Det er i brødteksten, folk bruger deres tid. Vælg en skrifttype med åbne bogstavformer og en rummelig x-højde (Inter, Lato, Open Sans, Source Serif 4, Merriweather), og spar display-skrifttyper som Playfair Display, DM Serif Display, Oswald eller Caveat til korte overskrifter.
Passende proportioner. Skrifttyper med nogenlunde samme x-højde fungerer godt sammen på samme linje og i samme spalte.
To skrifttyper er nok. Skab hierarki med størrelse, vægt og afstand i stedet for en tredje skrifttype.

Til læselig brødtekst er 16 til 20 px med en linjehøjde mellem 1,4 og 1,7 et godt udgangspunkt, med omkring 60 til 75 tegn pr. linje. Overskrifter har som regel brug for en tættere linjehøjde (1,1 til 1,3), som CSS-koden indstiller for dig.

CSS-koden

Koden erklærer to brugerdefinerede egenskaber, --font-heading og --font-body, hver med en reserveliste: hvis webskrifttypen endnu ikke er indlæst, viser browseren en lignende systemskrifttype (Georgia til serif, systemets UI-skrifttype til sans-serif). Størrelserne skrives i rem (16 px = 1rem), så de følger læserens indstilling for skriftstørrelse i browseren.

Selvhosting og licenser

Alle 20 skrifttyper kommer fra Fontsource, som pakker open source-skrifttyper til npm. Installationsboksen giver kommandoen npm install og import-linjerne til latin-delsættet og kun de vægte, du bruger. Din bundler kopierer derefter woff2-filerne ind i dit build. At levere skrifttyper fra dit eget domæne er hurtigere (ingen ekstra forbindelse), virker offline og undgår at sende dine besøgendes IP-adresser til en tredjeparts skrifttypetjeneste, et kendt GDPR-problem i EU.

Hver skrifttype her har ifølge sine pakkemetadata licensen SIL Open Font License 1.1: du må bruge den på websites, i apps og på tryk, kommercielt eller ej, og du må indlejre den. Du må ikke sælge selve skrifttypefilerne. Hvis du ændrer en skrifttype, skal den beholde OFL og må ikke bruge det oprindelige reserverede navn. Licensfilen følger med i hver pakke.

Ofte stillede spørgsmål

Bruger værktøjet Google Fonts?

Nej. Mange af disse skrifttypefamilier findes også på Google Fonts, men her kommer filerne fra Fontsource-npm-pakkerne og leveres af dette website. Der sendes ingen forespørgsel til Google eller et andet skrifttype-CDN.

Hvorfor bliver nogle overskrifter ikke federe?

DM Serif Display findes kun i normal vægt. Værktøjet viser den så i 400, skriver det under kontrollerne, og CSS-koden bruger 400.

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

Ja, hvis de adskiller sig tydeligt i rolle og vægt, for eksempel en fed, smal overskrift med en let, åben brødtekstskrifttype. Værktøjet viser en bemærkning, når begge skrifttyper har samme stil, fordi kontrasten mellem serif og sans-serif er lettere at ramme rigtigt.

Hvilke tegn er med?

Eksemplet indlæser latin-delsættet (engelsk, fransk, dansk og de fleste vesteuropæiske sprog, med accenter, æ, ø, å, œ, » « og eurotegnet) og, når skrifttypen har dem, og din tekst har brug for dem, latin-ext (centraleuropæiske bogstaver som č, ł, ő, ț) samt kyrillisk og græsk. Skrifttyper uden et delsæt viser disse bogstaver i reserveskrifttypen: Lato, Work Sans og Space Grotesk har ikke kyrillisk, og kun Inter, Roboto, Open Sans, Source Serif 4 og Fira Code har græsk. Ingen af de 20 skrifttyper har arabiske bogstaver. Til dansk behøver du kun latin-delsættet.

Kan jeg bruge skrifttyperne i et kommercielt projekt?

Ja. SIL Open Font License tillader kommerciel brug uden betaling eller kreditering i dit design. Det er kun videresalg af selve skrifttypefilerne, der ikke er tilladt.