10 esempi di tipografia ispiratrice sul web

Sai cosa amo? La rete. Nello specifico, amo quella sensazione quando incappi in uno di quei meravigliosi angoli di bellezza con una tipografia particolarmente bella. Oggi inseriremo la lente di ingrandimento in 10 fantastici esempi di tipografia Web in una nuova serie mensile che cerca di darti una nuova ispirazione tipografica!


Tipografia Web Inspirational, A Webdesigntuts + Serie mensile: Durante i miei viaggi sul world wide web, ho preso nota degli esempi di siti che mi ispirano come designer. Usando il tipo in modo innovativo, artistico o semplicemente meraviglioso, questi siti mi hanno aiutato a spingere le mie capacità tipografiche ... e spero che si dimostreranno stimolanti anche per te. In questa serie, non elencheremo solo questi siti ... esamineremo effettivamente come e perché funzionano.

Senza ulteriori indugi, presento la collezione curata di questo mese di 10 esempi di tipografia ispiratrice. Se non faccio il tuo preferito questo mese, assicurati di condividerlo in basso nella sezione dei commenti!


Il cubicolo di design

Il blog di design di Brian Hoff utilizza una miscela di Sentinel e Tungsten per l'intestazione e altri titoli di piccole dimensioni, e FF Dagny Web Pro per titoli di corpo e post. La combinazione di questi due stili di tipo incredibilmente diversi si compensano molto bene.

L'intestazione sembra sia orgogliosa che professionale, con i due volti eccellenti di Hoefler e Frere-Jones che si completano a vicenda in modo meraviglioso. La forma condensata e verticale del tungsteno contrasta con il sentinel italico finemente dettagliato per produrre un titolo che sia sia leggibile che gradevole alla vista.

Per il corpo, non c'è molto da fare, e penso che sia così che lo vuole il designer. Dagny è un tipo di carattere meraviglioso e senza fronzoli che funziona sia in testo piccolo corpo che in titoli più grandi e in grassetto. Non c'è molto altro da dire qui, a parte il fatto che si tratta di una meravigliosa scelta di font e che chiunque la vedrà apprezzerà sicuramente.


Carsonified

Ah sì. Nessun post tipografico corretto sarebbe completo senza menzionare la riprogettazione 2009 di Mike Kus di carsonified.com. Il sito utilizza un Cooper Black di dimensioni eccezionali, un carattere tipografico di cui vero potere è evidente quando è impostato su una dimensione così grande. Vedi tutti i dettagli del font e capisci veramente che tipo di azienda è Carsonified.

Il resto del tipo sulla pagina si toglie di mezzo, con malapena-percettibile Helvetica nella navigazione e Georgia per la copia del corpo e la maggior parte dei titoli. Non sono sicuro del tipo di carattere utilizzato per i titoli sulla destra della loro home page, ma posso vedere che le sue qualità disegnate a mano sono magnificamente in contrasto con la sensazione quasi da macchina da scrivere di Cooper, come se fossero due lati della stessa moneta.

In realtà, però, quello che penso collega il design di questo sito sono i colori. Ogni pagina ha un colore di sfondo unico che funziona perfettamente con l'abbronzatura del testo. I colori sono molto diversi tra le pagine, ma tutti condividono a nostalgico, vibrante sensazione, quella che funziona con il verde, il blu e persino l'arancione brillante. La bellezza del colore del testo è che ha un contrasto sufficiente con uno sfondo scuro e uno sfondo molto luminoso.


Galpin Industries

Il sito di Tyler Galpin è un meraviglioso mix di industrial, dettagliato ed emotivo. Usa una vasta gamma di caratteri per la sola tagline, qualcosa che di solito sembra stupido, ma qui, Tyler sceglie solo quelli giusti per farlo funzionare. Sebbene appaiano così diversi da quelli a occhio nudo, tutti i caratteri tipografici mostrano un messaggio singolare.

Per non scherzare sul punto, ma direi che la caratteristica principale di questo sito sono il numero di caratteri utilizzati in tutto il sito. Un momento stai guardando un bel slap-serif, poi scorri un po ', e cos'è questo? Un copione? Qui? Puoi dire solo dal guardarlo quanto tempo e sforzo è stato messo per scegliere il tipo che puoi dare un'occhiata in pochi secondi.

