Typografi
Vår typografi är det som våra kunder möter och interagerar med allra mest i våra digitala kanaler; i allt från tågtyper, tågnummer, priser, spår, biljettinformation, informationsskyltar, avgångs- och ankomsttider. Därför är det en av de viktigaste bärarna av vår identitet och upplevelse i mötet med våra kunder.
Typografin i sig är rund och mjuk och symboliserar vår mänskliga öppna sida. Hur vi jobbar med typografin – konsekvent, hantverksmässigt, tydligt och läsbart – speglar pålitlighet, enkelhet och tillgänglighet.
SJ Sans med sina tre vikter utgör SJs primära typsnitt och ska användas i alla digitala kanaler där det är möjligt. Typsnittet är spärrat för att skapa bra ordbilder och vara lättläst, undvik därför i möjligaste mån att knipa eller spärra typografin ytterligare.
SJ Sans Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890(,.;:?!$&*)
SJ Sans Bold är vårt rubriktypsnitt. Det används också för att särskilja viktiga saker, så som tider och priser.
SJ Sans Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890(,.;:?!$&*)
Använd SJ Sans Medium som ett mellansteg mellan den feta rubriken och brödtexten. SJ Sans Medium får aldrig ersätta SJ Sans Bold som ensamt rubriktypsnitt, utan sätts i princip alltid i kombination med SJ Sans Bold.
SJ Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890(,.;:?!$&*)
SJ Sans Regular är vår standardvikt för all text som inte är rubrik eller mellanrubrik.
SJ Sans Regular Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890(,.;:?!$&*)
SJ Sans Regular Italic är den kursiva varianten av SJ Sans Regular.
Specialtecken
För kolumner med siffror finns det en möjlighet att använda tabellsiffror (tabular figures) i SJ Sans som ger ett lugnare intryck.
SJ Sans är även ritat med standardligaturer (common ligatures) och mjuka ligaturer (discretionary ligatures) – använd dessa när tekniken tillåter. Exempel på tabellsiffror och ligaturer:
Tabellsiffror
Standardligaturer
Mjuka ligaturer
Ersättningstypsnitt
För de tillfällen SJ Sans inte kan användas använder vi Arial som så kallat fallbacksnitt. Arial Bold ersätter både SJ Sans Medium och SJ Sans Bold. Samma fontstorlekar gäller.
Ett konsekvent användande av typografin skapar en igenkänning mellan olika sidor och ger ett lugnare helhetsintryck. Samma principer för teckenstorlekar och formatering bör därför användas för både redaktionella och mer funktionella sidor.
Tydliga hierarkier hjälper dessutom användaren att snabbare avkoda, värdera och ta till sig innehållet. Genom att variera text- och rubrikstorlekar kan innehållet viktas på rätt sätt – undvik därför att sätt all text på en vy i samma storlek, men utgå alltid från specificerade storlekar.
Exempel på konsekvent typografi för olika sidtyper:
Köpflöde
Modaltext i köpflöde
Redaktionell sida
Exempel på hierarkier & viktning:
Do
Tydliga typografiska hierarkier för innehållet.
Don't
Ingen visuell viktning av innehållet ger användaren sämre guidning.
Rubriker blir mer lättlästa om de balanseras. Brödtext blir mer lättläst om antal ensamma ord hålls till ett minimum.
Do
Rubrik med balansering.
Don't
Rubrik utan balansering.
Do
Brödtext med justering av ensamma ord.
Don't
Brödtext utan justering av ensamma ord.
Färre textstilar kommer ge oss ett mer enhetligt och konsekvent uttryck. Använd därför främst de stilar som är definierade nedan, oavsett om det är för en funktionell eller en redaktionell sida. Undvik att addera stilar annat än i undantagsfall.
Till varje storleksgrad finns det ett specificerat radavstånd. Med rätt använt radavstånd skapas luftigare sidor som förstärker typsnittets karaktär, dessutom blir texten lättare att läsa. Undvik att göra texten för liten – se storlekarna under 16 pixlar som undantagsfall.
I dagsläget är det bara huvudrubriken (Heading 1) som ändrar storlek i olika skärmstorlekar.
<Tabell med alla textstilar>
Versaler eller gemener?
Gemener (text satt i små bokstäver) upplevas ofta som mindre "hårt" än text som satt i versaler (stora bokstäver). Gemener är dessutom oftast mer lättlästa. Utgå därför från att gemener i de flesta fall är att föredra framför versaler.
Vänsterjusterad eller centrerad text?
Vänsterställd text är generellt lättare att läsa, därför är det vår föredragna justering. Centrerad text fungerar för kortare textstycken eller för enstaka rubriker. Vi kan även använda centrerad text för att bryta av och byta tempo i en längre redaktionell text, exempelvis som ett citat eller på en informationsplatta.
Baslinjelinjering
För att skapa en mer harmonisk layout bör texter som ligger på samma rad linjeras efter sina baslinjer.
Exempel på baslinjejustering:
Do
Tid och pris på samma baslinje skapar ett lugnare intryck
Don't
Tid och pris centrerat i höjd i förhållande till varandra gör att vyn upplevs som hoppig.
Att utnyttja sidans fulla bredd hjälper sällan användaren då text som sätts i en för bred kolumn blir oläslig. Undvik därför att skapa textkolumner med en bredd som överstiger 600 px vilket motsvarar en mening på cirka 60–70 tecken i SJ Sans 16 px.
Vår priskommunikation måste vara tydlig för besökaren. Ofta är priset något av det viktigaste på sidan och en tydlighet kring priser skapar trygghet hos kunden. Priser sätts huvudsakligen i bold och svart i någon av de specificerade rubrikstorlekarna, men för vissa kampanjpriser, sista minuten-priser eller lägsta pris i lågpriskalender använder vi färgen ”Höstlöv” (färgen ”Mörk höstlöv” för priser under 19 px).
Formatering
Oftast skrivs våra priser ut enligt modellen hela kronor och inga ören. Förkortningen SEK används vid engelsk kommunikation. För juridiska prisbeskrivningar, som kvitto, används SEK. För priser i löpande informell text används förkortningen kr.
Frånpriser
Frånpriser förkortas Fr. och läggs i mindre grad, alltid i svart, framför priset.
Specialpriser
Vi undviker ikoner framför våra specialpriser. Ikoner riskerar att skapa förvirring, dessutom finns ofta en platsbrist i digitala kanaler. Eftersom en ikon i sig sällan är självförklarande, är det bättre att rabattkategorin skrivs ut i klartext i anslutning till priset/biljetten. Kampanj-, lågpriskalender- och sista minuten-priser är det enda priser som hanteras annorlunda genom att de sätts i annan färg.
Exempel på prisformatering:
Do
Frånpriser och sista minuten på svenska respektive engelska i olika storlekar. Bra hierarki mellan Fr., siffror och :-/SEK.
Don't
Ikoner framför priser. Fr. i samma storlek som priset. Priser satta i vikten Regular. Andra kulörer än ”Höstlöv”.
Förklaring av specialpris/erbjudande på biljettnivå.