HemDesignverktygTeckensnittskombination

Teckensnittskombination

Verktyget förhandsvisar 12 utvalda kombinationer av Google Fonts för rubriker och brödtext, låter dig blanda typsnitt själv och kopierar motsvarande CSS @import.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Om verktyget

Verktyget förhandsvisar 12 utvalda kombinationer av Google Fonts för rubriker och brödtext, låter dig blanda typsnitt själv och kopierar motsvarande CSS @import.

Så använder du det

  1. Välj en av de utvalda kombinationerna, eller välj rubrik- och brödtexttypsnitt själv.
  2. Använd Random Pairing för att utforska kombinationer.
  3. Läs förhandsvisningen av rubrik och brödtext i realtid.
  4. Klicka på Copy CSS @import för att ladda typsnitten på din webbplats.

Bra att veta

  • En klassisk kombination ställer ett serif-typsnitt mot ett sans-serif, som Playfair Display med Source Sans 3.
  • Kombinationerna omfattar Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter och DM Serif Display + DM Sans.
  • Att begränsa en webbplats till två typsnittsfamiljer håller sidorna enhetliga och minskar nedladdningsstorleken.
  • Förhandsvisningen laddar de valda typsnitten från Google Fonts i vikterna 400 och 700.
  • Med display=swap i typsnittets URL visas reservtext medan webbtypsnittet laddas.

Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.

Vanliga frågor

Vilka typsnitt passar bra ihop?

Typsnitt med kontrasterande stil men liknande proportioner brukar passa bra ihop, som en serif-rubrik med hög kontrast och en ren sans-serif i brödtexten. De utvalda kombinationerna här är beprövade.

Hur många typsnitt bör en webbplats använda?

Två familjer – en för rubriker och en för brödtext – räcker för de flesta webbplatser. En tredje behövs sällan.

Är Google Fonts gratis för kommersiellt bruk?

Ja. Typsnitten i Google Fonts-biblioteket släpps under öppna licenser som SIL Open Font License och får användas kommersiellt.

Hur lägger jag till typsnitten på min webbplats?

Klistra in den kopierade @import högst upp i din CSS, eller gör om den till en link-tagg i HTML-koden i head, och ange sedan font-family för rubriker och brödtext.