Un altro elemento importante di questo sito è come ogni pagina è stata progettata su misura, ?? se lo desideri, senza utilizzare un modello CMS predefinito. Ogni pagina è anche composta con ancora più caratteri, creando una coerenza attraverso la totale mancanza di coerenza in tutto il sito.

Parliamo di colore. Galp.in ha una delle tavolozze di colori più sobrie che ho visto sul web ultimamente. Semplice nero su bianco, con spruzzi di giallo e rosso gettati per enfatizzare, e sottolineare lo fa. È davvero sorprendente ciò che un singolo colore può fare per creare un sorprendente contrasto visivo nelle mani giuste. Bella tipografia, bel sito web.


Dawghouse Design Studio

Il sito web di Jan Cavan è davvero unico. Si affida molto alla trama e non tanto al tipo. Allora, perché è inclusa in questa retata? Il tipo che ha sul suo sito è scelto con molto gusto. Ad esempio, il titolo principale di ogni pagina è impostato in un vivace script in stile retrò, una scelta audace per un design audace. Questi font "retro script" sono difficili da usare sul web però ... e questo design evita accuratamente il cliché "a tutto campo" con un'applicazione contenuta.

Non riesco davvero a capire perché mi piace così tanto questo disegno, ma penso che abbia qualcosa a che fare con il colore, o forse con la trama? Aspetta, penso di aver capito. Tutti gli elementi del design si fondono perfettamente e nessuna area riceve più attenzione di un'altra.

Qui ci sono anche molte cose sottili. I titoli dei post sul blog sono impostati in maiuscolo, una decisione che funziona bene con i serif di classe che ha scelto per inserirli. Tutte queste piccole cose nel design di Jan contribuiscono all'atmosfera retrò che la pagina sta mettendo in risalto.


Otto ore

Lo studio di Nathan Strandberg e Katie Kirk. ?? Il nome del gioco qui è sottigliezza, e questo meraviglioso sito web non delude. Dal tipo bello ai colori vividi, è davvero un'esperienza da visitare su ottavo.it. Tutti i caratteri sono scelti con gusto, con un'intestazione in un bel sans-serif e un sottotitolo di script. Tutto il testo è equilibrato; niente sta chiedendo a gran voce la tua attenzione. Questo è un sito molto accogliente.

Come ho detto, il colore gioca un ruolo importante nella tipografia, così come nel design nel suo insieme. Quel bel rosso-arancio è usato ovunque, accompagnato da altri colori tenui. In questo sito, sembra che il tipo e il colore siano intrinsecamente intrecciati insieme. Il tipo non funzionerebbe senza il colore e viceversa.

Non c'è niente di speciale nei caratteri tipografici da soli. Certo, sarebbero ancora belli, ma non così perfetti come adesso. Questo rende questo sito particolarmente divertente da esaminare per scoprire come il tipo e il colore interagiscono tra loro.


Una notte per l'adozione

Un ottimo sito Web per una grande causa di Matthew Smith. Ciò che amo di questo sito è l'attenzione ai dettagli. Guarda quei sottili corsivi nei titoli. Bellissimo. Ammiro il suo uso della Georgia per le intestazioni. Normalmente è usato per il testo del corpo, ma mettendolo nella dimensione che ha fatto per l'intestazione mostra davvero il dettagli stupendi del vecchio carattere tipografico.

Notare il modo in cui la luce splende sopra il testo nell'intestazione. Sono quelle piccole cose che rendono grande un design.

La Georgia è anche usata per quei bottoni adorabili, con quella combinazione di maiuscoletto e piccolo corsivo. Questo design mostra davvero la flessibilità di un carattere tipografico, e lo adoro.

Voglio anche menzionare che quasi tutto il testo sulla pagina è testo reale, incorporato tramite @ font-face, quindi cappelli di Mike Meyer per questo.


Cinguettio

Un altro progetto di Mike Kus, questo con alcune tipografie davvero uniche. Poiché la maggior parte di essa è basata su immagini, non posso dire quale font è usato in questo progetto, ma posso dire che rappresenta molto bene l'immagine che Twitter emette come azienda; è divertente, leggero e un po 'sciocco.

