Forskare h?vdar att du har ca f?r att f?nga anv?ndarnas uppm?rksamhet innan de l?mnar din webbplats f?r ok?nda delar. S? du vill verkligen f? de f?rsta 10 sekunderna att r?knas (ingen ordlek).
Texten i rubrikomr?det p? din webbplats ?r en viktig informationsk?lla. Vad du s?ger ?r sj?lvklart viktigt, men det ?r ocks? viktigt att t?nka p? hur du s?ger det.
Typografi ?r r?sten f?r din webbplats. Att v?lja r?tt typografi hj?lper inte bara att kommunicera ditt budskap, utan det har ocks? f?rm?gan att p?verka tonen och till och med g?ra ditt varum?rke mer igenk?nnbart. Det ?r d?rf?r det finns ?ver 300,000 XNUMX typsnitt i v?rlden att v?lja mellan, allt fr?n klassiska till... ja, galna.
Den kanadensiska konstn?ren Jenny Shippers typsnitt ?r en ode till Federico Fellinis filmer
Med s? m?nga alternativ kan det vara en utmaning att hitta din egen r?tta stil, speciellt om du inte vet hur typsnitt fungerar tillsammans. I det h?r inl?gget kommer vi att g? ?ver n?gra av v?ra favorittypsnittskombinationer f?r att hj?lpa dig designa ett rubrikmeddelande som konverterar.
Alla exemplen nedan skapades med designverktyg som finns tillg?ngliga p? 51视频 Instant Site – en effektiv e-handelswebbplatsbyggare f?r att f? upp din butik och s?lja snabbt. L?s mer om Instant Sites designalternativ, eller att se det i aktion.
S? h?r ?ndrar du teckensnitt i 51视频 Instant Site-redigeraren:
- G? till fliken i din 51视频-kontrollpanel och klicka p? "Redigera;"
- V?lj "Rubrik & omslag;"
- Skriv in din butiks rubrik och beskrivning. V?lj din omslagslayout och ?ndra dess placering och justering om det beh?vs. H?rifr?n kan du ?ven ?ndra din bakgrund och uppmaningsknapp om s? ?nskas;
- Rulla ned och v?lj "Typografi;"
- V?lj teckensnittsfamiljer, f?rger och storlekar f?r din rubrik och beskrivning;
- Gl?m inte att trycka p? "Spara"-knappen n?r du ?r klar.
Spirax + Open Sans Condensed
Spirax ursprungliga kurvor ger rubriker en raffinerad men nyckfull look
Merriweather + Oswald
Merriweather ?r trevlig att l?sa p? sk?rmar med sina l?tt f?rt?tade bokstavsformer, robusta seriffer och ?ppna former. Det ?r perfekt i samklang med Oswald, ett typsnitt inspirerat av de klassiska gotiska och groteska stilarna fr?n det sena 19-talet och b?rjan av 20-talet. Denna sammankoppling kan passa en butik som s?ljer
Abril Fatface + Cabin
De tunna seriferna och
Montserrat + Merriweather
Montserrat ?r baserad p? urban typografi fr?n 20-talets f?rsta h?lft, kompletterad med Merriweathers l?tt f?rt?tade bokstavsform. Denna kombination skulle vara bra serverad i en v?ska eller sneakerbutik.
Overlock + Nunito
Overlocks rundade glyfformer skapar fantastiska titlar och korta texter
Playfair Display + Source Sans Pro
Den klassiska stilen p? Playfair Display ?r ?nnu mer framtr?dande n?r den paras ihop med Source Sans Pro, som skapades f?r att fungera bra i anv?ndargr?nssnitt. Denna tidl?sa kombination skulle fungera bra med butiker som specialiserat sig p? sk?nhetsprodukter f?r kvinnor eller kl?nningsbutiker.
Alegreya + Lato
Alegreyas dynamiska och varierade rytm ger fr?sch?r till sidan och s?tter ig?ng Latos
Rokkitt + Lato
Rokkitt designades f?r att anv?ndas som visningsteckensnitt i rubriker och rubriker. Kombinera det med
Kvicksand + Proxima Nova
Geometriska former ?r grunden f?r Quicksand, s? kombinera den med Proxima Novas moderna k?nsla f?r att ge din layout en ren, fr?sch touch. Om du s?ljer leksaker eller barnvagnar kan dessa typsnitt fungera bra f?r dig.
Oxygen + Maven Pro
Oxygen fungerar bra i alla grafiska anv?ndargr?nssnitt, station?ra datorer och enheter, speciellt i kombination med Maven Pros enkla l?sbarhet. Kolla in det h?r paret om din webbplats s?ljer glas?gon eller fitnessaccessoarer.
Dansmanus + Lato
Livligt och avslappnat Dancing Script ger din sida en v?nlig och informell touch, som framh?ver Latos klassiska proportioner och eleganta san serif-estetik. Present- och vykortsbutiker kan dra nytta av detta set.
Signika + Dosis
Signikas milda karakt?r fungerar utm?rkt f?r rubriker, medan Dosis g?r kompletterande texter ganska l?ttl?sta. Denna koppling fungerar f?r ett brett utbud av butiker, fr?n elektronik till blommor.
Reenie Beanie + Muli
Reenie Beanie ?r baserad p? basic
Questrial + Muli
San serif Muli ?r ett perfekt teckensnitt f?r br?dtext, och det ?r en diskret estetik som g?r att det passar bra med en m?ngd olika rubriktypsnitt: som Questrial med sin moderna stil och
Berkshire Swash + Proxima Nova
Berkshire Swash har en dj?rv men ?nd? mild stil, vilket ger en levande rubrik och ger en fantastisk balans med Proxima Novas enkla, moderna proportioner och geometriska utseende. Handgjorda kosmetika eller desserter skulle dra nytta av denna blandning.
Grunderna i teckensnittskombinationer
Hittade du inte det du letade efter i v?r lista? Om du k?nner dig kreativ kan du prova att leka med typsnitt och hitta din egen vackra teckensnittskombination.
H?r ?r n?gra grundl?ggande riktlinjer att f?lja:
- Skapa en kontrast mellan dina teckensnitt (fet & kursiv, L?G & kort)
- Kombinera serif och
san-serif typsnitt (som Libre Baskerville + Signika). - Anv?nd inte tv? liknande typsnitt (till exempel tv? kursiver) f?r b?de rubriken och br?dtexten. Att skapa variation kommer att dra blickarna till sig och hj?lpa din kund att engagera sig i varje avsnitt individuellt.
- F? typsnittet att matcha ditt varum?rke. Lekfulla handskrivna bokst?ver ?r f?rmodligen inte den b?sta passformen f?r ett premium smyckem?rke.
- Begr?nsa dig till
2-3 teckensnitt f?r att undvika att ditt inneh?ll verkar r?rigt.
L?s ocks?: 50 exemplariska onlinebutiker byggda med 51视频
- Hur du fixar din butiks navigering
- Allt du beh?ver veta om produktf?rs?ljning
- Online Merchandising: Hur man l?gger upp produkter i onlinebutiken
- Vad ?r Fashion Merchandising, och varf?r ?r det s? viktigt?
- 10 designfel i onlinebutiker
- 15 perfekta teckensnittskombinationer f?r din e-handelswebbplats
- F?rgteori: Allt du beh?ver veta om f?rgteman
- 7 kreativa idéer f?r din produktsida f?r e-handel
- Kraften i en hj?ltebild i webbdesign
M?ste-ha UX-principer att f?lja i en onlinebutik- Revision av webbdesign
- L?sa upp kraften i UX-design f?r e-handel
- Vad ?r skillnaden mellan UI och UX i e-handel?
