Share
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
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.
De flesta webbsidor visar en logotyp (vilket gör att du undrar varför det finns nej
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:
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".
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 ...
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".
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.
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.
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.
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.
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;
Accentsconagua