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Ă„ șÚÁÏĂĆ Instant Site - en gratis och effektiv e-handelswebbplatsbyggare för att fĂ„ din butik att sĂ€lja snabbt. LĂ€s mer om Instant Sites designalternativ, eller att se det i aktion.
SĂ„ hĂ€r Ă€ndrar du teckensnitt i șÚÁÏĂĆ Instant Site-redigeraren:
- GĂ„ till fliken i din șÚÁÏĂĆ-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 șÚÁÏĂĆ
- 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
ČŃĂ„ČőłÙ±đ-łóČč 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?
