Grafisk profil del 2: Typsnitt

Typsnitten utgör en stor del av det visuella intrycket av ditt varumärke. De behöver passa bra ihop med ditt bildspråk och färgschema. Att välja rätt typsnitt är lika viktigt som att inte välja fel typsnitt, för tänk dig t.ex. att texten är för liten eller för svårläst på en hemsida, då orkar man ju inte riktigt vara där...

Vi kommer välja 2-4 typsnitt för vår grafiska profil. Ett typsnitt för brödtexten, d.v.s. den minsta texten som utgör de långa texterna på din sajt. Ett annat typsnitt för rubriker. Sedan kan det hända att vi vill ha ytterligare ett rubriktypsnitt för rubriker i andra storlekar, och att vi kanske vill ha ett separat typsnitt för vår logga. Men mer än 4 typsnitt avråder jag starkt ifrån. Intrycket blir för rörigt då.

Hur fasen ska man tänka när man väljer typsnitt då? Det finns ju hur många som helst. Och hur kombinerar man dem på bästa sätt? Det ska vi prata om härnäst, och jag ska visa hur jag tänker när jag väljer typsnitt för min exempelsajt.

Så får du tag på typsnitt

För det första: var är bäst att leta efter och jämföra typsnitt?

I Squarespace så ingår ett stort antal typsnitt från Google Fonts och Adobe Typekit. Skillnaden här är att Google Fonts typsnitt är gratis för vem som helst att använda, medan Adobe Typekit kräver betalabonnemang eller engångsköp av typsnittslicenser. Detta behöver du inte tänka om du använder Typekit-typsnitt på din sajt, för licenserna ingår i ditt Squarespace-abonnemang. Men om du vill kunna använda samma Typekit-typsnitt utanför din sajt, t.ex. i Canva eller Photoshop, så behöver du köpa och ladda ner dessa typsnitt och ladda upp dem i Canva och på din dator.

Det här är en jobbigt dilemma och det enklaste sättet att ta sig runt det är att försöka välja typsnitt som redan finns både i Squarespace och Canva, eller som hör till Google Fonts, så att du kan ladda ner typsnittet gratis därifrån och installera det i Canva.

Men, om du fullkomligt kärat ner dig i ett typsnitt och har några hundralappar att spendera, så för all del, köp det! Dina typsnitt, särskilt de du använder i din logga och i stora rubriker, är en stor del av din visuella identitet, så det är viktigt att de känns helt rätt.

Så väljer du typsnitt

Okej, så hur väljer man ut typsnitt då?

Ett bra sätt är att gå till Google Fonts och skriva in namnet på din sajt eller ditt företag, eller någon annan exempeltext, och se denna text visas i alla Google Fonts typsnitt:

Här har jag helt enkelt ändra texten i en av rutorna för ett typsnitt och sen klickat på "Apply to all fonts". Sen är det bara att scrolla och klicka på +-knappen för de typsnitt du gillar för att kunna sålla bland dem senare.

Och hur avgör man vilka typsnitt som passar?

Canva har ett jättebra hjälpmedel för att hitta bra typsnittskombinationer. Och även en inspirationsguide. Så om du känner dig jätteosäker, ta hjälp av dessa! Det är så jag lärt mig hur jag ska para ihop typsnitt.

Om du vill välja helt själv, här är tre grundregler:

Regel nummer 1: Välj kontrasterande typsnitt

Dina typsnitt ska inte vara för snarlika, utan ska komplettera varandra. Om ett av dina typsnitt har serifer (t.ex. Times New Roman) eller är lite snirkligare (t.ex. Pacifico), välj ett sans-serif (t.ex. Arial) och rakt typsnitt som nummer två. Om ditt ena typsnitt är helt i versaler, låt det andra vara i gemener. Om ett av dina typsnitt har höga, täta bokstäver (t.ex. Oswald), låt det andra vara luftigare och bredare. Om ett av dina typsnitt har feta, svarta bokstäver, låt ditt andra vara tunnare. Du kan också testa att låta något av dina typsnitt vara kursiva, som kontrast mot ett rakare typsnitt.

Regel nummer 2: Se till att dina texter går att läsa

