Verktøy for skriftparing
Finn den perfekte skriftkombinasjonen til nettstedet. Velg skrifter for overskrift og brødtekst, forhåndsvis i sanntid og kopier bruksklar CSS.
Den raske brune reven hopper over den late hunden
God typografi er usynlig. Fremragende typografi er uforglemmelig. Riktig skriftparing skaper visuelt hierarki, øker lesbarheten og styrker merkevaren. Enten du lager en landingsside, blogg eller nettbutikk, setter skriftene tonen for hele brukeropplevelsen.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )
/* Heading */
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
h1 {
font-size: 48px;
}
/* Body */
body, p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
}
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400&display=swap');Skap kontrast
Kombiner skrifter med ulik personlighet — en dekorativ overskrift og en ren brødtekstskrift skaper naturlig visuelt hierarki.
Begrens skriftfamiliene
Hold deg til maksimalt 2–3 skriftfamilier. For mange skrifter gir en kaotisk og uprofesjonell design.
Prioriter lesbarhet
Brødtekst må være tydelig og lesbar i små størrelser. Velg skrifter optimalisert for skjermlesing.
Test på flere enheter
Det som ser flott ut på datamaskin, fungerer kanskje ikke på mobil. Forhåndsvis alltid i ulike skjermstørrelser.
Tilpass til merkevaren
Seriffskrifter formidler tradisjon og tillit; sans-serif virker moderne og tilgjengelig. Velg skrifter som uttrykker merkevarens stemme.
Tenk på skrifttykkelsen
Bruk ulike skrifttykkelser til å skape vekt og hierarki uten å legge til flere skriftfamilier.
Slik bruker du skriftparingsverktøyet
Finpuss typografisystemet i fire enkle steg. Grensesnittet er laget for designere, utviklere og produktteam som verdsetter hastighet og presisjon.
Steg 1: Velg overskriftsskrift
Velg en overskriftsskrift i panelet Skriftkontroller, for eksempel en dekorativ skrift eller en fet sans-serif som Archivo Black. Juster størrelse og tykkelse for å definere hierarkiet, og se endringer i sanntid.
Steg 2: Juster brødtekstskriften
Velg en utfyllende brødtekstskrift og juster størrelse, tykkelse og linjehøyde for optimal lesbarhet og balanse mellom overskrifter og avsnitt.
Steg 3: Finn inspirasjon med tilfeldig valg
Vil du utforske raskt, klikk på Velg tilfeldig for å lage utvalgte skriftkombinasjoner og se den oppdaterte forhåndsvisningen til høyre i arbeidsområdet.
Steg 4: Kopier ren CSS straks
Når typografisystemet er riktig, kopierer du generert CSS og limer den rett inn i stilarket for å bruke skriftparet på nettstedet.
Hvorfor bruke skriftparingsverktøyet
Skriftparingsverktøyet knytter kreativ utforsking til teknisk gjennomføring, slik at designere og utviklere kan arbeide raskere og beholde profesjonell kvalitet.
Visuell forhåndsvisning i sanntid
Se straks hvordan overskrifts- og brødtekstskrifter fungerer sammen, og vurder kontrast, hierarki og rytme før publisering.
Avanserte typografikontroller
Finjuster skriftstørrelse, tykkelse og linjehøyde for strukturerte oppsett med god lesbarhet og tilgjengelighet på alle enheter.
Utvalgte skriftpar for inspirasjon
Få ekspertvalgte kombinasjoner som klassiske seriff- og sans-serif-par eller moderne geometriske blandinger som fungerer godt i digitale grensesnitt.
CSS klar for produksjon
Eksporter ren og strukturert CSS som passer sømløst inn i designsystemet, sparer utviklingstid og sikrer et helhetlig uttrykk.