Share
Examinons une autre approche pour afficher les logos sur une page Web. Normalement, vous allez relever le défi en utilisant un
Tout d'abord, un mot rapide sur la stratégie de marque. L'identité visuelle (lorsqu'elle est correctement réalisée) est conçue de manière très détaillée et très spécifique. Typographie, couleurs, espaces, variantes - jetez un coup d’œil aux directives de la marque de chaque produit ou entreprise et vous vous rendrez rapidement compte des faibles marges d’interprétation..
Les logos ne peuvent pas être approximés; ils doivent être reproduits avec précision, c'est pourquoi nous comptons sur les fichiers image pour les afficher sur des pages Web.
La plupart des pages Web affichent un logo (ce qui vous fait vous demander pourquoi aucun
ou en utilisant une technique de remplacement d'image sur le contenu de l'ancre:
Logo
h1 a # logo font: 0/0 a; texte-ombre: aucun; couleur: transparent; fond: url (images_19 / votre-logo-comme-un-web-font-ligature.png);
C'est bon. Le balisage indique «une rubrique importante, un lien vers la page d'accueil, avec un contenu indexable (accessible) pour nous dire de quoi il s'agit». Le CSS échange le contenu pour une stratégie de marque visuellement précise à 100%.
Mais qu’en est-il de la question des écrans à haute densité de pixels? Pour que les techniques ci-dessus fonctionnent dans un monde rétinien, une seconde version haute résolution du logo devrait être fournie en cas de besoin. Ou une version SVG à la place. Les deux possibilités, mais que dirions-nous de nous appuyer sur les polices Web en concevant notre propre ligature?
Penses-y:
Pour une explication détaillée, consultez notre section Anatomie de la typographie Web. Pour résumer, les ligatures sont des combinaisons de paires de caractères conçues à dessein. Si deux caractères d’une police ont l’air bizarre lorsqu’ils sont placés côte à côte (fl étant un exemple classique) une ligature peut être conçue pour aider. Le glyphe de ligature est ensuite «mappé sur» (associé à) la combinaison de lettres en question. Lorsque le navigateur rencontre cette combinaison, il bascule les lettres pour une seule ligature.
Une des nombreuses ligatures proposées par Adobe Caslon Pro Ce principe ne s’applique pas seulement à la lettre paires non plus; les glyphes peuvent être mappés sur des chaînes entières.
Notre glyphe de ligature va être un faux logo d'application (nommé «Vectr»; la dernière voyelle a été supprimée pour prouver que c'est une application…) et il va être associé à la chaîne «Vectr»..
Ne vous y trompez pas, IcoMoon a facilité ce processus. Avant l'arrivée d'IcoMoon, vous auriez eu besoin d'utiliser une application de conception de polices (l'éditeur de polices SVG d'Inkscape étant l'un des rares moyens de le faire à un prix abordable) pour aligner et mapper chaque glyphe. Ensuite, vous enregistrez le fichier, avec de la chance directement sous le format TTF (TrueType), ou au format SVG, après quoi vous convertissez le fichier au format TTF à l'aide d'un autre outil. Enfin, vous pourrez télécharger votre fichier TTF vers un générateur de polices Web afin de vous donner votre produit final..
Avec IcoMoon, tout ce que vous avez à faire est de…
Avant de commencer quoi que ce soit, nous allons avoir besoin d'un logo, sous forme vectorielle. De nombreux formats de fichiers vectoriels peuvent être ouverts et modifiés dans diverses applications graphiques. PostScript (EPS), Post Script (PS), Portable Document Format (PDF) et Scalable Vector Graphics (SVG) encapsulés sont quelques exemples courants de gestion de vecteurs..
J'utilise Adobe Illustrator dans cet exemple, mais l'ensemble du processus peut être appliqué à d'autres applications (telles que le logiciel open source Inkscape)..
Tout d'abord, faites attention à votre artboard. Nous concevons efficacement un glyphe de police qui, dans les circonstances TrueType, serait un carré de 512, 1024 ou 2048 pixels. Ceci est une convention, pas une exigence, mais nous opterons pour 1024px pour nous donner une grille solide de 64x16; idéal pour concevoir des polices de caractères autour d'une taille par défaut de 16 px.
Notre glyphe sera affiché avec tout ce carré d’artboard tout autour, définissant efficacement notre mesure "EM".
Lors de la conception de polices entières, il est important de positionner tous les caractères les uns par rapport aux autres sur cette toile, afin qu'ils soient parfaitement alignés le long de la même ligne de base..
Je digresse…
Avec notre logo correctement positionné sur la planche graphique, nous enregistrerons le fichier au format SVG. Il n'y a pas de grande différence (en ce qui concerne nos objectifs) dans les différents paramètres SVG, il suffit d'aller pour les valeurs par défaut et cliquez sur "Enregistrer".
Lancez l'application Web IcoMoon.io. IcoMoon (développé par le très intelligent @Keyamoon) vous permet de choisir les glyphes d'icônes, de les mapper aux personnages de votre choix, puis de télécharger le package @ font-face à utiliser sur le Web..
Il également vous permet de télécharger vos propres glyphes (tels que SVG ou TTF) à ajouter à votre collection. Importez le fichier SVG que nous venons de créer, puis vérifiez qu'il semble plus ou moins correct dans la vignette..
Vous pouvez repositionner le logo et apporter de petites modifications en appuyant sur le bouton du crayon et en cliquant sur la vignette. En fait, dans l'écran d'édition, vous pouvez voir qu'il y a un problème avec les billes situées au bout de chaque poignée du logo..
Vous voyez où les formes se croisent? Nous n'avons pas correctement combiné tous nos objets vectoriels dans Illustrator. Je dois donc revenir en arrière et m'assurer que tout est fait correctement..
Avec tout en ordre, construisons nous-mêmes une collection d'icônes.
Sélectionnez les icônes dont vous avez besoin, y compris votre logo, puis cliquez sur "(Générer) une police". À ce stade, vous obtenez un aperçu de chaque glyphe, y compris les caractères ou entités Unicode sur lesquels ils seront mappés..
Vous pouvez définir vous-même les caractères (si vous le souhaitez) ou, comme dans notre cas, vous pouvez définir toute une chaîne de caractères agissant comme une ligature..
Ouvrez le menu Préférences et cochez la case "Activer les ligatures". Nous pouvons maintenant entrer une chaîne de ligature personnalisée dans la zone située au-dessus du glyphe. Dans notre cas, "Vectr" (et c'est bien sûr sensible à la casse).
Dans la fenêtre Préférences, vous pouvez également choisir de télécharger votre police en tant que Base64, intégrée au sein même du CSS, au lieu de rester sur le serveur en tant que fichiers de police distincts. J'opte pour le codage Base64, car il nous sauve encore plus Requêtes HTTP.
Maintenant, lorsque vous cliquez sur télécharger, vous serez orné d'une démo entièrement fonctionnelle; un fichier HTML, tous les fichiers de polices et le CSS correspondant.
Le CSS par défaut vous permet de sélectionner tous les éléments avec un [icône de données] attribut, ou utilisez directement une classe de votre choix sur les éléments auxquels vous souhaitez appliquer le fichier de police. Nous avons également reçu de nombreuses règles CSS typographiques intéressantes. dont certaines sont spécifiques à un navigateur, mais qui méritent toutes d’être examinées:
parle: aucun; / * Activer les ligatures * / -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga = 1, dlig = 1"; -moz-font-feature-settings: "ligue", "dlig"; -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "ligue", "dlig"; font-feature-settings: "liga", "dlig"; rendu du texte: optimise la légitimité; style de police: normal; poids de police: normal; variante de police: normal; transformation de texte: aucune; hauteur de ligne: 1; -webkit-font-lissage: antialiasé;
Il existe des règles assez expérimentales pour s'assurer que les ligatures sont utilisées dans la mesure du possible, suivies d'autres règles (plus standard) qui réinitialisent l'affichage du texte pour les éléments en question. Avant tout ce que vous verrez parle: aucun; ce qui empêche le contenu d'être "parlé" par des dispositifs appropriés (peut-être pas nécessaire dans le cas de notre logo). Ensuite, vous remarquerez le optimiserLégibilité et de webkit le lissage des polices, toutes les bonnes pratiques pour que notre typographie soit affichée de manière optimale dans divers navigateurs.
Quoi qu'il en soit, en ignorant ces styles pour l'instant, tous nous Assurez-vous que la nouvelle famille de polices est appliquée à notre élément de logo:
Vectr
.logo font-family: 'vectr';
C'est tout! Chaque fois que notre navigateur rencontre un élément avec la classe "logo", avec le contenu "Vectr", notre logo sera affiché. Maintenant, par le biais de CSS uniquement, nous pouvons modifier la taille, la couleur, divers autres effets CSS et tous les effets indépendants de la résolution à 100%..
Préparez-vous: les ligatures ne sont pas supportées par IE9 et les versions antérieures. Opera a également supprimé le support depuis la version 10 (bien qu'Opera passe à Webkit, qui changera probablement prochainement). Tous les autres navigateurs modernes, y compris les plates-formes mobiles, jouent plutôt bien, mais vous devez vous assurer que vous disposez d'une solution de secours pour les anciennes versions d'Internet Explorer..
Une solution consiste à utiliser des classes conditionnelles sur votre balise HTML:
Celles-ci vous permettent d'identifier toutes les versions d'IE; tout ce qui précède IE10 est donné ici la classe lt-ie10. Vous pouvez ensuite remplacer vos styles de logo dans les navigateurs précédents, en définissant une alternative à la ligature de police Web:
html.lt-ie10 .logo background: quelque chose ou d'autre-changer-la-famille-de-polices-et-ainsi-de-suite;
Accentsconagua