Förhandsvisa typsnittskombinationer
Förhandsvisa typsnittskombinationer för rubriker och brödtext med 20 fria typsnitt, justera storlek och radavstånd och kopiera CSS-koden.
Föreslagna par
Förhandsvisning
Installera npm-paketen och importera bara de vikter du använder. Typsnitten levereras då från din egen webbplats, utan något typsnitts-CDN.
Så förhandsvisar du typsnittskombinationer
- Börja med något av de Föreslagna par (Redaktionellt, Modern blogg, Landningssida, Nyheter, Elegant, Teknikmagasin, Bok, Klassiskt, Dokumentation, Lekfullt). Varje knapp visar vilket rubriktypsnitt och vilket brödtextsnitt den använder.
- Eller välj själv Typsnitt för rubriker och Typsnitt för brödtext. Listorna är grupperade i sans serif, serif, display, monospace och handskrift. Byt typsnitt byter plats på de två.
- Justera Rubrikstorlek, Brödtextstorlek och Radavstånd, och välj Rubrikens vikt (Fet (700) eller Normal (400)). Kryssa i Mörk bakgrund för att testa paret i mörkt läge.
- Ersätt Rubriktext och Brödtext med dina egna ord: en riktig rubrik och ett riktigt stycke säger mycket mer än ett pangram. Lämna en tom rad mellan styckena.
- Kopiera CSS-kod och följ sedan Egen hosting med Fontsource för att lägga till typsnitten i ditt projekt.
Typsnitten läses in första gången du väljer dem (ungefär 12 till 50 kB per vikt). De levereras från den här webbplatsen, aldrig från ett typsnitts-CDN.
Vad som gör en bra typsnittskombination
- Kontrast, inte konflikt. Det klassiska receptet är en serif för den ena rollen och en sans serif för den andra: Playfair Display över Lato, eller Montserrat över Merriweather. Två typsnitt som är lika men inte identiska (till exempel två geometriska sans serif) ser ofta ut som ett misstag.
- Ett lugnt brödtextsnitt. Det är i brödtexten läsaren tillbringar sin tid. Välj ett typsnitt med öppna bokstavsformer och generös x-höjd (Inter, Lato, Open Sans, Source Serif 4, Merriweather) och spara displaytypsnitt som Playfair Display, DM Serif Display, Oswald eller Caveat till korta rubriker.
- Matchande proportioner. Typsnitt med liknande x-höjd passar bra ihop på samma rad och i samma spalt.
- Två typsnitt räcker. Skapa hierarki med storlek, vikt och avstånd i stället för ett tredje typsnitt.
För läsbar brödtext är 16 till 20 px med ett radavstånd mellan 1,4 och 1,7 ett bra utgångsläge, med omkring 60 till 75 tecken per rad. Rubriker behöver oftast ett tätare radavstånd (1,1 till 1,3), vilket CSS-koden ställer in åt dig.
CSS-koden
Koden deklarerar två egna egenskaper, --font-heading och --font-body, var och en med en reservlista: om webbtypsnittet inte har lästs in ännu visar webbläsaren ett liknande systemtypsnitt (Georgia för serif, systemets gränssnittstypsnitt för sans serif). Storlekarna skrivs i rem (16 px = 1rem), så de följer läsarens inställning för textstorlek i webbläsaren.
Svenska tecken
Alla 20 typsnitt har latin-delmängden, som täcker å, ä och ö, så svensk text visas korrekt i förhandsvisningen och i din egen webbplats med de importrader som installationsrutan visar. Latin-ext (centraleuropeiska bokstäver som č, ł, ő, ț), kyrilliska och grekiska läses in när typsnittet har dem och din text behöver dem.
Egen hosting och licenser
Alla 20 typsnitt kommer från Fontsource, som paketerar typsnitt med öppen licens för npm. Installationsrutan ger kommandot npm install och import-raderna för latin-delmängden och bara de vikter du använder; din bundler kopierar sedan woff2-filerna till ditt bygge. Att leverera typsnitt från din egen domän går snabbare (ingen extra anslutning), fungerar offline och gör att du slipper skicka besökarnas IP-adresser till en extern typsnittstjänst, ett känt GDPR-problem i EU.
Varje typsnitt här omfattas enligt sina paketmetadata av SIL Open Font License 1.1: du får använda det på webbplatser, i appar och i tryck, kommersiellt eller inte, och bädda in det. Du får inte sälja typsnittsfilerna fristående. Om du ändrar ett typsnitt måste det behålla OFL och får inte använda det ursprungliga reserverade namnet. Licensfilen ingår i varje paket.
Vanliga frågor
Använder verktyget Google Fonts?
Nej. Många av familjerna finns även på Google Fonts, men här kommer filerna från Fontsources npm-paket och levereras av den här webbplatsen. Ingen förfrågan går till Google eller till något annat typsnitts-CDN.
Varför blir vissa rubriker inte fetare?
DM Serif Display finns bara i normal vikt. Verktyget visar det då i 400, säger det under kontrollerna, och CSS-koden använder 400.
Kan jag kombinera två serif- eller två sans serif-typsnitt?
Ja, om de skiljer sig tydligt i roll och vikt, till exempel en fet, smal rubrik med ett lätt och öppet brödtextsnitt. Verktyget visar en notis när båda typsnitten har samma stil, eftersom kontrasten mellan serif och sans serif är lättare att få till.
Vilka tecken ingår?
Förhandsvisningen läser in latin-delmängden (engelska, svenska och de flesta västeuropeiska språk, med accenter, å, ä, ö, œ, « » och eurotecknet) och, när typsnittet har dem och din text behöver dem, delmängderna latin-ext, kyrilliska och grekiska. Typsnitt utan en viss delmängd visar de bokstäverna i reservtypsnittet: Lato, Work Sans och Space Grotesk saknar kyrilliska, och bara Inter, Roboto, Open Sans, Source Serif 4 och Fira Code har grekiska. Inget av de 20 typsnitten har arabiska bokstäver; arabisk text visas i systemets typsnitt.
Får jag använda typsnitten i ett kommersiellt projekt?
Ja. SIL Open Font License tillåter kommersiell användning utan avgift och utan krav på att ange upphovsman i din design. Det enda som inte är tillåtet är att sälja typsnittsfilerna fristående.
Relaterade verktyg
- Omvandla px till rem Omvandla px till rem och em med valfri rotstorlek, skapa en omvandlingstabell och gör om alla px-värden i ett CSS-utdrag till rem med ett klick.
- Färgpalettgenerator Skapa färgpaletter från en basfärg med färgharmonier – komplementär, analog, triadisk, tetradisk, kvadrat och monokrom – och exportera dem.
- Kontrastkontroll Gratis kontrastkontroll enligt WCAG. Ange text- och bakgrundsfärg och få kontrastförhållandet, resultat för AA/AAA och närmaste godkända färg.
- CSS-gradientgenerator Skapa linjära, radiella och koniska CSS-gradienter med direkt förhandsvisning. Lägg till färgstopp, ställ in vinkeln och kopiera CSS-koden.