Dal punto di vista del colore, hai il familiare Twitter blu usato in tutto il sito per la maggior parte del testo, e funziona magnificamente. C'è anche un bel rosso usato per abbellimenti e accattivanti che coesiste molto pacificamente tra le pagine del sito.

Ciò che è sorprendente per me è che, anche se non menzionasse la compagnia ad ogni turno, si potrebbe comunque dire che si tratta di un sito di Twitter. Progetta il loro marchio unico ad ogni livello, con il tipo, il colore, l'illustrazione e persino la trama. Che bel sito piccolo.


Laboratori digitali

Slab-serif, sans-serif, serif, questo sito usa tutti i tipi di tipi e li usa bene. È una buona scelta lasciare i serif di lastra per i titoli più grandi, il che lascia il pesante sollevamento, se vuoi, a italic Times New Roman, un carattere tipicamente non usato nel web design, ma che funziona bene se usato correttamente.

La minuscola copia del corpo è lasciata a Tahoma, un'altra scelta audace che funziona bene in una piccola dimensione. Si nota a malapena che è anche lì, e sono sicuro che è così che lo ha voluto il designer.

Ancora una volta, non sono sicuro di cosa si usi per i grandi titoli, anche se probabilmente metterei i miei soldi su Rockwell, una scelta davvero solida.

Dal punto di vista del colore, questo design utilizza uno schema di luce scuro usato raramente che non funziona con testi di testo più lunghi, ma per un sito pesante come questa, penso che funzioni molto, molto bene. Come al solito, un altro colore è usato per enfatizzare, e in questa situazione, quel colore è un arancione piacevole e ricco. È una scelta molto di classe, e rispetto la decisione.


Arte nel mio caffè

Per una collezione di spumeggiante allegria, ?? dal dinamico duo Jina Bolton e Meagan Fisher, la parola che viene in mente è di classe. Tutto il tipo è molto leggibile e impostato in colori che completano piacevolmente le immagini deliziose caratteristiche del sito. Mentre guardo questo sito, sono colpito dalla qualità dei dettagli di questo design, dal tipo ben impostato, ai colori ispirati al caffè.

Sono abbastanza certo che il logo e i sottotitoli sono in Archer, un semplice, leggibile, slap-serif di Hoefler & Frere-Jones. Ancora una volta, questo, insieme alla Georgia, rende per a elegante, leggibile Esperienza.

Un'altra cosa che adoro assolutamente in questo sito sono i colori. Poiché è ovviamente un sito a tema caffè, i colori non si adattano solo, ma sono anche belli. Certo, l'effetto è probabilmente migliorato dato il numero di immagini color caffè sul sito.

Nel complesso, un sito web assolutamente fantastico da parte di persone assolutamente fantastiche.


Da ferro a ferro

?? Bel design e sviluppo, ?? legge Iron to Iron, e bello è. L'intero design si sente orgoglioso e in qualche modo regale, come se fosse finemente realizzato dal designer interno della corte.

Dal punto di vista del tipo, questo design è semplice bello. Quel testo oscurato condensato è geniale. Non puoi davvero leggerlo, ma in realtà non ti fa alcuna pressione su di te per provare. Sono quei tipi di dettagli e svolazzi che rendono bello questo sito. Caso in questione, non c'è uno scopo pratico per la forma simile a un diagramma di Venn sullo sfondo dell'intestazione, ma sembra fantastico, e aggiunge ancora un'altra dimensione a questo design.

I paragrafi del corpo sono ambientati in una Georgia assurda, e penso che li serva bene, specialmente se si considera che i sans larghi che sono sotto (per le intestazioni).

La trasparenza dei colori viene utilizzata con grande effetto, con la maggior parte dei colori che si differenziano semplicemente per i livelli della stessa abbronzatura e blu-verde.

Che modo davvero meraviglioso di mettere fine a questa piccola raccolta di bellissimi siti web.


Conclusione

Bene, è quel momento del post di nuovo. Abbiamo avuto delle risate, delle grida, ma insieme siamo arrivati ​​alla conclusione, e qui devo lasciarti. Come ho detto sopra, se non avessi colpito il tuo preferito questo mese, assicurati di condividerlo in basso nella sezione dei commenti! Sarò sicuro di dare un'occhiata al post il prossimo mese!

Maggiori informazioni sulla tipografia Web al mio post su Scegliere il carattere giusto: una guida pratica alla tipografia sul web!