For en professionel hjemmeside skal du vælge en meget læsbar tekstskrifttype og højst en anden familie for at give karakter til titlerne. En simpel sans-serif er velegnet til de fleste steder; en serif kan forstærke et redaktionelt, premium eller kulturarvsbillede.
Guide skrevet af SiteQuiVend, specialist i oprettelse og redesign af hjemmesider og Shopify-butikker. Information opdateret i august 2026.
Hvordan genkender man en professionel skrifttype?
Professionalisme kommer fra et konsekvent typografisk system. Før du vælger et kendt navn, skal du evaluere de faktiske brugsbetingelser.
Læsbarhed
Bogstaverne skal forblive forskellige i små kroppe: observer især "i", "l", "I", tallene og accenterne. Test rigtige afsnit, ikke kun mærkenavnet.
Overensstemmelse med positionering
En skarp geometrisk kan fremkalde teknologi eller modernitet; en kontrasterende serif kan foreslå udgivelse eller high-end. Effekten skal understøtte tilbuddet uden at karikere det.
Tilstrækkeligt komplet familie
Tjek de fedtstoffer, der faktisk er tilgængelige, kursiv, franske accenter, eurosymbolet og sprogene på de målrettede markeder. En kunstigt fortykket variant giver sjældent et rent resultat.
Licens og tilgængelighed
En kommerciel skrifttype kræver en webvenlig licens. På Shopify afhænger de tilgængelige valg af temaet; en brugerdefineret skrifttype kan kræve teknisk integration.
Serif, sans-serif, display: hvilken familie skal man vælge?
| Family | Anbefalet brug | Hyppig effekt | Vagtsomhedspunkt |
|---|---|---|---|
| Sans-serif | Kroppe, menuer, knapper, grænseflader | Klar, moderne, direkte | Nogle geometri er kolde eller stramme i afsnit |
| Serif | Titler, redaktionelle, premium brands | Elegant, kulturel, etableret | Fine kontraster mister skarphed på den lille skærm |
| Display | Meget korte kroge | Særpræget, udtryksfuld | Undgå for afsnit, navigation og formularer |
| Minivan | Kode, data eller tekniske detaljer | Præcis, teknisk | Trættende som hovedskrifttype på et kommercielt websted |
| System | Hurtige steder og nøgterne grænseflader | Velkendt, effektiv | Gengivelsen varierer efter operativsystem |
I størstedelen af projekterne er en sans-serif til kroppen tilstrækkelig. Tilføj kun en anden familie, hvis det skaber et nyttigt hierarki. Multiplikation af skrifttyper gør ikke designet rigere: det fragmenterer siden.
Hvilke skrifttypeassociationer skal jeg bruge i praksis?
Disse kombinationer er retninger til at teste, ikke recepter. Deres tilgængelighed afhænger af dit tema, licens og hosting metode.
Ædru og alsidig
Inter for titler og tekst. Størrelser og fedtstoffer skaber hierarki uden at multiplicere filer. Denne løsning er velegnet til tjenester, SaaS og moderne butikker.
Moderne og tilgængeligt
Manrope for titlerne, Source Sans 3 for kroppen. Kontrasten forbliver diskret, med karakter i krogene og behagelig læsning.
Premium og redaktionel
Playfair Display til titler, Inter eller Lato til kroppen. Seriffen bringer karakter; sans-serif bevarer læsbarheden. Reserver Playfair til korte tekster.
Velkendt og kommerciel
Montserrat for titlerne, Open Sans for kroppen. Denne velkendte forening er klar. Hans personlighed vil hovedsageligt komme fra farver, billeder og layouts.
system-ui, -apple-system, "Segoe UI", sans-serif. Shopify anbefaler at overveje systemskrifttyper, der allerede findes på enheden, for at undgå download, der kan bremse butikken.Størrelser, fedtstoffer og mellemrum: skrifttypen er ikke nok
Professionel typografi er mere afhængig af hierarki end på familienavn. Her er startværdier for at tilpasse sig det faktiske skrifttypedesign.
Fælles tekst
Start omkring 16 px eller 1 rem, med en linjehøjde på 1,5 til 1,7. En visuelt lille skrifttype kan kræve mere.
Titler
Skab tydelige mellemrum mellem niveauer. På mobil undgår en væskeskala for høje afskårne ord og blokke.
Fedtstoffer
To eller tre vægte er nok: regelmæssig til teksten, semi-fed til referencerne, stærk til titlerne.
Læsebredde
Undgå afsnit, der løber hen over en hel storskærm. En moderat linje gør det nemmere at gå videre til den næste.
Shopifys anbefalinger om tilgængelighed angiver en minimumsstørrelse på 16 px og minder om, at to skrifttyper af samme størrelse kan forekomme forskellige. W3C kræver også, at indhold understøtter tekstforstørrelse uden tab eller overlapning.
Hvordan bevarer man hastighed og tilgængelighed?
Begræns filer
Indlæs kun de familier, vægte, stilarter og tegn, der bruges. Skrifttypen på et logo i billeder er ikke nødvendig overalt.
Vælg et webformat
For personlig integration skal du generelt vælge WOFF2 og give en tæt nødhjælpsfamilie.
Undgå usynlig tekst
font-display kontrollerer udskiftningen af beredskabspolitiet. Valget mellem swap, fallback eller optional afhænger af visuel og ydeevne kompromis.
Test ægte indhold
Kontrol accenter, priser, knapper, formularer og oversættelser, derefter newlines på 375 px og med zoom.
På Shopify justeres den overordnede typografi Netbutik → Temaer → Rediger tema → Temaindstillinger → Typografi. Tilgængelige skrifttyper bestemmes af temaudvikleren. Dupliker temaet før en større ændring og kontroller også kassesiden, som har sine egne indstillinger.
Nyttige referencer: shopify typografiske indstillinger, tilgængelighed af temaer og god webperformance praksis.
Typografiske fejl, der giver et amatøragtigt udseende
For mange forskellige familier
Tre eller fire konkurrerende skrifttyper forhindrer os i at forstå hierarkiet. Start med en enkelt familie, og retfærdiggør derefter hver tilføjelse.
En dekorativ font til kroppen
Håndskrift, smal eller meget kontrasterende, kan arbejde i en krog, men det trættes hurtigt i en beskrivelse, FAQ eller form.
Kontraster for svage
Et fint fedt i lysegrå på hvid baggrund ser elegant ud i en model, men bliver svært at læse på en lys skærm eller for en synshandicappet.
Skift uden at tjekke hele temaet
En ny skrifttype ændrer knapbredde, korthøjde og newlines. Inspicer hjem, samlinger, produkter, indkøbskurv, formularer og mobil.
Hvis din typografi er blot et af mange tegn på et aldrende design, så tjek det også ud tegn på, at en Shopify-butik mangler professionalisme og guiden til opgrader en gammel Shopify-butik.
Hvilken SiteQuiVend-tjeneste skal du vælge?
Tre anbefalinger fokuserede på stedets klarhed, tillid og erfaring. Denne første diagnose erstatter ikke en komplet revision.
3 enkle anmodninger inden for en times grænse, med første svar annonceret inden for 48 til 72 arbejdstimer. Gennemførlighed afhænger af tema og omfang.
5 nøglesider eller modeller, op til 10 produkter og 3 kollektioner, med en vejledende frist på 5 til 7 arbejdsdage efter modtagelse af de nødvendige elementer.
Licensering, tilpasset filintegration, kompleks udvikling og interventioner uden for pakken beregnes separat.
Tjekliste før validering af dit websteds skrifttyper
De 12 væsentlige kontroller
- En eller to familier maksimalt.
- Accenter og symboler er tilgængelige.
- Licensen tillader webbrug.
- Kroppen forbliver behagelig omkring 16 px eller mere.
- Titelniveauer er forskellige.
- Fedtstoffer erstatter ikke hierarki.
- Knapperne forbliver læsbare og ret brede.
- Kontrasten er tilstrækkelig på hver baggrund.
- Paragrafferne er ikke overdrevent brede.
- Unødvendige filer og fedtstoffer indlæses ikke.
- Siden opererer med en backup politistyrke.
- Hjem, produkt, indkøbskurv og mobil er blevet verificeret.
FAQ: Valg af skrifttyper fra et professionelt websted
Hvad er den bedste skrifttype til et professionelt websted?
Ingen er universelle. Inter, Manrope, Source Sans 3, Open Sans eller en systemstak er læsbare baser til at tilpasse sig mærket og temaet.
Hvor mange skrifttyper skal du bruge på et websted?
En komplet familie er ofte nok. To arbejder, hvis den ene strukturerer titlerne, og den anden letter kroppen. Ud over det bliver konsistens kompliceret.
Er en serif skrift professionel?
Ja, især for et redaktionelt eller premium univers. Vælg en læsbar tegning og reserver fine former til ret store tekster.
Hvilken skriftstørrelse skal man bruge på mobilen?
For kroppen er 16 px eller 1 rem et sikkert udgangspunkt. Tilpas den til skrifttypens visuelle højde.
Gør Google Fonts Slow Down et websted?
Enhver webskrifttype tilføjer potentielle filer. Virkningen afhænger af hosting, fedtstoffer, delmængder og visning.
Kan du tilføje en brugerdefineret skrifttype på Shopify?
Ja, afhængigt af tema og licens. En skrifttype, der mangler fra vælgeren, kan kræve filer og teknisk ændring.
Skal du bruge den samme skrifttype i Shopify betaling?
Konsistens er ønskelig i de tilgængelige muligheder. Betalingseditoren giver dig mulighed for at justere titlerne og kroppen.
Kan ændring af skrifttype være nok til at modernisere et websted?
Nogle gange. Hvis farver, mellemrum, komponenter og mønstre er inkonsekvente, vil skrifttypen alene ikke være nok.