De typsnitt du väljer, särskilt för dina långa texter, bör inte vara för fancy. Läsaren ska kunna se vad det står utan att anstränga blicken, och ska kanske kunna läsa långa mängder text, på en dator- eller mobilskärm. Då behöver typsnittet vara så lättläst som möjligt. För din brödtext, välj ett rakt och enkelt typsnitt, helst utan serifer. T.ex. Verdana, Arial, Open Sans eller Source Pro. Du kan ta ut svängarna mer med dina rubriktypsnitt.

Regel nummer 3: Testa typsnittet på ditt språk

Det är viktigt att testa typsnittet med egen exempeltext, så att du får en tydligare bild av hur det kommer att funka på ditt språk och med dina slags rubriker. Här kanske du upptäcker att ditt favorittypsnitt inte har stöd för å, ä och ö. Eller att vissa ord blir svårlästa eller ser konstiga ut.

När du gjort ditt första urval klickar du upp menyn nere till höger för att se vilka typsnitt du valt, och där klickar du på Share-symbolen i rutans övre högerkant:

Då hamnar du på en sida där du bara ser dina valda typsnitt och kan laborera vidare med olika texter för att bestämma dig:

Testa t.ex. att skriva in din text i bara stora bokstäver och se hur det ser ut.

När du gjort dina val kan du ladda ner dem genom att klicka upp rutan från botten av sidan igen och denna gång klicka på Ladda ner-symbolen. Du får då en komprimerad fil med dina typsnitt och när du packat upp den hittar du filerna för dina typsnitt. Dessa kan du sen ladda upp i Canva genom att gå till fliken Your Brand i vänstermenyn och under "Uploaded fonts" till höger, ladda upp dina filer. Sen har du tillgång till typsnitten i Canva! Dubbelkolla dock innan du laddar ner från Google Fonts, för det kan ju hända att typsnitten redan finns i Canva.

Åter till min exempelsajt och dess grafiska profil. Jag skapar en ny sida i dokumentet och sätter rubriken "Typografi". Sen skapar jag exempeltexter för mina tre bas-typsnitt:

Screen Shot 2018-01-17 at 13.11.45.png

Här kommer Canvas snabbknappar för rubriker och text till nytta. För texten gillar jag att lägga in några meningar, så att man tydligare ser hur läsbart typsnittet kommer vara. För detta använder jag mig av så kallad "Lipsum"-text: påhittad skräptext som ofta används av designers innan det finns riktig text att lägga in. På den här sidan kan du generera Lipsum-text att kopiera och klistra in: https://www.lipsum.com

Sen skrider jag till verket med att testa fram och tillbaka med olika typsnitt och typsnittskombinationer. Här hoppar jag mycket mellan Canva och Squarespace, eftersom jag vill se direkt på sajten hur typsnitten ter sig. Jag letar ofta typsnitt i Canva och när jag hittar något jag gillar så kollar jag om det finns i Squarespace. Testar det då direkt på sajten genom att klicka in på Design i huvudmenyn och vidare in på Style Editor (ett verktyg vi ska bekanta oss mer med i ett kommande avsnitt.)

Så här ser det ut inne i Style Editor:

Jag kan klicka på en text på min sajt till höger och får då upp alla designinställningar jag kan göra för det elementet i listan till vänster. I mitt fall navigerar jag in på min blogg, för där ser jag olika slags texter och rubriker. Sen klickar jag in på Style Editor, klickar på de olika texterna jag ser och ändrar deras typsnitt med inställningarna:

Jag vill ha mina största rubriker, samt sajtnamn, i ett rakt och rejält typsnitt i bara versaler (uppercase). Då passar det bra att kombinera det med underrubriker i ett kursivt serif-typsnitt. Jag testar mig fram till Oswald + Libre Baskerville och gillar vad jag ser. För texten väljer jag Montserrat, ett lättläst sans-serif-typsnitt:

Screen Shot 2018-01-17 at 13.37.44.png

Sådär, jag är nöjd med mina typsnitt, iallafall tillsvidare! Det kan ta ett tag att mecka sig fram till rätt kombination, och du kommer kanske ändra dig flera gånger senare, men det är bra att ha en utgångspunkt.