For et profesjonelt nettsted, velg en veldig lesbar tekstfont og på det meste en annen familie for å gi karakter til titlene. En enkel sans-serif passer for de fleste nettsteder; en serif kan forsterke et redaksjonelt, premium eller arv bilde.
Guide skrevet av SiteQuiVend, spesialist i opprettelse og redesign av nettsteder og Shopify-butikker. Informasjon oppdatert i august 2026.
Hvordan gjenkjenne en profesjonell font?
Profesjonalitet kommer fra et konsistent typografisk system. Før du velger et kjent navn, må du vurdere de faktiske bruksforholdene.
Lesbarhet
Bokstavene må forbli forskjellige i små kropper: observer spesielt "i", "l", "I", tallene og aksentene. Test ekte avsnitt, ikke bare merkenavnet.
Konsistens med posisjonering
En skarp geometrisk kan fremkalle teknologi eller modernitet; en kontrasterende serif kan foreslå publisering eller high-end Effekten må støtte tilbudet uten å karikere det.
Tilstrekkelig komplett familie
Sjekk de faktisk tilgjengelige fettene, kursiv, franske aksenter, eurosymbolet og språkene i de målrettede markedene En kunstig fortykket variant gir sjelden et rent resultat.
Lisens og tilgjengelighet
En kommersiell font krever en nettvennlig lisens På Shopify avhenger valgene som er tilgjengelige av temaet; en tilpasset font kan kreve teknisk integrasjon.
Serif, sans-serif, display: hvilken familie å velge?
| Familie | Anbefalt bruk | Hyppig effekt | Punkt for årvåkenhet |
|---|---|---|---|
| Sans-serif | Karosserier, menyer, knapper, grensesnitt | Klar, moderne, direkte | Noen geometrier er kalde eller stramme i avsnitt |
| Serif | Titler, redaksjonelle, premium merker | Elegant, kulturell, etablert | Fine kontraster mister skarphet på den lille skjermen |
| Display | Svært korte kroker | Særpreget, uttrykksfull | Unngå for avsnitt, navigasjon og skjemaer |
| Minivan | Kode, data eller tekniske detaljer | Presis, teknisk | Slitsomt som hovedfont på en kommersiell side |
| System | Raske nettsteder og nøkterne grensesnitt | Kjent, effektiv | Gjengivelse varierer etter operativsystem |
I de fleste prosjekter er en sans-serif for kroppen tilstrekkelig Legg til en annen familie bare hvis den skaper et nyttig hierarki. Multiplisering av fonter gjør ikke designet rikere: det fragmenterer siden.
Hvilke skriftassosiasjoner bør jeg bruke i praksis?
Disse kombinasjonene er retninger for å teste, ikke resepter Deres tilgjengelighet avhenger av ditt tema, lisens og hosting metode.
Nøktern og allsidig
Inter for titler og tekst. Størrelser og fett skaper hierarki uten å multiplisere filer Denne løsningen passer for tjenester, SaaS og samtidsbutikker.
Moderne og tilgjengelig
Manrope for titlene, Source Sans 3 for kroppen. Kontrasten forblir diskret, med karakter i krokene og behagelig lesing.
Premium og redaksjonell
Playfair Display for titler, Inter eller Lato for kroppen. Serifen bringer karakter; sans-serifen bevarer lesbarheten Reserver Playfair for korte tekster.
Kjent og kommersiell
Montserrat for titlene, Open Sans for kroppen. Denne kjente assosiasjonen er tydelig Hans personlighet vil hovedsakelig komme fra farger, bilder og layouter.
system-ui, -apple-system, "Segoe UI", sans-serif. Shopify anbefaler å vurdere systemfonter, som allerede finnes på enheten, for å unngå nedlasting som kan bremse butikken.Størrelser, fett og avstand: skriften er ikke nok
Profesjonell typografi er mer avhengig av hierarki enn på familienavn. Her er startverdier for å tilpasse seg selve skriftdesignet.
Felles tekst
Start rundt 16 px eller 1 rem, med en linjehøyde på 1,5 til 1,7. en visuelt liten skrift kan kreve mer.
Titler
Skap tydelige gap mellom nivåene På mobil unngår en flytende skala kutte ord og blokker som er for høye.
Fett
To eller tre vekter er nok: vanlig for teksten, halvfet for referansene, sterk for titlene.
Lesebredde
Unngå at avsnitt går over en hel storskjerm En moderat linje gjør det lettere å gå videre til neste.
Shopifys tilgjengelighetsanbefalinger angir en minimum kroppsstørrelse på 16 px og minner om at to fonter av samme størrelse kan virke forskjellige W3C krever også at innhold støtter tekstforstørrelse uten tap eller overlapping.
Hvordan bevare fart og tilgjengelighet?
Begrens filer
Last bare familiene, vektene, stilene og tegnene som brukes. Skriften på en logo i bilder er ikke nødvendig overalt.
Velg et webformat
For personlig integrering, velg vanligvis WOFF2 og gi en nær avlastningsfamilie.
Unngå usynlig tekst
font-display sjekker utskifting av utrykningspolitiet Valget mellom swap, fallback eller optional avhenger av visuelle og ytelseskompromiss.
Test ekte innhold
Kontroller aksenter, priser, knapper, skjemaer og oversettelser, og deretter nylinjer på 375 px og med zoom.
På Shopify justeres den generelle typografien Nettbutikk → Temaer → Rediger tema → Temainnstillinger → Typografi. Tilgjengelige fonter bestemmes av temautvikleren.Dupliser temaet før en større endring og kontroller også kassasiden, som har sine egne innstillinger.
Nyttige referanser: shopify typografiske innstillinger, tilgjengelighet av temaer og god praksis for webytelse.
Typografiske feil som gir et amatørmessig utseende
For mange forskjellige familier
Tre-fire konkurrerende fonter hindrer oss i å forstå hierarkiet Start med en enkelt familie, og begrunn deretter hvert tillegg.
En dekorativ font for kroppen
Håndskrift, smal eller svært kontrasterende, kan fungere i en krok, men det raskt dekk i en beskrivelse, FAQ eller form.
Kontraster for svake
Et fint fett i lys grå på hvit bakgrunn ser elegant ut i en modell, men blir vanskelig å lese på en lys skjerm eller for en synshemmet person.
Endre uten å sjekke hele temaet
En ny font endrer knappebredde, korthøyde og newlines Inspiser hjem, kolleksjoner, produkter, handlekurv, skjemaer og mobil.
Hvis typografien din bare er ett av mange tegn på et aldrende design, sjekk det også tegn på at en Shopify-butikk mangler profesjonalitet og guiden for oppgrader en gammel Shopify-butikk.
Hvilken SiteQuiVend-tjeneste bør du velge?
Tre anbefalinger fokusert på klarhet, tillit og erfaring på stedet. Denne første diagnosen erstatter ikke en fullstendig revisjon.
3 enkle forespørsler innenfor grensen på en time, med første svar annonsert innen 48 til 72 arbeidstimer Gjennomførbarhet avhenger av tema og omfang.
5 nøkkelsider eller modeller, inntil 10 produkter og 3 kolleksjoner, med en veiledende frist på 5 til 7 virkedager etter mottak av nødvendige elementer.
Lisensering, tilpasset filintegrasjon, kompleks utvikling og intervensjoner utenfor pakken koster separat.
Sjekkliste før du validerer nettstedskriftene dine
De 12 essensielle kontrollene
- En eller to familier maksimalt.
- Aksenter og symboler er tilgjengelige.
- Lisenstillatelser webbruk.
- Kroppen forblir komfortabel rundt 16 px eller mer.
- Tittelenivåer er forskjellige.
- Fett erstatter ikke hierarki.
- Knappene forblir lesbare og ganske brede.
- Kontrasten er tilstrekkelig på hver bakgrunn.
- Avsnittene er ikke overdrevent brede.
- Unødvendige filer og fett er ikke lastet inn.
- Nettstedet opererer med en reservepolitistyrke.
- Hjem, produkt, handlekurv og mobil er verifisert.
Vanlige spørsmål: Velge fonter fra et profesjonelt nettsted
Hva er den beste fonten for et profesjonelt nettsted?
Ingen er universelle Inter, Manrope, Source Sans 3, Open Sans eller en systemstack er lesbare baser for å tilpasse seg merkevaren og temaet.
Hvor mange fonter bør du bruke på et nettsted?
En komplett familie er ofte nok To arbeider hvis den ene strukturerer titlene og den andre letter kroppen Utover det blir konsistensen komplisert.
Er en serif-font profesjonell?
Ja, spesielt for et redaksjonelt eller premium univers Velg en lesbar tegning og reserver fine former til ganske store tekster.
Hvilken skriftstørrelse skal brukes på mobil?
For kroppen er 16 px eller 1 rem et sikkert utgangspunkt Tilpass den til skriftens synshøyde.
Gjør Google Fonts bremse ned et nettsted?
Enhver webfont legger til potensielle filer. Påvirkning avhenger av hosting, fett, delsett og visning.
Kan du legge til en egendefinert skrift på Shopify?
Ja, avhengig av tema og lisens.En skrift som mangler fra velgeren kan kreve filer og teknisk modifikasjon.
Bør du bruke samme font i Shopify-betaling?
Konsistens er ønskelig i de tilgjengelige alternativene Betalingsredigeringsprogrammet lar deg justere titlene og kroppen.
Kan det å endre skrift være nok til å modernisere et nettsted?
Noen ganger.Hvis farger, mellomrom, komponenter og mønstre er inkonsekvente, vil ikke skriften alene være nok.
