Logotypstorlekar för webbplatser, sociala medier och tryck

Det finns ingen enskild logotypstorlek som fungerar överallt. Behåll din logotyp som en vektormaster, en SVG eller PDF, som skalas till vilken storlek som helst utan att bli suddig, och exportera från den för varje plats den hamnar på: en SVG med storlek efter höjd för webbplatsens huvud, en kvadratisk version för profilbilder, en horisontell version för bannrar och en fil i 300 dpi för tryck. Det som ändras från plats till plats är ytan och hur mycket av den logotypen ska fylla.

Börja med en masterfil, inte en storlek

Vektorfiler beskriver former snarare än pixlar, så samma fil är skarp i en telefon och på en butiksfasad. Varje annan fil du gör ska exporteras från den här mastern, aldrig från en skärmbild eller en gammal PNG. Om du bara har en liten rasterlogotyp, låt rita om den som vektor före allt annat, för det sparar dig besvär i varje jobb efteråt.

Logotypstorlek för webbplatser

På en webbplats ska logotypen storleksätts efter höjd, inte bredd, så att ett brett ordmärke och en kompakt symbol ligger på samma baslinje i ditt huvud. Använd SVG så att den förblir skarp på skärmar med hög pixeltäthet och ge den en vettig maxbredd för små telefoner.

<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>

Din favicon är en separat, kvadratisk, förenklad fil, inte den hela logotypen förminskad. Webbläsare visar den i mycket små storlekar, så den blir oftast en enda bokstav eller symbol. Favicon-design listar de exakta filerna, och Googles riktlinjer för favicon kräver en kvadratisk ikon i en multipel av 48 pixlar.

Logotypstorlek för sociala medier

Sociala plattformar använder din logotyp på två mycket olika ställen: den lilla profilbilden och det breda omslaget eller bannern. De behöver olika versioner av logotypen, inte samma fil hoptryckt.

Profilbilder

• Ladda upp en kvadratisk bild. De flesta plattformar beskär profilbilder till en cirkel, så hörnen försvinner.
• Använd din ikon- eller staplade version, inte en lång horisontell lockup. Ett brett ordmärke blir oläsligt i en liten cirkel.
• Håll logotypen inom ungefär mittersta två tredjedelarna av kvadraten, med jämnt avstånd runt om.
• Lägg den på en enfärgad eller lugn bakgrund som fyller kvadraten, så att cirkeln ser avsiktlig ut.
• Kontrollera den i verklig storlek i din egen telefon innan du byter den överallt.

Omslag och bannrar

Omslagsbilder är breda och beskärs olika på telefoner och datorer, och profilbilden överlappar ofta ett hörn. Håll logotypen och orden nära mitten och låt bakgrunden bära ut till kanterna.

I inlägg är logotypen en signatur, inte rubriken. En bra utgångspunkt är att hålla den liten, i ett konsekvent hörn, i samma storlek i varje inlägg, så att den bygger igenkänning utan att konkurrera med budskapet. Bildstorlekar för sociala medier har varje inläggsstorlek.

Logotypstorlekar för e-post och tryck

E-post är den krångliga: många e-postappar visar inte SVG-bilder, så använd en transparent PNG. Exportera den i dubbla bredden mot den du vill visa den i och sätt sedan visningsbredden i HTML, så att den förblir skarp på telefonskärmar med hög pixeltäthet. För tryck, läs bildupplösning för tryck innan du skickar något till ett tryckeri, och se design av e-postsignatur för själva signaturen.

Gör varje storlek från en design

Det tråkiga med logotypstorlekar är inte logotypen, utan att bygga om omslaget, inlägget, storyn och kortet runt den varje gång. I Gradiently kan du be Designer om de andra storlekarna, eller med Pro ändra storlek på en design till alla storlekar i ett steg, och din bakgrund renderas på nytt i varje form i stället för att beskäras. Egna storlekar går från 200 till 8 000 pixlar när en leverantör ber om något ovanligt. Logotypvarianter tar upp vilken version av logotypen som ska in i varje.