Din logotyp, som en webbtypligatur

Låt oss titta på ett alternativt sätt att visa logotyper på en webbsida. Normalt kommer du att nå utmaningen genom att använda en märka. Kanske ska du använda bildutbyte via CSS, kanske du ens vågar in i SVG-filer, men har du övervägt vad som är möjligt genom att designa din egen webbfontligatur?


Betydelsen av exakt märkning

Först upp, ett snabbt ord om branding. Visuell identitet (när den görs ordentligt) är utformad mycket grundligt och mycket specifikt. Typografi, färger, whitespace, varianter - ta en titt på företagets varumärkesriktlinjer för en produkt eller ett företag och du kommer snabbt att bli medveten om de små marginalerna för tolkning.

Logotyper kan inte approximeras; De måste reproduceras exakt, varför vi är beroende av bildfiler för att visa dem på webbsidor.


Visar logotyper på webbsidor

De flesta webbsidor visar en logotyp (vilket gör att du undrar varför det finns nej eller element?) och de implementeras ofta antingen med en märka:

  logotyp 

eller genom att använda en bildbytsteknik på ankarets innehåll:

 

Logotyp

 h1 a # logo font: 0/0 a; textskugga: ingen; färg: transparent; Bakgrund: url (images_19 / your-logo-as-a-web-font-ligature.png); 

Det här är okej. Markeringen säger "viktig rubrik, länk till hemsidan, med indexerbart (tillgängligt) innehåll för att berätta vad det handlar om". CSS byter ut innehållet för 100% visuellt korrekt branding.

Men vad sägs om frågan om skärmar med hög pixeldensitet. För ovanstående tekniker att arbeta i en näthinnesvärld, skulle en andra hi-res-version av logotypen kunna serveras vid behov. Eller en SVG-version istället. Båda möjligheterna, men vad sägs om att vi luta oss på webbfonter genom att desiging vår egen ligatur?

Tänk på det:

  • Om du använder webbtypikoner redan (varför skulle du inte vara?) Då patchar en extra glyph i teckensnittsfilen skulle innebära inga extra serverförfrågningar och mycket lite extra bandbredd.
  • Att ha din logotyp i teckensnitt betyder att du kan färga den med CSS men du vill, med så många varianter av det på sidan som du vill.
  • Använda ligaturer betyder inget behov av bildbyte tekniker (som är lite hacky när allt är sagt och gjort).

Så vad är en ligature?

För en detaljerad förklaring, ta en titt på vår anatomi av webbtypografi. För att sammanfatta är ligaturer målriktigt utformade teckenpar kombinationer. Om två tecken i ett teckensnitt ser obehagligt ut när de placeras bredvid varandra (fl att vara ett klassiskt exempel) en ligatur kan utformas för att hjälpa till. Ligaturglyfen är sedan "mappad till" (associerad med) den aktuella bokstavskombinationen. När webbläsaren möter den kombinationen växlar bokstäverna ut för en enda ligatur.

En av de många ligaturer som finns tillgängliga från Adobe Caslon Pro

Denna princip behöver inte bara gälla för brev par antingen; glyfer kan kartläggas till hela strängar.

Vår ligatur glyph kommer att bli en falsk app-logotyp (kallad "Vectr", den sista vokalen har tagits bort för att bevisa att det är en app ...) och det kommer att kartläggas till strängen "Vectr".


Processen

Gör inget misstag, IcoMoon har gjort denna process enkelt. Innan IcoMoon kom med, skulle du ha behövt använda en teckensnittsdesignande applikation (Inkscapes SVG-fontredigerare är ett av de få sätten att göra det på ett tillförlitligt sätt) för att anpassa och kartlägga varje glyph. Då skulle du spara filen, med tur direkt som TTF (TrueType), alternativt som SVG, varefter du skulle konvertera till TTF med ett annat verktyg. Då skulle du äntligen ladda upp din TTF till en webfontgenerator för att ge dig din slutprodukt.

Med IcoMoon är allt du behöver göra ...


Slutligen, handledningen

Steg 1: Vektorfil

Innan vi börjar något behöver vi en logotyp, i vektorform. Många vektorfilformat kan öppnas och redigeras i en rad grafikprogram. Encapsulated Post Script (EPS), PostScript (PS), Portable Document Format (PDF) och Scalable Vector Graphics (SVG) är några vanliga exempel för hantering av vektorer.

Jag använder Adobe Illustrator i det här exemplet, men hela processen kan tillämpas på andra applikationer (som Open Source Inkscape).

För det första, var uppmärksam på din tavla. Vi utformar effektivt en typsnittslyff, som under TrueType-omständigheter skulle vara en kvadrat på 512, 1024 eller 2048 pixlar. Det här är en konvention, inte ett krav, men vi väljer 1024px för att ge oss ett solidt nät på 64x16; perfekt för att designa teckensnitt runt en standardstorlek på 16px.


Vårt glyph kommer att utmatas med hela denna tavla runt torget och definierar effektivt vår "EM" -mätning.


Vid utformning av hela teckensnitt är det viktigt att placera alla tecken i förhållande till varandra på denna duk, så att de alla sitter snyggt längs samma grundlinje.

Jag avviker…

Med vår logotyp placerad korrekt på tavlan, sparar vi filen som SVG. Det finns ingen stor skillnad (vad gäller våra syften) i de olika SVG-inställningarna, gå bara till standardinställningarna och tryck "spara".


