# Logotypvarianter: primär, staplad, ikon och enfärgad

[Canonical HTML page](https://gradiently.design/sv/guide/logo-variations)

En logotyp kan inte passa en bred banner, en pytteliten cirkel och en gummistämpel. En liten familj av logotypvarianter kan. Det här är uppsättningen de flesta varumärken behöver, och reglerna som får den att se ut som en logotyp.

## The short version

- Logotypvarianter är olika arrangemang och färgsättningar av samma logotyp, gjorda så att den passar varje yta den visas på.
- En typisk uppsättning har en primär logotyp, en horisontell version, en staplad version, en ikon eller ett submärke samt enfärgade versioner i svart och vitt.
- Varje variant ska dela samma bokstavsformer, symbol och färger, så att de läses som en logotyp och inte som flera.
- Ikonen eller submärket är versionen som används för profilbilder, favicons och andra små kvadratiska ytor.
- Skriv ned vilken variant som hör hemma var, så att ingen behöver gissa eller sträcka den primära logotypen för att den ska passa.

**Logotypvarianter** är de olika versionerna av en logotyp, arrangerade och färgsatta för att passa olika ytor. De flesta varumärken behöver fem: en primär logotyp, en horisontell lockup för breda ytor, en staplad version för kvadratiska, en ikon eller ett submärke för små ytor och enfärgade versioner i svart och vitt. Byggda av samma delar låter de logotypen se rätt ut i en banner, en profilbild och en enfärgad stämpel utan att någonsin sträckas eller tryckas ihop.

## Därför räcker inte en logotyp

En logotyp designad för en butiksskylt är oftast för bred för en profilbild och för detaljerad för en favicon. När det bara finns en fil improviserar folk: de förminskar den tills den är oläsbar, trycker ihop den för att den ska passa eller lägger den på en bakgrund där den försvinner. Varianter löser det i förväg. Du bestämmer en gång hur logotypen anpassar sig, och alla följer samma svar.

## De fem logotypvarianter de flesta varumärken behöver

| Variant | Vad det är | Använd till |
| --- | --- | --- |
| Primär | Hela logotypen som den designades, oftast symbol plus namn | Webbplatsens huvud, skyltning, första sidan i dokument |
| Horisontell | Symbolen till vänster om namnet, på en rad | Bannrar, e-posthuvuden, smala navigeringsfält |
| Staplad | Symbolen ovanför namnet, centrerad | Kvadratiska inlägg, förpackningsetiketter, profilprodukter |
| Ikon eller submärke | Enbart symbolen eller initialerna | Profilbilder, favicons, appikoner, vattenstämplar, klistermärken |
| Enfärgad | Vilken som helst av ovanstående i helsvart eller helvitt | Enfärgstryck, foton, prägling, stämplar, mörka eller livliga bakgrunder |

Din primära logotyp kan redan vara horisontell eller staplad. Då behöver du det andra arrangemanget, plus ikonen och de enfärgade versionerna.

Vissa varumärken lägger till en version med **enbart ordmärke**, namnet utan symbolen, för ställen där symbolen skulle vara för liten för att läsas. Och en **märkes**- eller emblemversion kan vara användbar för klistermärken och förpackningssigill. Ingen av dem är nödvändig första dagen.

## Matcha varje variant med sin yta

Ytans form avgör varianten. Breda ytor tar den horisontella lockupen, kvadratiska tar den staplade versionen eller ikonen, och allt mindre än en miniatyr får enbart ikonen.

- E-posthuvud 1200×600: horisontell: 1200 × 600
- Instagram-kvadrat 1080×1080: staplad: 1080 × 1080
- Story 1080×1920: staplad eller ikon: 1080 × 1920
- LinkedIn-banner 1584×396: horisontell: 1584 × 396

Ytans form talar om vilken version du ska ta. En staplad logotyp i en smal banner slösar det mesta av ytan, och en horisontell i en kvadrat blir liten.

Ett brett e-posthuvud med namnet Fern Studio på en rad och en kort rad om nyheter, på en grön gradient

I ett brett e-posthuvud löper namnet på en rad och ytan läses naturligt.

Ett kvadratiskt Instagram-inlägg med ordet Studio ovanför ett stort Fern, staplat och centrerat på samma gröna gradient

I en kvadrat fyller det staplade arrangemanget ramen och förblir stort nog att läsa.

## Färgvarianter: fullfärg, omvänd och mono

Varje arrangemang behöver färgversioner också. Du behöver inte varje kombination, men du behöver de här fyra, så att logotypen har ett svar för ljusa bakgrunder, mörka bakgrunder och enfärgstryck.

- Fullfärg på ljust: #14532d
- Omvänd på mörkt: #f7f3ea
- Mono svart: #111111
- Mono vit: #ffffff

Ormbunksgrönt för vardagsbruk, en varm pappersversion för mörka bottnar och rent svart och vitt för stämplar, foton och enfärgsjobb.

På gradienter och foton är den enfärgade vita eller svarta versionen ofta rätt val, eftersom en tvåfärgad logotyp kan krocka med det som ligger bakom. [Logotyp på gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background) visar hur du väljer mellan dem, och [idéer för logotypbakgrund](https://gradiently.design/sv/guide/logo-background-ideas) har bakgrunder som passar en enkel logotyp.

## Så bygger du en uppsättning logotypvarianter

1. **Börja från den primära logotypen i vektor** Varje variant arrangeras om från samma masterdelar. Rita aldrig om symbolen eller sätt om namnet i en annan vikt.
2. **Gör de horisontella och staplade lockuperna** Flytta symbolen bredvid eller ovanför namnet. Fastställ avståndet mellan dem som ett mått, till exempel höjden på namnets versaler.
3. **Förenkla ikonen** Ta symbolen eller initialerna för sig, ta bort fina detaljer och förtjocka tunna linjer. Den måste läsas i mycket små storlekar, så testa den som [favicon](https://gradiently.design/sv/guide/favicon-design).
4. **Skapa färgversionerna** Fullfärg, omvänd, svart och vit för varje arrangemang. Kontrollera den omvända versionen på din mörkaste varumärkesfärg.
5. **Ange fri yta och minimistorlekar** Definiera den tomma marginalen runt varje version och den minsta storlek den får användas i, i pixlar för skärmar och millimeter för tryck.
6. **Exportera och namnge filerna tydligt** SVG, PDF och transparent PNG för varje, med namn som `fern-stacked-reversed.svg` så att folk väljer rätt utan att öppna den.

## Regler som får varianter att se ut som en logotyp

### Undvik

- Att sträcka eller trycka ihop en version för att den ska passa en yta
- Att rita om ikonen olika för varje plattform
- Nya färger som bara finns i en variant
- Att lägga till slogans på vissa versioner och inte andra på måfå
- Att använda den primära logotypen där ikonen hör hemma

### Gör så här

- Välj den variant vars form matchar ytan
- En ikon, använd överallt där en liten kvadrat behövs
- Samma palett genom hela uppsättningen
- Behandla en lockup med slogan som en egen dokumenterad variant
- Respektera fri yta och minimistorlekar

Dokumentera uppsättningen på en enda sida i din [varumärkesmanual](https://gradiently.design/sv/guide/brand-style-guide): varje variant, dess färgversioner, fria yta, minimistorlek och var den används. Lägg sedan filerna där folk faktiskt designar. I Gradiently rymmer varumärkeskitet flera logotyper sida vid sida, så den staplade versionen, ikonen och den omvända filen ligger ett klick bort i Studio, och Designer kan tillämpa kitet när den lägger ut en design. [Varumärkeskit](https://gradiently.design/sv/guide/brand-kit) tar upp resten av det som hör hemma bredvid dem.

## FAQ

### Vad är logotypvarianter?

De är alternativa versioner av en logotyp, som horisontell, staplad, ikon och enfärgad, gjorda så att logotypen passar varje yta utan att förvrängas.

### Hur många logotypvarianter behöver jag?

De flesta varumärken behöver ungefär fem: primär, horisontell, staplad, en ikon eller ett submärke samt svartvita versioner. Lägg bara till fler när ett verkligt behov finns.

### Vad är en submärkeslogotyp?

Ett submärke är en förenklad, oftast kompakt version av logotypen, ofta initialer eller enbart symbolen, som används på små ytor som profilbilder, favicons och klistermärken.

### Vad är en responsiv logotyp?

En responsiv logotyp är en uppsättning varianter som förenklas när ytan krymper, från hela lockupen på stora skärmar till bara ikonen i de minsta storlekarna.

### Vilken logotypvariant ska jag använda för en profilbild?

Använd ikonen eller submärket, eller den staplade versionen om den är kort, på en kvadratisk bakgrund. Breda horisontella logotyper blir oläsliga i en liten cirkel.