Share
Diamo un'occhiata a un approccio alternativo per la visualizzazione di loghi su una pagina web. Normalmente, ti avvicinerai alla sfida usando un
Per prima cosa, una breve parola sul branding. L'identità visiva (se eseguita correttamente) è progettata in modo molto approfondito e molto specifico. Tipografia, colori, spazi bianchi, varianti: dai un'occhiata alle linee guida del branding aziendale di qualsiasi prodotto o azienda e ti renderai rapidamente conto dei piccoli margini di interpretazione.
I loghi non possono essere approssimati; devono essere riprodotti con precisione, motivo per cui ci affidiamo a file di immagine per visualizzarli su pagine web.
La maggior parte delle pagine web mostra un logo (che ti fa chiedere perché non c'è
o utilizzando una tecnica di sostituzione dell'immagine sul contenuto dell'ancora:
Logo
h1 a # logo font: 0/0 a; text-shadow: none; colore: trasparente; sfondo: url (images_19 / your-logo-as-a-web-font-ligature.png);
Questo va bene. Il markup dice "titolo importante, link alla home page, con contenuti indicizzabili (accessibili) per dirci di cosa si tratta". Il CSS scambia il contenuto con un marchio visivamente accurato al 100%.
Ma per quanto riguarda il problema degli schermi ad alta densità di pixel. Affinché le suddette tecniche funzionino in un mondo di retina, una seconda versione in alta risoluzione del logo dovrebbe essere servita quando necessario. Oppure una versione SVG. Entrambe le possibilità, ma che ne dici di puntare sui caratteri web desigando la nostra stessa legatura?
Pensaci:
Per una spiegazione dettagliata, dai un'occhiata alla nostra Anatomia della tipografia Web. Per riassumere, le legature sono combinazioni di coppie di caratteri appositamente progettate. Se due caratteri in un font appaiono scomodi quando posizionati l'uno accanto all'altro (fl essendo un esempio classico) può essere progettata una legatura per dare una mano. L'icona della legatura viene quindi "mappata a" (associata alla combinazione di lettere in questione). Quando il browser incontra quella combinazione, cambia le lettere per un'unica legatura.
Una delle tante legature disponibili da Adobe Caslon Pro Questo principio deve non solo applicarsi alla lettera coppie o; i glifi possono essere mappati su intere stringhe.
Il nostro glifo legatura sarà un logo app falso (chiamato "Vectr", l'ultima vocale è stata rimossa per dimostrare che è un'app ...) e verrà mappata alla stringa "Vectr".
Non commettere errori, IcoMoon ha reso facile questo processo facile. Prima che IcoMoon arrivasse, sarebbe stato necessario usare un'applicazione per la creazione di font (l'editor di font SVG di Inkscape è uno dei pochi modi per farlo in modo economico) per allineare e mappare ogni glifo. Quindi salverei il file, con fortuna direttamente come TTF (TrueType), in alternativa come SVG dopo il quale avresti convertito in TTF usando un altro strumento. Quindi, alla fine, caricheresti il tuo TTF su un generatore di webfont per darti il tuo prodotto finale.
Con IcoMoon, tutto ciò che devi fare è ...
Prima di iniziare qualsiasi cosa, avremo bisogno di un logo, in forma vettoriale. Molti formati di file vettoriali possono essere aperti e modificati in una vasta gamma di applicazioni grafiche. Encapsulated Post Script (EPS), Post Script (PS), Portable Document Format (PDF) e Scalable Vector Graphics (SVG) sono alcuni esempi comuni per la gestione dei vettori.
In questo esempio sto usando Adobe Illustrator, ma l'intero processo può essere applicato ad altre applicazioni (come l'open source Inkscape).
In primo luogo, presta attenzione alla tua tavola da disegno. Stiamo progettando in modo efficace un glifo del carattere, che in circostanze TrueType sarebbe un quadrato di 512, 1024 o 2048 pixel. Questa è una convenzione, non un requisito, ma opteremo per 1024px per darci una solida griglia di 64x16; ideale per la progettazione di caratteri tipografici attorno a una dimensione predefinita di 16px.
Il nostro glifo verrà riprodotto con questa intera tavola da disegno attorno ad esso, definendo efficacemente la nostra misurazione "EM".
Quando si progettano caratteri interi è importante posizionare tutti i caratteri l'uno sull'altro su questa tela, in modo che tutti si siedano perfettamente lungo la stessa linea di base.
Io divago…
Con il nostro logo posizionato correttamente sulla tavola da disegno, salveremo il file come SVG. Non c'è alcuna grande differenza (per quanto riguarda i nostri scopi) nelle varie impostazioni SVG, basta andare per i valori predefiniti e premere "Salva".
Avvia l'app Web IcoMoon.io. IcoMoon (sviluppato dall'intelligente @Keyamoon) ti consente di selezionare i glifi di icone, associarli a personaggi di tua scelta, quindi scaricare il pacchetto @ font-face da utilizzare sul Web.
esso anche ti permette di caricare i tuoi glifi personali (come SVG o TTF) da aggiungere alla tua collezione. Importa il file SVG appena creato, quindi controlla che appaia più o meno nella miniatura.
È possibile riposizionare il logo e apportare piccole modifiche premendo il pulsante matita e facendo clic sulla miniatura. Infatti, nella schermata di modifica puoi vedere che c'è un problema con le palline alla fine di ogni maniglia del logo.
Vedi dove si intersecano le forme? Non abbiamo combinato tutti i nostri oggetti vettoriali insieme correttamente in Illustrator, quindi ho bisogno di tornare indietro e assicurarmi che sia fatto correttamente.
Con tutto in ordine, costruiamoci una collezione di icone.
Seleziona le icone di cui hai bisogno, incluso il logo, quindi fai clic su "(Genera) carattere". A questo punto verrà visualizzata un'anteprima di ciascun glifo, inclusi i caratteri o le entità Unicode a cui verranno mappati.
Puoi definire tu stesso i personaggi (se vuoi) o, come nel nostro caso, puoi definire un'intera stringa di caratteri che funga da legatura.
Apri il menu Preferenze e seleziona la casella di controllo "Abilita legature". Ora possiamo inserire una stringa di legatura personalizzata nella casella sopra il glifo. Nel nostro caso, "Vectr" (e ovviamente sensibile al maiuscolo / minuscolo).
Nella finestra delle preferenze puoi anche scegliere di scaricare il tuo font come Base64, incorporato nel CSS stesso invece di stare seduto sul server come file di font separati. Sto optando per la codifica Base64, poiché ci salva ancora di più Richieste HTTP.
Ora quando scarichi il download, sarai adornato con una demo completamente funzionante; un file HTML, tutti i file dei font e il relativo CSS.
Il CSS predefinito ti dà la possibilità di selezionare tutti gli elementi con a [Dati-icon] attributo o semplicemente usando direttamente una classe a tua scelta sugli elementi a cui vuoi applicare il file del carattere. Ci viene inoltre fornito un intero carico di interessanti regole tipografiche CSS; alcuni dei quali sono specifici del browser, ma vale la pena dare un'occhiata a:
parla: nessuno; / * Abilita le legature * / -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga = 1, dlig = 1"; -moz-font-funzione-settings: "liga", "dlig"; -MS-font-funzione-settings: "liga", "dlig"; -o-font-funzione-settings: "liga", "dlig"; caratteri di funzionalità-settings: "liga", "dlig"; text rendering: optimizeLegibility; stile font: normale; font-weight: normal; font-variant: normal; Trasformazione del testo: nessuno; altezza della linea: 1; -webkit-font-smoothing: antialiased;
Ci sono alcune regole abbastanza sperimentali per assicurarsi che le legature siano usate dove possibile, poi alcune altre (più standard) regole che ripristinano la nostra visualizzazione di testo per gli elementi in questione. Prima di tutto quello che vedrai parla: nessuno; che impedisce al contenuto di essere "parlato" dai dispositivi pertinenti (forse non necessario nel caso del nostro logo). Quindi noterai il optimizeLegibility e webkit font-smoothing, tutte le buone pratiche per garantire che la nostra tipografia venga visualizzata in modo ottimale in vari browser.
Ad ogni modo, ignorando quegli stili per ora, tutto noi è necessario assicurarsi che il nostro elemento logo abbia applicato la nuova famiglia di caratteri:
Vectr
.logo font-family: 'vectr';
Questo è tutto! Ogni volta che il nostro browser incontra un elemento con il "logo" di classe, con il contenuto "Vectr", verrà visualizzato il nostro logo. Ora, attraverso il solo CSS, possiamo modificare la dimensione, il colore, vari altri effetti CSS e tutte le risoluzioni al 100% indipendenti.
Preparati: le legature non sono supportate da IE9 e precedenti. Opera ha anche rimosso il supporto dalla versione 10 (anche se Opera sta passando a Webkit che probabilmente cambierà presto-ish). Tutti gli altri browser moderni, comprese le piattaforme mobili, funzionano bene, ma devi assicurarti di avere una soluzione alternativa per le versioni precedenti di Internet Explorer.
Un modo per farlo sarebbe utilizzare le classi condizionali sul tuo tag HTML:
Questi ti permettono di identificare tutte le versioni di IE; tutto prima di IE10 qui viene data la classe lt-IE10. Puoi quindi modificare gli stili del tuo logo nei browser precedenti, definendo un'alternativa alla legatura di Webfont:
html.lt-ie10 .logo background: something-or-other-change-the-font-family-and-so-on;
Accentsconagua