Steg 2: Överför till IcoMoon

Släcka webben IcoMoon.io. IcoMoon (utvecklad av den mycket snygga @Keyamoon) låter dig välja pick'n'mix ikon glyphs, kartlägga dem till karaktärer efter eget val och ladda ner @ font-face-paketet för användning på webben.

Det också låter dig ladda upp dina egna glyfer (som SVG eller TTF) för att lägga till i din samling. Importera SVG-filen som vi just har gjort, och kontrollera att den ser mer eller mindre okej i miniatyren.


Du kan omplacera logotypen och göra små förändringar genom att trycka på penna-knappen och klicka på miniatyrbilden. Faktum är att i redigeringsskärmen kan du se att det finns ett problem med bollarna i slutet av varje handtag i logotypen.


Du ser var formerna skärs? Vi har inte kombinerat alla våra vektorobjekt tillsammans korrekt i Illustrator, så jag måste gå tillbaka och se till att det är gjort ordentligt.


Med allt i ordning, låt oss bygga en ikonsamling.

Steg 3: Bygg samling

Välj vilka ikoner du behöver, inklusive din logotyp, klicka sedan på "(Generera) Font". Vid denna tidpunkt får du en förhandsgranskning av varje glyph, inklusive tecken eller unicode-enheter som de ska kartläggas till.


Du kan själv definiera tecknen (om du vill) eller, som i vårt fall, du kan definiera en hel rad tecken för att fungera som en ligatur.

Öppna menyn Inställningar och kryssrutan "Aktivera ligaturer". Nu kan vi ange en anpassad ligatursträng i rutan ovanför glyfen. I vårt fall är "Vectr" (och det är självklart).


I fönstret Inställningar kan du också välja att ladda ner din typsnitt som Base64, inbäddad i CSS-enheten i stället för att sitta på servern som separata typfiler. Jag väljer Base64-kodning, eftersom det sparar oss ännu mer HTTP-förfrågningar.

Steg 4: Hämta

Nu när du hämtar nedladdning kommer du att prydas med en helt funktionell demo; en HTML-fil, alla fontfiler och den medföljande CSS.


Standard CSS ger dig valet att välja alla element med a [Uppgifter-icon] attribut, eller direkt direkt med en klass av ditt val på element du vill använda typsnittfilen till. Vi har också en hel massa intressanta typografiska CSS-regler. varav vissa är webbläsarspecifika, men alla är värda att ta en titt på:

 tala: ingen; / * Aktivera ligatures * / -webkit-font-feature-inställningar: "liga", "dlig"; -moz-font-feature-inställningar: "liga = 1, dlig = 1"; -moz-font-funktions inställningar: "liga", "dlig"; -MS-font-funktions inställningar: "liga", "dlig"; -o-font-funktions inställningar: "liga", "dlig"; font-funktions inställningar: "liga", "dlig"; text-rendering: optimizeLegibility; typsnittstyp: normal; typsnitt: normal; typsnitt variant: normal; text-transform: ingen; linjehöjd: 1; -webkit-typsnitt-utjämning: antialiased;

Det finns några ganska experimentella regler för att säkerställa att ligaturer används där det är möjligt, då några andra (mer standard) regler som återställer vår textvisning för element i fråga. Innan allt det du ser tala: ingen; vilket förhindrar att innehållet "talas" av relevanta enheter (kanske inte nödvändigt i vår logos fall). Då märker du optimizeLegibility och webkit s font-utjämning, all god praxis för att säkerställa vår typografi visas optimalt i olika webbläsare.

Steg 5: Vår CSS

Hur som helst, ignorera dessa stilar för nu, allt vi måste göra är att vårt logotypelement har den nya teckensnittsfamiljen tillämpad på den:

 

VECTR

 .logotyp font-family: 'vectr'; 

Det är allt! När vår webbläsare möter ett element med klassen "logotyp", med innehållet "Vectr", kommer vår logotyp att visas. Nu, via CSS ensam, kan vi ändra storlek, färg, olika andra CSS effekter och alla 100% upplösning oberoende.


My Big Fat Greek Caveat

Stöd dig själv: ligaturer stöds inte av IE9 och tidigare. Opera har också tagit bort support sedan version 10 (även om Opera flyttar till Webkit som sannolikt kommer att förändras snart). Alla andra moderna webbläsare, inklusive mobila plattformar, spelar boll ganska bra, men du måste se till att du har en återgångslösning för äldre versioner av Internet Explorer.

Ett sätt att göra detta skulle vara att använda villkorade klasser på din HTML-tagg:

       

Dessa gör att du kan identifiera alla versioner av IE; allt tidigare än IE10 här ges klassen lt-IE10. Du kan sedan överbrygga dina logotypstilar i tidigare webbläsare och definiera något alternativ till webfontligaturen:

 html.lt-ie10 .logo bakgrund: något-eller-annat-ändra-the-font-familjen-och-så-on; 

Ytterligare resurser

  • Glyphs OS X teckensnittsredigeringsprogram
  • IcoMoon Anpassade och skarpa ikon typsnitt gjorda rätt
  • Din logotyp är en bild, inte en

    av Harry Roberts

  • Mer logo-märkningstips av Harry Roberts (igen)
  • relogo: en föreslagen standard för visning och underhåll av aktuella logotyper för användning i olika medier
  • Den fina blomman i ligaturen av Elliot Jay Stocks
  • Cross-browser kerning-par och ligaturer av Anthony Kolber