Fonter och färger

Fonter och färger utgör några av de viktiga pusselbitarna på malmo.se. Det är viktigt för helhetsintrycket och för att skapa igenkänning att vi använder rätt fonter, rätt viktningar och rätt färger.

Fonter och viktningar

Vi har ett fem olika vanligt förekommande formatmallar (Rubrik 1, Rubrik 2, Rubrik 3, Ingress, Brödtext). I listan nedan ser du specifikationerna. Du ska inte ändra dessa fonter och viktningar med exempelvis fetstil eller kursivering.

Viktningarna är framtagna för att fungera väl ihop för god läsbarhet och är dessutom skapade med en framtida ny visuell identitet i åtanke, vilket innebär att korrekt användning av formatmallarna kommer ge möjlighet att snabbt och enkelt ställa om till en ny identitet.

Rubrik 1

Open sans - 44 - 48 - 500


Rubrik 2

Open sans - 32 - 39 - 500


Rubrik 3

Open sans - 25 - 30 - 500


Ingress

Open sans - 24 - 42 - 200


Brödtext

Open sans - 18 - 32 - 400

Färger

På malmo.se använder vi i första hand färger i två olika sammanhang. Dels för att med hjälp av olikfärgade bakgrunder skapa dynamik och översikt och dels för att dra fokus till särskilda saker i form av knappar. Det är dock möjligt att använda färger även i andra sammanhang, även om man ska vara försiktig så att man inte skapar onödig röra och brus.

Bakgrundsplattor

Vi använder i huvudsak fem olika färger för att skapa bakgrundsplattor. Det är ljusa färger, för att texter och andra element som läggs på plattforna ska ha en bra kontrast mot bakgrunden.

#d7f1f6
#def1d3
#eed0e8
#faf7c0
#e9e9e9

Knappar och andra grafiska element

Vi använder i huvudsak fyra olika färger för att skapa knappar. Det är mörka färger, för att de ska ha en bra kontrast mot bakgrunden där de ligger - men också för att texten på knappen ska ha bra konstrast mot själva knappen.

Generellt gäller att grön färg används för att göra så kallad "Call to action" eller primärknapp. Det är alltså den viktigaste knappen på sidan där den används. Det kan exempelvis innebära att länka upp en e-tjänst eller knappen "Skicka" om det är ett formulär.

Blå färg används i första hand för vanliga länkar, exempelvis en länk till en annan sida på malmo.se eller till en annan webbplats.

Röd och svart används inte särskilt ofta och har än så länge inga dedikerade användningsområden (man klarar sig gott och väl med grön och blå, så använd i första hand dem).