30 delle migliori risorse di tipografia Web online
Sembra che ci siano due campi tra i web designer: quelli che abbracciano la tipografia del web , lo sperimentano e provano cose nuove praticamente in tutti i loro progetti; e quelli che lo evitano come la peste, optando per l'uso di stack di font standard, sicuri per il web con poche variazioni.
Sembra anche che molti dei designer che rientrano nel secondo gruppo desiderino essere più simili ai primi.
Le risorse sottostanti possono aiutarti a migliorare la tua tipografia web, indipendentemente dal campo in cui ti trovi.
Ci sono strumenti per creare tipografia, riferimenti e articoli unici che possono insegnarti i tuoi principi tipografici, e tanta ispirazione e novità per tenerti aggiornato sullo stato della tipografia web.
Strumenti di tipografia
Typetester
Typetester ti consente di confrontare fino a tre font, affiancati, con qualunque testo di esempio desideri. È possibile specificare la dimensione del carattere di base, il carattere, la dimensione, la direzione, il tracciamento, l'allineamento, la spaziatura delle parole, la decorazione, il colore e il colore di sfondo per ottenere un'immagine molto precisa di come appariranno i caratteri sul sito Web effettivo. Poi, quando hai tutto come lo vuoi, puoi prendere il CSS.
HTML Ipsum
HTML-Ipsum è un generatore di iorum di lorem specifico per il web design. Invece di darti solo pezzi di testo, HTML-Ipsum può darti testo pre-formattato come paragrafi, elenchi ordinati, tabelle vuote, moduli e liste di navigazione. Il testo preformattato come questo è un ottimo modo per risparmiare tempo quando si creano prototipi di siti Web e progetti iniziali.
Typechart
Typechart ti consente di sfogliare i caratteri preformattati e sicuri per il Web e visualizzarli come appariranno sia su un PC Windows sia su un Mac. È possibile ordinare i caratteri inclusi in base a dimensioni, carattere tipografico ed enfasi.
WP-Tipografia
WP-Typography è un plugin per WordPress che aiuta a rendere più attraente la tipografia WP standard. Supporta la sillabazione, il controllo della spaziatura, la sostituzione intelligente dei caratteri (compresi virgolette, trattini, ellissi e simboli matematici) e ganci CSS per lo styling di elementi specifici (inclusi e commerciali, sigle e numeri).
Set di tipi CSS
CSS Type Set ti permette di creare un blocco di testo e quindi copiare il CSS. È un semplice generatore di CSS che è ottimo per lo styling di un font alla volta. Ti consente di controllare il carattere tipografico, la dimensione, la spaziatura, la direzione, la decorazione e il colore.
Capovolgimento Tipico
Capovolgimento Tipico mostra esempi di testo in una varietà di caratteri che hai installato sul tuo computer. È un ottimo modo per confrontare un gruppo di caratteri, fianco a fianco, tutti in una volta. L'unico avvertimento: solo alcuni dei caratteri mostrati sono sicuri per il web.
Griglia tipografica
Un ritmo verticale stabilito è una delle cose che distingue la grande tipografia dalla buona tipografia. La griglia tipografica aiuta a stabilire quel ritmo verticale per te. Include anche una griglia verticale come guida per posizionare sia la tipografia che altri elementi.
WhatTheFont
WhatTheFont fornisce un modo semplice per scoprire cos'è un particolare tipo di carattere. Basta caricare un'immagine (o specificare un URL) e WhatTheFont determinerà quale tipo di carattere viene utilizzato. Questo è un ottimo modo per trovare i font che sono stati utilizzati nelle immagini o nei file Flash.
CSS con ritmo verticale
Come già accennato, un consistente ritmo verticale imposta una grande tipografia oltre a quella che è solo "buona". Questo strumento può aiutarti a creare CSS per la tipografia con un ritmo verticale costante. Basta inserire la famiglia di caratteri, le dimensioni del carattere di base, l'altezza della linea base e le dimensioni e il calcolo del font di destinazione per ottenere CSS per un ritmo verticale costante.
Baseline Rhythm Calculator
Un altro grande calcolatore del ritmo verticale. Questo, tuttavia, ti mostrerà quali diverse dimensioni dei caratteri appaiono l'una accanto all'altra quando impostate con il tuo ritmo verticale stabilito. È un ottimo modo per assicurarti che tutte le dimensioni dei caratteri che stai utilizzando sembrino a posto.
Font Burner
Font Burner ti consente di incorporare i font sui tuoi siti web usando sIFR, usando un'interfaccia grafica. Ci sono attualmente più di 1000 caratteri disponibili tramite Font Burner, e c'è anche un plugin per WordPress disponibile. Tutto quello che devi fare per usarlo è trovare il carattere che desideri utilizzare, copiare il codice di incorporamento e incollarlo nel codice del tuo sito web.
Generatore di testo cieco
Questo generatore di testo fittizio consente di creare non solo lorem ipsum, ma anche una serie di altri tipi di testo fittizio. Allo stesso tempo, puoi anche formattare quel testo direttamente all'interno del generatore (fai clic su Opzioni avanzate), quindi copia il CSS.
Baseline
La linea di base è un framework di griglia e tipografia che include file per ripristinare i valori predefiniti del browser e creare un layout tipografico di base. È una buona opzione per i progettisti che desiderano utilizzare un layout a griglia e desiderano anche un po 'di aiuto nella progettazione della tipografia del sito. L'impostazione tipografia include titoli, elenchi, paragrafi, blockquotes e tabelle, oltre ad altri codici di markup.
Font Matrix
Font Matrix mostra i font inclusi nei sistemi operativi Mac e Windows, Microsoft Office e Adobe Creative Suite, il tutto in una griglia che consente di vedere facilmente quali tipi di carattere sono più probabili da trovare su quali tipi di computer. Ad esempio, se il tuo sito si rivolge principalmente ai designer, potresti creare il primo carattere tipografico nel tuo fontstack con Adobe Creative Suite, mentre se il sito è rivolto agli utenti business, il primo font incluso potrebbe essere qualcosa di Microsoft Office.
Typograph
Typograph ti permette di sperimentare diverse scale e altri elementi del ritmo verticale. Comprende una varietà di scale tradizionali (tra cui Le Corbusier e Fibonacci) e altre opzioni di layout.
Servizi di font Web
Typekit
Typekit offre font di vari tipi di venditori e fonderie, tra cui The League of Movable Type, FontFont e Veer (è possibile visualizzare l'intero elenco di caratteri senza registrarsi per un account). Offrono anche opzioni di controllo avanzate per lo styling dei caratteri, una scalabilità infinita e un colophon che indica ai visitatori quali tipi di carattere sta utilizzando il tuo sito. I prezzi per Typekit sono ragionevoli, vanno dal gratuito per l'accesso parziale fino a $ 100 / anno per i siti ad alto traffico.
Kernest
Kernest è un servizio di font web che utilizza i font OFL, GPL, GUST e Creative Commons, oltre a quelli con licenze commerciali. Molti dei loro font sono liberi di usare (il servizio è gratuito) mentre altri hanno costi di abbonamento a partire da pochi dollari.
Font in diretta da Ascender
Ascender offre il proprio servizio di font web, Fonts Live. Hanno oltre 110 caratteri tipografici disponibili, con i font di Monotype, Microsoft, Bigelow & Holmes e altri, nonché i propri caratteri.
Google Font API
Google offre una selezione limitata di caratteri Web open source. Sebbene la selezione non sia ampia, è gratuita e supportata da Google, il che significa che è improbabile che si verifichino problemi di capacità o tempi di attesa.
TypeFront
TypeFont si avvicina ai caratteri web in modo leggermente diverso. Piuttosto che offrire una libreria di caratteri web-friendly, ti permettono di caricare i tuoi font che portano una licenza web-friendly. Questa è una grande opzione se i font che vuoi utilizzare non sono attualmente offerti da nessuno degli altri servizi di font web. C'è un piano gratuito per siti a basso traffico, oltre a piani a pagamento.
Font tipografici Web
Typotheque offre il proprio servizio di font Web per mettere a disposizione i propri font per le implementazioni @ font-face. Il vantaggio è che c'è solo un costo di licenza una tantum che può coprire sia la stampa che le applicazioni web. Lo svantaggio è che la selezione è limitata ai soli caratteri.
Tipografia Risorse e articoli
Gli elementi dello stile tipografico applicati al Web
Questa è una guida di riferimento molto completa per chiunque voglia apprendere non solo le basi della buona tipografia web, ma anche tecniche e principi più avanzati. È diviso in capitoli e sottocapitoli, inclusi movimenti orizzontali e verticali, blocchi e paragrafi, impaginazione, dimensioni e molto altro. È un work in progress, quindi aspettatevi ulteriori informazioni per apparire in futuro.
Nice Web Type
Nice Web Type ha tonnellate di informazioni sull'implementazione della tipografia web. Hanno "note" su tutto, da quando si inizia con la tipografia web a usare CSS @ font-face. Discutono anche di tendenze e nuove idee su base regolare e hanno una pagina dedicata a ciò che considerano alcuni dei migliori font disponibili.
12 esempi di tipografia di paragrafo
Questa raccolta di formati di paragrafo di esempio di Jon Tan offre un ottimo punto di partenza per chiunque stia progettando un sito pesante per il testo. Molti designer trascurano tutte le possibilità offerte dallo stile dei paragrafi e optano per opzioni più tradizionali e conservative. Questo articolo dimostra che non è così difficile uscire dalla scatola e fare qualcosa di interessante con i paragrafi nei tuoi progetti.
Contrasto e flusso tipografici
Questa è una fantastica guida di WebDesignerWall sui principi del flusso e del contrasto nella tipografia web. Abbatte questi principi in diverse sezioni, tra cui dimensioni, carattere tipografico / classificazione, colore e peso.
Stack di font rivisto
Questo articolo discute l'espansione degli stack di font CSS sicuri per il Web comuni esplorando altri tipi di carattere installati comunemente. Esplora anche le pile di font di alcuni siti Web popolari, insieme a consigli su come potrebbero migliorare i loro stack.
Sulla tipografia Web
Questo articolo di Jason Santa Maria su A List Apart è un look molto completo sull'accoppiamento dei caratteri tipografici nei design del tuo sito web. È un argomento che non viene discusso molto spesso, ma è fondamentale per creare grandi progetti tipografici sul web.
Pensando con il tipo
Thinking with Type è il sito web associato al libro dello stesso titolo di Ellen Lupton. Offre molte informazioni di base sulla tipografia. Mentre molto è incentrato sulla stampa tipografica, molte delle informazioni incluse possono essere applicate alla tipografia web.
10 ottimi consigli per migliorare la tua tipografia Web
Un elenco di dieci semplici cose che puoi fare per migliorare la tipografia nei progetti del tuo sito web. Include informazioni su font, dimensioni, scala e gerarchia, leading e altro.
Ispirazione tipografica, tendenze e notizie
Typophile
Typophile è un forum per appassionati di tipografia e tipografi. Se vuoi scoprire cosa sta succedendo nel mondo della tipografia, Typophile è un ottimo posto dove guardare. È anche un buon posto per ottenere aiuto in caso di problemi relativi alla tipografia che potresti avere.
Amo la tipografia
ILT è un blog dedicato interamente alla tipografia. Discute sia di design che di argomenti di business, da un punto di vista professionale. Il loro archivio è enorme, quindi ci sono un sacco di informazioni su notizie e tendenze attuali e passati per tenerti occupato.
adoriamo la tipografia
WLT è una galleria di tipografia, lettere, segnaletica e altro tipo. Gli utenti possono inviare immagini di tipo che amano, ed è un ottimo posto dove andare per l'ispirazione tipografica per il tuo prossimo progetto.
Tipografia per titoli
Elements of Design ha una grande galleria di oltre 120 esempi di tipografia headline. Eseguono la gamma da semplice a complessa, in una varietà di caratteri e stili. È un posto eccellente dove andare se stai cercando un po 'di ispirazione. Hanno anche una galleria di tira citazioni con oltre 20 esempi.
Typographica
Typographica offre recensioni dei tipi, commenti e recensioni di libri di tipografia. Le loro recensioni di tipo sono particolarmente istruttive se stai cercando di capire cosa rende un buon carattere tipografico.
Dietro le quinte di Exquisite Web Typography
Questo è in realtà il primo di una serie in cinque parti. Questo post esamina la tipografia di A List Apart, analizzando i font e gli stili utilizzati per le diverse parti del sito. I post successivi guardano a: Jesús Rodróguez Velasco , Jon Tan , Designr.it , e Il codice Transportica .
Typesites
Typesites è un blog che mostra regolarmente grandi progetti di tipografia web. I siti che presentano sono diversi, ma tutti includono l'uso di ispirazione del tipo.
Compilato esclusivamente per il deposito di Webdesigner di Cameron Chapman