Share
Laten we eens kijken naar een alternatieve aanpak voor het weergeven van logo's op een webpagina. Normaal gesproken zul je de uitdaging aan gaan met een
Allereerst een kort woordje over branding. Visuele identiteit (indien goed gedaan) is zeer grondig en zeer specifiek ontworpen. Typografie, kleuren, witruimten, varianten - bekijk de huisstijlrichtlijnen van elk product of bedrijf en u zult snel op de hoogte zijn van de kleine marges voor interpretatie.
Logo's kunnen niet worden geschat; ze moeten precies worden gereproduceerd, daarom zijn we afhankelijk van afbeeldingsbestanden om ze op webpagina's weer te geven.
De meeste webpagina's hebben een logo (waardoor u zich afvraagt waarom er geen logo is)
of door een techniek voor het vervangen van afbeeldingen te gebruiken voor de inhoud van het anker:
Logo
h1 a # logo font: 0/0 a; text-shadow: none; kleur: transparant; achtergrond: url (images_19 / your-logo-as-a-web-font-ligature.png);
Dit is goed. De markup zegt "belangrijke kop, link naar de startpagina, met indexeerbare (toegankelijke) inhoud om ons te vertellen waar het over gaat". De CSS wisselt de inhoud uit voor 100% visueel accurate branding.
Maar hoe zit het met de kwestie van schermen met hoge pixeldichtheid. Om de bovenstaande technieken in een retina-wereld te laten werken, zou een tweede hi-res versie van het logo moeten worden geserveerd wanneer dat nodig is. Of in plaats daarvan een SVG-versie. Beide mogelijkheden, maar hoe zit het met leunen op weblettertypen door onze eigen ligatuur te designen?
Denk er over na:
Bekijk voor een uitgebreide uitleg onze Anatomie van Web-typografie. Samengevat, ligaturen zijn doelbewust ontworpen combinaties van tekenparen. Als twee tekens in een lettertype er vreemd uitzien als ze naast elkaar worden geplaatst (fl als een klassiek voorbeeld) kan een ligatuur worden ontworpen om te helpen. De ligatuur-glyph wordt dan "toegewezen" aan (geassocieerd met) de betreffende lettercombinatie. Wanneer de browser die combinatie tegenkomt, schakelt deze de letters uit voor een enkele ligatuur.
Een van de vele ligaturen die verkrijgbaar zijn bij Adobe Caslon Pro Dit principe hoeft niet alleen van toepassing te zijn op brieven paren een van beide; glyphs kunnen worden toegewezen aan hele reeksen.
Onze ligatuur glyph wordt een nep app-logo (genaamd "Vectr", de laatste klinker is verwijderd om te bewijzen dat het een app is ...) en het zal worden toegewezen aan de string "Vectr".
Vergis u niet, IcoMoon heeft dit proces eenvoudig pekelig gemaakt. Voordat IcoMoon meeging, moest u een toepassing voor het ontwerpen van lettertypen gebruiken (Inkscape's editor voor SVG-lettertypen is een van de weinige manieren om dit betaalbaar te doen) om elke glyph uit te lijnen en in kaart te brengen. Vervolgens slaat u het bestand op, met geluk meteen als TTF (TrueType), als alternatief SVG, waarna u met een andere tool naar TTF converteert. Dan zou u eindelijk uw TTF uploaden naar een webfont-generator om u uw eindproduct te geven.
Met IcoMoon hoeft u alleen maar ...
Voordat we iets beginnen, hebben we een logo nodig in vectorvorm. Veel vectorbestandsindelingen kunnen worden geopend en bewerkt in een reeks grafische toepassingen. Encapsulated Post Script (EPS), Postscript (PS), Portable Document Format (PDF) en Scalable Vector Graphics (SVG) zijn enkele veel voorkomende voorbeelden voor het afhandelen van vectoren.
Ik gebruik Adobe Illustrator in dit voorbeeld, maar het hele proces kan worden toegepast op andere toepassingen (zoals de open source Inkscape).
Ten eerste, let op uw tekengebied. We zijn effectief bezig met het ontwerpen van een lettertype-glyph, die onder TrueType-omstandigheden een vierkant van 512, 1024 of 2048 pixels zou zijn. Dit is een conventie, geen vereiste, maar we zullen kiezen voor 1024px om ons een solide grid van 64x16 te geven; ideaal voor het ontwerpen van lettertypen rond een standaardgrootte van 16px.
Onze glyph wordt uitgevoerd met dit hele tekengebied er omheen, waardoor onze "EM" -meting effectief wordt gedefinieerd.
Bij het ontwerpen van hele lettertypen is het belangrijk om alle tekens ten opzichte van elkaar op dit canvas te plaatsen, zodat ze allemaal netjes langs dezelfde basislijn blijven.
Ik dwaal af…
Als ons logo correct op het tekengebied is geplaatst, slaan we het bestand op als SVG. Er is geen groot verschil (wat onze doelen betreft) in de verschillende SVG-instellingen, ga gewoon voor de standaardwaarden en klik op "opslaan".
Start de IcoMoon.io-webapp. Met IcoMoon (ontwikkeld door de zeer slimme @ Keyamoon) kun je pictogramglyphs kiezen, deze toewijzen aan tekens van je keuze en vervolgens het @ font-face-pakket downloaden voor gebruik op het web.
Het ook kunt u uw eigen glyphs (als SVG of TTF) uploaden om toe te voegen aan uw verzameling. Importeer het SVG-bestand dat we zojuist hebben gemaakt en controleer of het min of meer in orde lijkt in de miniatuur.
U kunt het logo verplaatsen en kleine wijzigingen aanbrengen door op de potloodknop te drukken en op de miniatuur te klikken. In feite kun je in het bewerkingsscherm zien dat er een probleem is met de ballen aan het einde van elk handvat in het logo.
Zie je waar de vormen elkaar kruisen? We hebben al onze vectorobjecten niet goed samengevoegd in Illustrator, dus ik moet teruggaan om te controleren of dit correct is gebeurd.
Laten we met alles in orde een icooncollectie samenstellen.
Selecteer de pictogrammen die u nodig hebt, inclusief uw logo, en klik vervolgens op "(Genereer) lettertype". Op dit punt krijgt u een voorbeeld van elke glyph, inclusief de tekens of Unicode-entiteiten waaraan ze worden toegewezen.
U kunt de tekens zelf definiëren (als u dat wilt) of, zoals in ons geval, u kunt een hele reeks tekens definiëren om als een ligatuur te fungeren.
Open het menu Voorkeuren en vink het selectievakje "Ligaturen inschakelen" aan. Nu kunnen we een aangepaste ligatuurstring invoeren in het vak boven de glyph. In ons geval "Vectr" (en dat is natuurlijk hoofdlettergevoelig).
In het venster Voorkeuren kunt u ook kiezen om uw lettertype te downloaden als Base64, ingebed in de CSS zelf in plaats van op de server te zitten als afzonderlijke lettertypebestanden. Ik kies voor Base64-codering, omdat het ons redt nog meer HTTP-verzoeken.
Wanneer je nu op download klikt, word je versierd met een volledig functionele demo; een HTML-bestand, alle lettertypebestanden en de bijbehorende CSS.
De standaard CSS geeft je de keuze om alle elementen met een te selecteren [Data-icon] attribuut, of gewoon rechtstreeks een klasse naar keuze gebruiken op elementen waarop u het lettertypebestand wilt toepassen. We krijgen ook een hele reeks interessante typografische CSS-regels; waarvan sommige browserspecifiek zijn, maar die de moeite van het bekijken waard zijn:
spreek: geen; / * Schakel Ligaturen * / -webkit-font-feature-settings in: "liga", "dlig"; -moz-font-feature-instellingen: "liga = 1, dlig = 1"; -moz-font-feature-instellingen: "liga", "dlig"; -MS-font-feature-instellingen: "liga", "dlig"; -o-font-feature-instellingen: "liga", "dlig"; font-feature-instellingen: "liga", "dlig"; text-rendering: optimizeLegibility; lettertype: normaal; font-gewicht: normaal; lettertype-variant: normaal; text-transform: none; regelhoogte: 1; -webkit-font-smoothing: antialiased;
Er zijn enkele tamelijk experimentele regels om ervoor te zorgen dat ligaturen waar mogelijk worden gebruikt, en vervolgens enkele andere (meer standaard) regels die onze tekstweergave voor elementen in kwestie opnieuw instellen. Voordat je dat allemaal zult zien spreek: geen; die voorkomt dat de inhoud wordt "gesproken" door relevante apparaten (misschien niet nodig in het geval van ons logo). Dan merk je het optimizeLegibility en webkit's font-smoothing, alle goede praktijken om ervoor te zorgen dat onze typografie optimaal wordt weergegeven in verschillende browsers.
Hoe dan ook, die stijlen negeren voor nu, allemaal wij hoeft te doen is ervoor te zorgen dat ons logo-element de nieuwe lettertypefamilie erop heeft toegepast:
VECTR
.logo font-family: 'vectr';
Dat is het! Wanneer onze browser een element tegenkomt met het klasse "logo", met de inhoud "Vectr", zal ons logo worden getoond. Nu kunnen we via CSS alleen de grootte, kleur, verschillende andere CSS-effecten en alle 100% resolutie-onafhankelijk wijzigen.
Zet je schrap: ligaturen worden niet ondersteund door IE9 en eerder. Opera heeft ook de ondersteuning sinds versie 10 verwijderd (hoewel Opera naar Webkit verhuist dat waarschijnlijk snel zal veranderen). Alle andere moderne browsers, inclusief mobiele platforms, spelen redelijk goed, maar u moet ervoor zorgen dat u een fallback-oplossing hebt voor oudere versies van Internet Explorer.
Een manier om dit te doen is om voorwaardelijke klassen te gebruiken voor uw HTML-tag:
Hiermee kunt u alle versies van IE identificeren; alles eerder dan IE10 hier krijgt de klasse lt-IE10. U kunt dan uw logo-stijlen overrulen in eerdere browsers en een alternatief voor de webfont-ligatuur definiëren:
html.lt-ie10 .logo background: something-or-other-change-the-font-family-and-so-on;
Accentsconagua